CSS Study Projects

Guided projects that combine several chapters at once — larger than the lab examples, still hand-written CSS. Each project lists the lessons it exercises and the requirements it must satisfy before you call it done.

Project 1: A design-token system

Lessons: Custom Properties, Values, Architecture. A tokens.css with primitive and semantic layers, consumed by three components you restyle twice without touching them.

Requirements: primitives never used directly by components; a dark theme via prefers-color-scheme plus a manual data-theme override; one token typed with @property; the re-theming captured in screenshots.

Project 2: A product landing page

Lessons: Box Model, Typography, Flexbox. Hero, feature row, and pricing cards from a given palette.

Requirements: spacing exclusively from a five-step token scale; body text 1rem with unitless leading and a 70ch measure; equal-height pricing cards with footers aligned by an auto margin; no fixed pixel widths anywhere.

Project 3: A dashboard shell

Lessons: Display/Positioning, Grid. A sticky header, fixed-width sidebar, and card wall.

Requirements: grid-template-areas shell with a mobile rearrangement that edits only the strings; sticky header and sidebar that survive a stacking-context audit; the card wall built with auto-fit and no media queries; no horizontal scrollbar at 320px.

Project 4: A documentation page

Lessons: Typography, Accessibility, Animations. Long-form text with a sticky table of contents and code blocks.

Requirements: visible :focus-visible indicators throughout; text contrast measured at AA; a reduced-motion-safe reveal for the table of contents; the page fully usable at 200% zoom.

Lessons: Grid, Modern CSS, Cascade. Six cards whose internal layout changes with the slot they land in.

Requirements: container queries, not viewport media queries, drive each card's layout; captions overlap images via grid-area; a light/dark switch driven entirely by token redefinition; fallbacks declared first for every modern feature used.

Project 6: A print-ready article

Lessons: Responsive Design, Accessibility. The same article styled for screen and paper.

Requirements: @media print removes navigation and expands links to show their destination; page breaks never split a figure from its caption; colors are replaced where they would waste ink; the printed result is checked in the browser's print preview.

How to work. Write every rule by hand, keep the token file separate, validate with the W3C CSS validator, and audit with the checklist in the Accessible Styling lesson before calling a project done. Compare scale with the lab examples — same rules, bigger builds.