Project: Responsive Portfolio

Everything from this module converges on one page: your portfolio. You are styling the profile page from Module 2 — or a fresh equivalent structure; the tests only check the CSS and the page's structure hooks.

The brief

1. Foundation: universal box-sizing: border-box; a font-family stack on body; line-height ≥ 1.5.
2. Theme: --brand, --accent, and --space custom properties on :root, used by at least three rules.
3. Layout: the page uses flex or grid for its main structure — a nav that is flex; sections that sit in a grid (or stack single-column on mobile via grid).
4. Responsive: mobile-first — base rules for phones, @media (min-width: 640px) enhancing the layout for larger screens.
5. Polish: border-radius on cards; padding that shows the box model is under control; links keep affordance; focus styles present.
6. Motion: a transition on at least one interactive element, plus a prefers-reduced-motion block.

Why these requirements

Each one maps to a lesson you completed. A real client brief reads exactly like this — verifiable outcomes, not vibes. Work through the list top to bottom, run the tests, and read every failure as a pointer back to its lesson.

What good looks like

Not "matches a screenshot" — the design is yours. Good means: resize the window from phone to desktop and nothing breaks, overlaps, or overflows; every interactive element responds to keyboard; the palette is consistent because it comes from variables.

Next module: JavaScript Foundations — the page starts to do things.