Start learning

Pick a path, read the first lesson, and try its example. Change one thing at a time and explain what changed before moving on.

1. HTML foundations and semantics

   Begin with the document, its metadata, and its content. Give the page a main heading, group content with main and section, then distinguish importance from stress emphasis.

   Exercise: mark up a short article with a title, two sections, a list, and one useful link.

2. Forms and accessible controls

   Connect a label to an input. Learn button types, group controls with fieldset and legend, then add select and textarea.

   Exercise: complete the form using only Tab, Shift+Tab, Enter, and Space. Inspect each control's accessible name.

3. Cascade, inheritance, and selectors

   Work through the cascade and specificity, then distinguish a child combinator from a descendant relationship. Use :has() when a component's style depends on a descendant.

   Exercise: make two declarations compete, predict the winner, then confirm it in developer tools.

4. Box model, sizing, and spacing

   Start with box-sizing. Compare padding with margin, then combine width, max-width, and aspect-ratio.

   Exercise: make a card fit its parent without calculating away its border and padding.

5. Flexbox and Grid

   Compare Flexbox and Grid, then learn flex sizing and grid columns. Add gap. Compare item alignment with track alignment.

   Exercise: build a card grid with a flex row of actions inside each card.

6. Responsive design

   Use flexible grids, media queries, and container queries. Let maximum width bound readable text and use picture when the image source needs to change.

   Exercise: test a narrow viewport, long labels, and 200% zoom. Check that the whole page never needs horizontal scrolling.

7. Typography and color

   Choose a font stack, set a readable line height, and understand web-font loading. Use color and background-color with sufficient contrast.

   Exercise: compare fallback and downloaded fonts under a slow connection, and check link and focus-state contrast.

8. Positioning, overflow, and stacking

   Understand position and containing blocks before applying inset. Explore overflow, stacking contexts, and usable scroll areas.

   Exercise: explain why increasing a child's z-index cannot always put it above another component.

9. Motion and reduced-motion preferences

   Start with transitions, then use keyframe animation when a sequence is needed. Learn reduced-motion alternatives and test the result with the preference enabled.

   Exercise: make feedback understandable when animation is removed.

All CSS references · All HTML elements