CSS Layout Mastery

Introduction

1. Welcome and What You'll Build
2. Who This Course Is For
3. Setting Up Your Editor and Dev Tools
4. Specified, Computed and Used Values
5. What Changed in Modern CSS, and What It Replaced
6. How to Get the Most Out of This Course

The Cascade, Specificity and Layers

1. The Five Steps of the Cascade
2. Origins: User Agent, User and Author
3. Counting Specificity Properly
4. Why a Thousand Classes Never Beat an id
5. The !important Escalation Trap
6. :is() and :where(), and the Specificity Difference
7. @layer: Precedence Without Specificity
8. Declaring Layer Order Up Front
9. Unlayered Styles and Why They Always Win
10. How !important Reverses Layer Order
11. Keeping the Cascade Boring

Inheritance and the Global Values

1. Which Properties Inherit, and Why
2. inherit and initial
3. unset and revert
4. revert-layer: Undoing a Single Layer
5. Resetting an Element with all
6. currentColor and Single-Value Inheritance
7. Building on Inheritance Instead of Fighting It

Custom Properties and Design Tokens

1. Declaring and Reading a Custom Property
2. Fallbacks Inside var()
3. Custom Properties Inherit, and That Is the Point
4. Scoping Tokens to a Subtree
5. Invalid at Computed-Value Time
6. Theming with a Token Set
7. Component Variants Without New Selectors
8. @property: Typing a Custom Property
9. Animating a Registered Property
10. Structuring Primitive, Semantic and Component Tokens

Modern Selectors

1. :has(), the Parent Selector
2. :has() with Live Form State
3. :has() for Sibling and Group State
4. :not() with a Selector List
5. :nth-child() and the An+B Formula
6. The of Keyword and Filtered Counting
7. Attribute Selectors and the Substring Operators
8. Case-Insensitive Attribute Matching
9. :focus, :focus-visible and :focus-within
10. ::before, ::after and the content Property
11. CSS Counters and attr()
12. The Interface Pseudo-Elements

Nesting and @scope

1. Native Nesting with &
2. Compound vs Descendant: The Space That Changes Everything
3. Parent-First Selectors with &
4. Nesting Media and Container Queries
5. What Nesting Does to Specificity
6. @scope and the Donut
7. Proximity as a Tie-Breaker

Units, Maths and Fluid Sizing

1. The Unit Families
2. em vs rem, and When Each Wins
3. ch, ex and Font-Relative Sizing
4. Viewport Units and the Mobile Address Bar
5. calc() and Mixing Units
6. clamp() for Fluid Type
7. min() and max() as Guardrails
8. Intrinsic Sizing: min-content, max-content, fit-content
9. aspect-ratio
10. round(), mod() and the Maths Functions

Modern Colour

1. The Modern rgb() and hsl() Syntax
2. Alpha, Four Ways
3. Why hsl() Lightness Lies
4. oklch() and Perceptual Lightness
5. color-mix() and Interpolation Spaces
6. Relative Colour Syntax
7. Deriving a Whole Palette from One Token
8. color-scheme and light-dark()
9. Gradients, Hard Stops and Midpoint Hints

Container Queries and Responsive Logic

1. Why Media Queries Are the Wrong Question for a Component
2. container-type and @container
3. Naming Containers
4. Container Query Units
5. Style Queries
6. Media Query Range Syntax
7. Querying the User: the prefers-* Features
8. @supports for Properties and Selectors
9. Progressive Enhancement That Ages Well

Filters, Blending, Masks and Shadows

1. The filter Functions
2. drop-shadow() vs box-shadow
3. backdrop-filter and Frosted Glass
4. mix-blend-mode and background-blend-mode
5. clip-path and the Basic Shapes
6. Masking with Gradients and Images
7. Layered Shadows That Look Like Light
8. background-clip: text

Stacking, Containment and Scrolling

1. What z-index Actually Compares
2. Everything That Creates a Stacking Context
3. isolation: isolate
4. Containing Blocks for Absolute and Fixed
5. How transform and filter Trap Fixed Elements
6. position: sticky, and Its Four Failure Modes
7. Scroll Snapping
8. Tuning a Scroll Container
9. contain and content-visibility

Typography and Modern Interface CSS

1. text-wrap: balance and pretty
2. Clamping Text to a Number of Lines
3. Logical Properties
4. Writing Modes and Direction
5. @font-face, font-display and Layout Shift
6. Variable Fonts and font-variation-settings
7. A Native Accordion with details and summary
8. accent-color, caret-color and field-sizing
9. Popovers and Anchor Positioning

Architecture, Performance and Capstone

