CSS Learning Roadmap
A complete CSS learning path covering all 61 topics — from the mastery curriculum and property encyclopedia through layout systems, motion, architecture, accessibility, and modern CSS. Built for humans and AI agents. Each stage builds on the previous.
info
Start with the dual-audience curriculum and the property encyclopedia — then follow the stages below.
Ordered Stages 0–7, checkpoint projects, AI verification prompts, failure modes, and agent ingest via forgelearn-css.
Encyclopedia of major properties: values, defaults, inheritance, logical maps, media features, @layer, @property.
Permanent agent wiring — /api/agent, skills, curriculum=css, markdown API.
Lay the groundwork with selectors, the cascade, the box model, and display types.
What CSS is, how to include it in HTML, syntax basics, and your first stylesheet.
Type, class, ID, attribute, pseudo-class, pseudo-element selectors, and combinators.
How the cascade resolves conflicting rules, specificity scoring, source order, and !important.
Which properties are inherited, inherit/initial/unset/revert, and controlling the flow.
Content, padding, border, margin; box-sizing; collapsed margins.
block, inline, inline-block, none, flow-root, contents, flex, grid.
Control size, space, color, and surface treatments for any element.
width, height, min-/max-, intrinsic sizing, aspect-ratio.
Shorthands, auto margins, logical spacing, negative margin gotchas.
Border width/style/color, radius, outline vs border.
hex, rgb/hsl, oklch/oklab, display-p3, and color functions.
Background layers, size, position, attachment.
Linear, radial, conic gradients and color stops.
box-shadow, text-shadow, inset shadows, layered effects.
Polish text rendering, load custom fonts, and harness CSS custom properties.
Font stacks, size units, weight, line-height, fluid type.
Decoration, transform, spacing, white-space, wrapping.
Web fonts, font-display, variable fonts, performance.
Custom properties, var(), fallbacks, theming.
Mixing colors in modern color spaces for palettes.
Build complex layouts with Flexbox, Grid, Subgrid, positioning, and overflow.
Main/cross axis, grow/shrink/basis, alignment, gap.
Tracks, areas, fr, minmax, auto-fill/auto-fit.
Inherit parent tracks for nested alignment.
static, relative, absolute, fixed, sticky.
Stacking contexts, isolation, common footguns.
Dashboard, navbar, footer, responsive shells.
overflow, ellipsis, line-clamp, overscroll, scrollbars.
scrollbar-gutter, scrollbar-width/color, ::-webkit-scrollbar.
Anchor-based popovers and tooltips.
Inline/block properties for RTL and writing modes.
writing-mode, text-orientation, direction, vertical CJK text.
counter-reset/increment, @counter-style, numbered headings, TOC.
Transforms, transitions, animations, filters, and view transitions.
translate, rotate, scale, 3D, perspective.
Duration, easing, delay, property lists.
@keyframes, iteration, fill-mode, performance.
filter, backdrop-filter, mix-blend-mode.
clip-path, mask-image, masking modes.
shape-outside, shape-margin, text wrap around circles/polygons.
Snap type/align for carousels and sections.
Scroll timeline, view timeline, linked effects.
SPA/MPA transitions, named elements, pseudos.
Media queries, container queries, fluid design, and functions.
@media, operators, prefers-* features, breakpoints.
container-type, @container, cqw/cqi units.
Mobile-first, fluid type, responsive images strategy.
calc, min, max, clamp, minmax, env, trig.
Tokens, system preference, JS toggle patterns.
Maintainable CSS: layers, scope, modules, utilities, and nesting.
Naming, ITCSS, scalability patterns.
Layer order vs specificity, revert-layer, vendor wraps.
Subtree isolation, proximity, vs layers/modules.
Scoped class names, composition, globals.
Native nesting without preprocessors.
Parent/relational selector patterns.
Typed custom properties and animation.
Utility-first workflow, variants, tokens.
Styled Components, Emotion, trade-offs.
Performance, a11y media features, print, and best practices.
contain, content-visibility, will-change guidance.
Above-the-fold extraction and deferring non-critical CSS.
reduced-motion, forced-colors, focus-visible, contrast.
@page, breaks, print-friendly layouts.
Architecture, specificity, theming, review checklist.
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.