CSS Roadmap
CSS is a styling language that controls how interfaces look, scale, and adapt across devices. Its main use case is turning raw markup into usable products through layout systems, typography, spacing, and responsive behavior. Its moat is cascade + composition: with disciplined architecture, CSS can power complex design systems without heavy runtime cost.
Scope: Study the topics in order. Write every example by hand, preview it in a browser, and inspect your rules in dev tools as you go.
CSS Study Progress:
| # | CSS | Topic | Description |
|---|---|---|---|
| PHASE 1: LANGUAGE FOUNDATIONS | |||
| 01 | CSS Syntax and Rule Anatomy | Rules, declarations, where styles live, at-rules, and error recovery. | |
| 02 | Selectors and Combinators | Simple selectors, combinators, pseudo-classes, and pseudo-elements. | |
| 03 | Cascade, Specificity and Inheritance | The tie-breaker order, specificity arithmetic, layers, and inheritance. | |
| 04 | Colors, Units and Value Functions | Color spaces, relative units, and calc, clamp, min and max. | |
| PHASE 2: THE BOX AND TEXT | |||
| 05 | The Box Model | Content, padding, border, margin, sizing models, and margin collapse. | |
| 06 | Typography and Readability | Measure, leading, font stacks, fluid type, and font loading. | |
| PHASE 3: LAYOUT | |||
| 07 | Display, Flow and Positioning | Normal flow, the display property, the five positions, and stacking contexts. | |
| 08 | Flexbox | Axes, item sizing, the auto-margin trick, and daily flex patterns. | |
| 09 | CSS Grid | Tracks, the fr unit, template areas, and query-free responsive grids. | |
| PHASE 4: RESPONSIVE AND MOTION | |||
| 10 | Responsive Design and Media Queries | Mobile-first workflow, additive queries, and fluid sizing. | |
| 11 | Transitions and Animations | Easing, keyframes, cheap properties, and reduced-motion support. | |
| 12 | Accessible Styling | Focus indicators, contrast, target sizes, and the prefers-* queries. | |
| PHASE 5: ARCHITECTURE AND SCALE | |||
| 13 | Custom Properties and Design Tokens | Declaration, resolution, fallbacks, theming, and token systems. | |
| 14 | CSS Architecture at Scale | Naming conventions, cascade layers, and file organization that survives growth. | |
| 15 | Modern CSS | Nesting, container queries, :has(), and shipping with fallbacks. | |
| PHASE 6: ECOSYSTEM | |||
| 16 | Bootstrap Essentials | What the framework gives you, what it costs, and how to theme it safely. | |
| 17 | Framework Comparison | Compare mechanisms, customization models, and exit costs before adopting. | |
| PHASE 7: PRACTICE AND REFERENCE | |||
| 18 | Lab Examples | Twenty commented demos with two links each: view the code or preview the page. | |
| 19 | Study Projects | Guided builds that combine several chapters at once. | |
| 20 | References | Official standards, validators, token systems, playgrounds, and free hosting. | |
Prep Quiz
Scan the QR code below with mobile or tablet, or click it from desktop to start the quiz. There is no time limit, but most learners finish in under 45 minutes.
Credits: Lesson content drafted with DeepSeek via Fireworks AI. References: free resources below.
Free References
For the full categorized table — specifications, validators, token systems, playgrounds, and accessibility tools — see the References page.
- MDN Web Docs: CSS — the day-to-day property and selector reference (free)
- Learn CSS (web.dev) — a structured second pass after this track (free)
- CSSWG Editor Drafts — the specifications as they are written (free)
- W3C CSS Validator — catch the typos a silent parser drops (free)
When you complete this roadmap, you should be able to style and publish a clean static website without relying on templates.