1. A Layer Architecture That Scales
2. Importing Third-Party CSS into a Layer
3. Naming: BEM, Utilities and Tokens
4. Layout, Paint and Composite
5. What Actually Costs Frames
6. will-change, Used Correctly
7. Debugging CSS Methodically
8. Capstone: One Component, Every Technique

Introduction

1. Welcome and What You'll Build
2. Who This Course Is For
3. Setting Up Your Editor and Dev Tools
4. Course Files and How to Use Them
5. How to Get the Most Out of This Course

Intro to CSS Flexbox Layouts

1. Layout Before Flexbox: Floats, Tables and inline-block
2. The Problems Flexbox Was Designed to Solve
3. The Flex Formatting Context
4. Anatomy of a Flex Container: Main Axis and Cross Axis
5. Container Properties vs. Item Properties
6. Inspecting Flex Layouts with Browser DevTools
7. Browser Support and Sensible Fallbacks

Defining and Using Flex Containers

1. display: flex and display: inline-flex
2. What Happens to Child Elements Automatically
3. flex-direction: row, row-reverse, column, column-reverse
4. How Changing Direction Swaps the Two Axes
5. Spacing Items with gap
6. Margins in Flexbox and the auto Margin Trick
7. Practice: A Responsive Navigation Bar

Sizing Flex Items: flex-grow, flex-shrink & flex-basis

1. The Default Sizing Behaviour of a Flex Item
2. flex-basis vs. width: Which One Wins
3. flex-grow: Distributing Positive Free Space
4. flex-shrink: Handling Overflow Gracefully
5. The flex Shorthand and Its Hidden Defaults
6. flex: 1 vs. flex: auto vs. flex: none
7. min-width, max-width and the min-content Floor
8. Building Proportional Columns Without a Grid
9. Practice: A Sidebar That Never Collapses

Justifying and Aligning the Flex Container and Flex Items

1. justify-content: Positioning Along the Main Axis
2. space-between, space-around and space-evenly Compared
3. align-items: Positioning Along the Cross Axis
4. align-self: Overriding a Single Item
5. align-content and Why It Needs Multiple Lines
6. Baseline Alignment for Mixed Text Sizes
7. Centering Anything, Vertically and Horizontally
8. Practice: A Card Footer Pinned to the Bottom

Wrapping, Flow and Flex Direction

1. flex-wrap: nowrap, wrap and wrap-reverse
2. The flex-flow Shorthand
3. How Wrapping Creates Flex Lines
4. Controlling Wrap Points with flex-basis and Percentages
5. Reordering Items with the order Property
6. Reverse Directions and Their Accessibility Cost
7. Responsive Wrapping Without Media Queries
8. Practice: A Tag List That Wraps Gracefully

Advanced CSS Flexbox

1. Nested Flex Containers and How Sizing Cascades
2. The Holy Grail Layout with Flexbox
3. The Sticky Footer Pattern
4. Truncating Text Inside a Flex Item
5. Equal-Height Columns for Free
6. Flexbox and aspect-ratio
7. Flexbox with Container Queries
8. Animating and Transitioning Flex Properties
9. When to Use Flexbox and When to Reach for Grid
10. Debugging the Five Most Common Flexbox Mistakes
11. Capstone Project: A Complete Dashboard Shell
12. Where to Go Next

Introduction

1. Welcome and What You'll Build
2. Who This Course Is For
3. Setting Up Your Editor and Dev Tools
4. Course Files and How to Use Them
5. How to Get the Most Out of This Course

Intro to CSS Grid Layouts

1. What CSS Grid Solves That Floats and Flexbox Cannot
2. Grid vs. Flexbox: Two Dimensions vs. One
3. The Grid Formatting Context
4. Anatomy of a Grid: Lines, Tracks, Cells and Areas
5. Inspecting Grids with Browser DevTools
6. Browser Support and Progressive Enhancement

Defining and Using CSS Grids

1. display: grid and display: inline-grid
2. Defining Columns with grid-template-columns
3. Defining Rows with grid-template-rows
4. Sizing Tracks with px, %, em and auto
5. The fr Unit and How Free Space Is Shared
6. Gutters: row-gap, column-gap and gap
7. Placing Items with grid-column and grid-row
8. Line Numbers, Negative Line Numbers and span
9. Naming Grid Lines for Readable Placement
10. Practice: A Two-Column Blog Layout

Using Grid Areas, Equal Sizes, repeat() & minmax()

1. Naming Regions with grid-template-areas
2. Placing Items with the grid-area Property
3. Sketching Layouts as ASCII Art
4. Leaving Cells Empty with the Dot Notation
5. Rearranging a Whole Layout in One Declaration
6. Repeating Tracks with repeat()
7. Equal-Width Columns with repeat() and fr
8. Constraining Track Sizes with minmax()
9. min-content, max-content and fit-content()
10. auto-fill vs. auto-fit: The Difference That Matters
11. Practice: A Responsive Card Gallery Without Media Queries

