CSS & Modern Styling
Layout, the cascade, and the modern tools (Grid, custom properties, container queries) that replaced two decades of float and z-index hacks — why each property actually behaves the way it does, not just which one to reach for.
18 lessons
Beginner
The box model — what actually gets measuredBeginner3 min read·Not startedThe cascade and specificity — which rule actually winsBeginner3 min read·Not startedFlexbox fundamentals — one-dimensional layoutBeginner3 min read·Not startedCSS Grid fundamentals — two-dimensional layoutBeginner3 min read·Not startedPositioning — static, relative, absolute, fixed, stickyBeginner3 min read·Not startedResponsive design — media queries and mobile-firstBeginner3 min read·Not started
Intermediate
CSS custom properties (variables) — real dynamic valuesIntermediate3 min read·Not startedUnits that matter — px vs rem vs em vs %, and why it's not just styleIntermediate3 min read·Not startedThe stacking context — z-index gotchas explainedIntermediate3 min read·Not startedTransitions and animations — the properties that actually run smoothlyIntermediate3 min read·Not startedPseudo-classes and pseudo-elements — real use casesIntermediate3 min read·Not startedCSS architecture — BEM, utility classes, and CSS-in-JS trade-offsIntermediate4 min read·Not started
Advanced
Container queries — component-level responsivenessAdvanced2 min read·Not startedModern CSS layout patterns — the holy grail without hacksAdvanced3 min read·Not startedAccessibility and CSS — focus states, motion, and contrastAdvanced3 min read·Not startedCSS performance — layout thrashing and expensive selectorsAdvanced3 min read·Not startedDark mode and theming — the real implementation strategiesAdvanced3 min read·Not startedCommon CSS bugs and gotchas — a field referenceAdvanced3 min read·Not started