Advanced CSS & SASS: Framework, Flexbox, Grid, Animations

Plan and scaffold a css & sass project, configure google fonts roboto, apply a universal reset, and build a navigation layout with left and right panels and font awesome icons.

learn to build a fixed top navigation bar using css and sass, with a full-width nav, flexbox layout, space-between alignment, hover effects, transitions, and color variables.

Learn to style a main page section with a two column layout using flex, full viewport height, animated left and right panels with background images, text effects, and color variables.

Create a fixed bottom footer with a full-width flex row for text and social icons, and enable hover color transitions via CSS variables for each platform.

Apply responsive design at a 1024-pixel breakpoint to adjust nav and footer layouts, font sizes, and spacing, switching flex direction for iPad Pro and mobile formats in SAS.

Build a footer using a Sass mixin partial to apply a flex layout with configurable direction and alignment via variables, and add hover colors with transitions for social icons.

Learn Sass syntax, including variables, if statements, top-level declarations, and nesting; explore interpolation, partials, and set versus SCSS syntax to build styles efficiently.

Learn how Sass default values let you define a variable, override it later, or fall back to a default when undefined or null, with library and partial examples.

Explore Sass scope by contrasting global versus block scope, showing how top-level variables are accessible across a module while block-level variables stay local, with practical font and color examples.

Explore SASS shadowing and scope, comparing local and global variables with the same name, and use the global flag to control which value is applied.

Explore Sass advanced variable functions, including metadata variable existence checks and global scope checks, and apply color maps with map.get to dynamically style background and text colors.

Explore Sass data types by understanding numbers as value plus unit, with examples like 16 pixels and 10 percent, including decimals and unit-based styling.

Explore how Sass strings work, including single and double quotes, escapes, and interpolation. Apply string variables to control font family, size, and styling in a sample project.

Explore Sass colors by using hex codes, color names, and rgb or rgba values with alpha, and define color variables to apply them to elements like spans and their children.

Explore Sass lists, including comma or space separated values and optional square brackets, then loop through sizes to interpolate font size, height, and width for items.

Explore how the Sass null data type represents absence of a value and signals missing results, and learn how not treats null as false in boolean expressions for conditional styling.

Explore Sass operators, including mathematical operations with automatic unit conversions, relation and numerical operators, and equality rules for numbers, strings, colors, lists, and maps, plus boolean and string operators.

Learn to define reusable Sass functions that pull values from maps to compute font sizes and colors, merge maps, and apply dynamic styles like hover darkening for consistent theming.

Sass flow control rules include if, else, for, each, and while, controlling whether blocks are evaluated for lists and maps. Use with mixins and functions to write small algorithms.

Learn to use Sass flow control with @if and @else to conditionally apply styles, evaluate true or false, and drive mixins with booleans for color, background, borders, and layout variations.

learn how Sass flow control with @each iterates over lists and maps to assign variables by position, using interpolation to generate sizes, colors, and styles for dynamic buttons.

Learn to use the Sass for rule to iterate from one expression to another, assign each value to a variable, and interpolate colors and font sizes.

Download the starter files to set up a flexbox layout, apply a reset and color variables, and build a two-section structure with a parent container and six child items.

Explore how display:flex and flex-wrap control wrapping of flex items into multiple lines, including the bottom-to-top wrap produced by flex-wrap-reverse. Observe how shrinking the container alters item flow and alignment.

Explore how justify-content aligns items along the main axis in flexbox, using values like flex-start, center, space-between, space-around, and space-evenly.

Discover how align-items places flex items along the cross axis on the current line inside a 300 pixels container, using flex-start, flex-end, center, stretch, and baseline.

Explore how align content in flexbox handles extra space on the cross axis, and practice using justify content with center alignment, space between, and space around to distribute items.

Learn to reorder flex items with the order property by targeting each child in the flex container. Change values to rearrange six items from source order to a new sequence.

Flex grow defines how a flex item grows to fill available space in the container using unitless values, while enabling flex wrap lets items wrap and share space.

Explore how flex shrink works in flexbox, including wrap behavior and item sizing under container constraints. Then apply these concepts in a project using flexbox and spss.

