All roadmaps

The CSS roadmap

Every CSS lesson we teach, laid out as one path. Each station is a stage; tap any lesson to open it. Stations turn teal as you finish them.

Legend:Lesson stageStage completeTap a lesson to open it
01

Foundations

How CSS Works: Syntax & Linking
Selectors & Combinators
Pseudo-classes & Pseudo-elements
The Cascade, Specificity & Inheritance
02

Box Model & Units

The Box Model & box-sizing
CSS Units: px, rem, em, %, viewport
calc(), clamp(), min() & max()
Overflow, Outline & Display
03

Typography

Fonts & Web Font Loading
Font Sizing & Spacing
Text Styling & Wrapping
04

Color & Decoration

Color Formats & OKLCH
Custom Properties (CSS Variables)
Backgrounds & Gradients
Borders, Radius & Shadows
05

Positioning & Stacking

Position: static to sticky
Z-index & Stacking Context
Float, Clear & Legacy Display
06

Flexbox

Flexbox: Direction, Wrap & Gap
Flex Alignment
Flex Items: grow, shrink, basis & order
07

Grid & Subgrid

Grid: Rows, Columns & Placement
Grid Areas, auto-fit & minmax()
Subgrid: Aligning Nested Grids
08

Responsive Design

Media Queries & Mobile-First
Container Queries
Fluid Type & Responsive Units
object-fit & aspect-ratio
09

Transitions, Animation & Transforms

Transitions: Smooth State Changes
CSS Keyframe Animations
CSS Transforms (2D & 3D)
Scroll-Driven Animation & Reduced Motion
10

Visual Effects

Filters & Blend Modes
Clip-path & Masking
Scroll Snap & Smooth Scroll
11

Modern CSS 2026

CSS Nesting
:has() The Parent Selector
Cascade Layers (@layer)
Anchor Positioning & color-mix
Logical Properties & i18n
12

Architecture & Workflow

Dark Mode & color-scheme
Naming, BEM & Design Tokens
CSS Debugging & DevTools