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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.