Capstone: finish the responsive learning site

Integrate type, color, box model, Flex, Grid, states, and responsive rules into a reviewable site.

What you will build

Integrate type, color, box model, Flex, Grid, states, and responsive rules into a reviewable site.

Understand the idea first

Assess task completion rather than flashy effects.

Build it step by step

css/
├─ tokens.css   /* colors, type, spacing */
├─ base.css     /* reset and elements */
├─ components.css
└─ layout.css   /* flex, grid, media queries */

Remove duplicate and dead rules, then organize files by responsibility.
Check visual consistency across all three pages.
Test focus, 200% zoom, three widths, and color contrast.
Find and fix one unused rule and one accidental override.

Read the important lines

Assess task completion rather than flashy effects.
Component classes describe reusable patterns.
CSS must preserve semantics and keyboard order.

Common mistakes and what to check

Symptom	What to check
More rules make it less stable	Trace computed values and remove conflicts.
Fixed heights everywhere	Use content-driven height and internal alignment.

Practice without copying

Write a ten-item acceptance record with viewport evidence, focus, contrast, zoom, and one fixed cascade bug.

Check the answer after you try

Pass when every page works without unwanted scrolling, clipping, missing focus, or low contrast.

Completion check

I produced the required visible result
I can explain the input, processing, and output
I tested normal, edge, and failure cases