Justifying the Grid Container and Grid Items

1. The Two Axes: Inline and Block
2. Aligning the Whole Grid with justify-content and align-content
3. Aligning Items in Their Cells with justify-items and align-items
4. Overriding a Single Item with justify-self and align-self
5. The place-content, place-items and place-self Shorthands
6. start, end, center, stretch and the Baseline Values
7. Centering Anything with Two Lines of Grid
8. Practice: A Perfectly Centered Hero Section

The Implicit Grid and Grid Flow

1. Explicit Grid vs. Implicit Grid
2. Why Extra Rows and Columns Suddenly Appear
3. Sizing Implicit Tracks with grid-auto-rows and grid-auto-columns
4. Controlling Direction with grid-auto-flow
5. Dense Packing and Filling In the Holes
6. The grid Shorthand, Explained Piece by Piece
7. The Auto-Placement Algorithm and Item Order
8. Practice: A Masonry-Style Photo Wall

Advanced CSS Grids

1. Nested Grids and Their Independent Track Lists
2. subgrid: Inheriting Tracks From a Parent
3. subgrid in Practice: Aligning Card Content Across a Row
4. Overlapping Items Intentionally with z-index
5. Full-Bleed Sections with a Named Content Column
6. Combining Grid with Container Queries
7. Animating and Transitioning Grid Tracks
8. aspect-ratio Inside Grid Items
9. Accessibility: Visual Order vs. DOM Order
10. Debugging the Five Most Common Grid Mistakes
11. Capstone Project: A Complete Magazine Layout
12. Where to Go Next

Introduction

1. Welcome and What You'll Build
2. Who This Course Is For
3. Setting Up Your Editor and Dev Tools
4. Course Files and How to Use Them
5. How to Get the Most Out of This Course

Intro to CSS Transitions

1. What Motion Is For, and When to Skip It
2. Your First Transition
3. The Four Transition Properties
4. transition-property and What Can Actually Be Animated
5. transition-duration and Perceived Speed
6. The transition Shorthand and Its Time Trap
7. Transitioning Several Properties at Once
8. Why a Transition Needs a State Change
9. Practice: A Button With Polish

Transforms: translate, scale, rotate & skew

1. Why transform Instead of top and left
2. translate, translateX and translateY
3. scale and the Role of transform-origin
4. rotate and the Angle Units
5. skew and Its Rare Uses
6. Combining Transforms, and Why Order Matters
7. The Individual Properties: translate, scale, rotate
8. 3D: perspective, rotateY and backface-visibility
9. Practice: A Flip Card

Keyframe Animations with @keyframes

1. @keyframes: Defining a Timeline
2. animation-name and animation-duration
3. Percentage Keyframes and from/to
4. animation-iteration-count and infinite
5. animation-direction and the alternate Trick
6. animation-fill-mode: forwards, backwards and both
7. animation-delay, Including Negative Delays
8. animation-play-state: Pausing and Resuming
9. The animation Shorthand
10. Running Several Animations on One Element
11. Practice: A Spinner and a Skeleton Loader

Timing Functions, Delays and Easing

1. What an Easing Curve Actually Is
2. ease, linear, ease-in, ease-out and ease-in-out
3. cubic-bezier() and Building Your Own Curve
4. Overshoot: Control Points Outside 0 to 1
5. steps() for Sprites and Typewriters
6. linear() for Springs and Bounces
7. Choosing Durations That Feel Right
8. Practice: A Staggered List Reveal

Orchestrating and Controlling Animations

1. Transition or Animation: Choosing Between Them
2. Animating Entrances
3. @starting-style for Entry Animations
4. Animating to and from display: none
5. Animating Height Without a Magic Number
6. JavaScript Hooks: transitionend and animationend
7. The Web Animations API in One Minute
8. Animating Custom Properties with @property
9. Practice: An Accordion That Animates Open

Advanced CSS Animation

1. The Rendering Pipeline: Layout, Paint, Composite
2. The Two Cheap Properties: transform and opacity
3. will-change and When Not to Use It
4. Avoiding Layout Thrash and Jank
5. Scroll-Driven Animations with animation-timeline
6. view() Timelines: Animating on Entry
7. The View Transitions API
8. Motion Paths with offset-path
9. prefers-reduced-motion and Accessible Motion
10. Debugging Animations in DevTools
11. Debugging the Five Most Common Animation Mistakes
12. Capstone Project: An Animated Landing Section
13. Where to Go Next