How much CSS do you already have?
Be honest — nobody is watching. This only decides which chapters come first; every chapter stays open to you either way.
“I can lay out a real page.”
Start with the cascade and the box model — the rules every other CSS explanation assumes you already know — then flexbox, the layout you'll use constantly.
- You've written CSS by trial and error before
- The cascade and specificity still feel like guesswork
- You want the box model and flexbox once, in order
“I can lay out a real application.”
You know flexbox. Now learn Grid, positioning, animation, custom properties, and the architecture that keeps a real stylesheet sane.
- Comfortable with flexbox and the box model
- You've fought z-index and lost at least once
- You want a stylesheet that scales past one page
“I can reason about the rendering pipeline.”
Stacking contexts and layout algorithms in depth, scroll-driven animation, cascade layers, and the performance work behind a fast page.
- You can already build a responsive, themeable layout with Grid
- You debug jank and layout thrash, not just visual bugs
- You want the why under containment, layers and the paint pipeline
Not sure? Start at Beginner — every path opens at the section people usually skip.
Full syllabus
Everything each level eventually covers — ticked sections are written, the rest are still on the desk.
Beginner0 / 8 sections written
- The cascade, specificity & inheritancecoming soon
How rules win, source order, inheritance
- The box modelcoming soon
content/padding/border/margin, box-sizing
- Selectorscoming soon
Combinators, pseudo-classes, pseudo-elements
- Display typescoming soon
block/inline/inline-block, visibility vs display:none
- Colors, units & typographycoming soon
px/em/rem/%, font properties, color formats
- Backgrounds & borderscoming soon
Gradients, shadows, border-radius
- Flexboxcoming soon
The model, main/cross axis, common patterns
- Basic responsive designcoming soon
Media queries, mobile-first
✅ Checkpoint: you can lay out a real page with flexbox, responsive to screen size, without fighting the cascade.
Intermediate0 / 9 sections written
- Gridcoming soon
The model, template areas, auto-placement
- Positioning & stacking contextscoming soon
relative/absolute/fixed/sticky, z-index
- Transitions & animationscoming soon
Keyframes, timing functions, transforms
- Custom propertiescoming soon
CSS variables — scoping, theming
- Responsive design in depthcoming soon
Container queries, clamp/min/max
- CSS architecturecoming soon
BEM, utility-first (Tailwind), CSS Modules
- Pseudo-classes & selectors in depthcoming soon
:has, :is, :where, nth-child
- Print & other media typescoming soon
@media print and beyond
- Forms stylingcoming soon
appearance, accent-color, styling native controls
✅ Checkpoint: you can build a responsive, themeable app layout with Grid and custom properties, and explain why an element is stacking where it is.
Advanced0 / 8 sections written
BFC/IFC, containment
- Advanced animationcoming soon
Scroll-driven animations, the View Transitions API
- CSS architecture at scalecoming soon
Design tokens, theming systems
- Performancecoming soon
Critical CSS, containment, will-change, reflow/repaint
- Modern layout techniquescoming soon
Subgrid, :has()-driven layouts
- Cascade layers & scopecoming soon
@layer and @scope
- Houdini & the future of CSScoming soon
Custom paint/properties (surface level)
- Cross-browser & fallback strategiescoming soon
Feature queries (@supports), progressive enhancement
✅ Checkpoint: you can diagnose a layout-thrash performance bug, explain a stacking-context surprise, and design a themeable design-token system.
- Flexbox comes before Grid on purpose — most real layouts are one-dimensional, and Grid clicks faster once flex's mental model is automatic.
- Cascade layers and :has() are 2023+ CSS that quietly replace a lot of specificity hacks and JS-driven class toggling — they sit at the top of advanced because everything else assumes the old cascade rules first.
- Houdini and paint worklets are the deepest, rarest layer — most working CSS developers never touch them, but the advanced tier doesn't skip them.