Create a responsive blog template using flexbox and grid, with navigation, blog posts, about and contact sections, hover effects, and device-responsive layouts including iPad Pro.

Organize the project with a project folder and starter files, link Font Awesome and Google Fonts, and build a flexbox navigation with sections for about and contact and card layouts.

Set up a modular scss configuration with partials for config and key sections (navigation, main, about, footer). Establish a responsive, flex-based layout using color variables, maps, and a flex mixin.

Adjust the about section by centering the image with margin auto, setting height 550px and max width 800px, centering text, and using a 1.5 line height.

Style the footer section with flex layouts and wrapping, creating three footer blocks with precise widths and padding. Enhance interactivity with hover color changes on social icons.

Apply responsive design by building a responsive mixin and media queries, center content, and adjust cards, images, typography, navigation, and footer using flex and grid at 1024-pixel breakpoints.

Create the starter folder, copy the gradation demo files, and use Firefox with live server to view, inspect the grid container, brick container, and new variables in style SPSS.

learn how to name grid areas with grid-template-areas, assign each grid item a named area (header, main, side, footer), and build a four-column layout using grid-template-columns.

Explore the grid template shorthand to define grid template columns, rows, and areas with display grid, and adjust column widths and row heights using pixels and auto values.

Learn how justify-content controls grid item alignment along the inline axis, with values like start, end, center, stretch, space around, space between, and space evenly in pixel-based grids.

Explore grid auto columns and rows, including implicit tracks created when items exceed cells or are placed outside the explicit grid, and how to span items across columns and rows.

Learn how grid auto flow governs automatic placement of grid items, controlling row or column packing, dense packing, and how template columns and rows affect item placement.

Position grid children with grid-column and grid-row start and end values to control each item's placement. Practice placing the first, second, and third child to build a flexible grid layout.

Explore when to use css grid versus flexbox in a responsive portfolio template, building grid-based navigation, aside, icons, header, and footer while understanding practical layout choices across devices.

Create photo template starter files with a grid, import configurations and components, and build navigation, header, aside, main grid, section grid, a form, and responsive styles with Google fonts Mansoura.

Learn to configure a photo template with a responsive css foundation: a global reset, box-sizing, google fonts, color variables, social colors, and a simple grid mixin for flexible layouts.

Build a font size map and a text position map in a reusable text component, deriving sizes from a base font and enabling left, center, and right alignment via classes.

Apply the Cavett font from Google Fonts to the header via the CSS config, then adjust header margins, color, and letter spacing for the three-column layout.

Set up the main area as a three-column, two-row image deck grid with a light background, position each deck via grid-column and grid-row, and apply align-self stretch and gaps.

Demonstrate building a photo grid inside a section using a six-column grid, assign background images to items, and use a mixin to streamline image styling and hover effects.

Explore building a responsive form with grid using a form map and grid areas, style inputs and submit button, and lighten the primary color by 95%.

Build a responsive photo footer using a CSS grid that arranges six social icons with hover effects. Apply color variables and center the content with a max-width.

Explore how CSS transitions control animation speed when changing CSS properties, with changes occurring over time via an acceleration curve and implicit start and end states defined by the browser.

Download the starter files, set up a transition folder, and open the CSS project to explore transition properties—duration, timing function, delay, transform—and the shorthand syntax that creates all transitions.

Explore how the transition timing function property shapes animation speed curves in CSS transitions. See demos of linear, ease, ease-in, ease-out, and ease-in-out to animate widths and colors on hover.

Explore the transition-delay property in CSS, using practical examples that adjust width and hover effects with delays from one to five seconds, showing how delays affect transition timing.

Explore how CSS transition and transform properties animate width, height, color, and rotation in a transform dev demo; hover to see elements expand, rotate, and revert.

Explore CSS animations with @keyframes to control transforms, translateX, and opacity over time, define steps, durations, and delays, and apply them to elements.

Create color transitions with keyframes by animating a div from red to yellow, using animation-name, duration, and iteration-count to control repeats.

Explore the animation-direction property in CSS, showing how to use normal, reverse, backwards, alternate, and alternate-reverse with keyframes that change background color and position.

Explore the animation shorthand property to combine name, duration, timing function, delay, iteration counts, and direction into a single declaration, including key frame example.