CSS
Languages and web fundamentals · 4 stages · 28 units in the full series · 28 published in English
Series goal
Explain style conflicts and layout constraints using calculated values, and verify responsive behavior, accessibility, and rendering cost together.
Prerequisites
HTML structure
Practice approach and scope
Learning units are not calendar days. Read the explanation and tasks, check the completion criteria, then move on. Use each example as a starting point: change variables and observe the results. Built-in examples and tasks requiring a separate environment are identified separately. Opening an example does not complete a unit.
Existing unit IDs and notes are preserved. The original 01, 02, and 03 examples occupy positions 1, 14, and 28 in the expanded sequence, so the number in the address may differ from the learning order.
Only published English units are linked below. The full series has 28 units.
Learning path
Stage 1 · Cascade and size calculations
- 01. Cascade and Layout — Editable example
- 02. Selectors and Specificity — Editable example
- 03. Inheritance and Resetting — Editable example
- 04. The box model and measured dimensions — Editable example
- 05. Units and Fluid Font Sizes — Editable example
- 06. Normal Flow and Margin Collapsing — Editable example
- 07. Size Constraints and overflow — Editable example
Stage 2 · Flex, Grid, and responsive layout
- 08. Flex Axes and Alignment — Editable example
- 09. Flex Growth and Shrinkage — Editable example
- 10. Grid Tracks and Gaps — Editable example
- 11. Automatic Repetition and Card Counts — Editable example
- 12. Layout Areas and Source Order — Editable example
- 13. Media Queries and Breakpoints — Editable example
- 14. Responsive Layout and Motion — Editable example
Stage 3 · State, positioning, and accessibility
- 15. Container Queries and Reuse — Editable example
- 16. Logical Properties and Writing Direction — Editable example
- 17. Typography and Line Length — Editable example
- 18. Color and Contrast — Editable example
- 19. Focus and Input States — Editable example
- 20. Positioning and Containing Blocks — Editable example
- 21. Stacking Contexts and Overlap — Editable example
Stage 4 · Motion, tokens, and rendering verification
- 22. Transitions and Intermediate States — Editable example
- 23. Keyframes and Playback Control — Editable example
- 24. Organizing Rules with Cascade Layers — Editable example
- 25. Custom Properties and Themes — Editable example
- 26. Observing Layout and Paint — Editable example
- 27. contain and Offscreen Content — Editable example
- 28. Tokens and Rendering Observations — Editable example
Capstone project and deliverables
A responsive learning-card theme and a record comparing width and transform performance under the same conditions
Keep the implementation, run instructions, baseline and changed conditions, failure cases, and recovery steps together. Do not report unmeasured performance or tests you have not run as results.