You started this track making text a different color. Today you build a real design system for a real page.
Before we build anything, let's look back for a second.
At the start of this track, your first CSS rule was h1 { color: #2f6f8f; }, and seeing that heading turn blue felt like a small magic trick. Remember? Selector, curly braces, property, value, semicolon. You'd probably never heard the word "specificity."
Look at what you can do now. You know why one rule beats another, and how to find the winner when a style refuses to apply. You see every element as a framed picture, with matting, a frame, and wall space around it. You pick units that respect readers who need bigger text. You set type that's comfortable to read. You can line things up along a wall with flexbox, lay out a whole floor plan with grid, and write a card grid that rearranges itself for any screen in a single line. Your pages dress for the weather, glide instead of snap, keep a visible cursor for keyboard users, and switch to dark mode by re-mixing a few paint tins.
And there were surely moments along the way where a layout just would not cooperate. A badge flew off to the corner of the page. A z-index of 9999 did nothing. A heading refused to change color. You worked through those, and every one taught you something about how CSS actually thinks.
That's the jump from "CSS makes text a different color" to real layout systems. I'm proud of you. Let's make something beautiful.
The project
At the end of the HTML track, you built a personal profile page in Final Project: Your Profile Page. Solid structure, meaningful elements, accessible forms, and probably still in plain black Times New Roman.
Now you'll style it, completely.
This workspace has two files, index.html and style.css. The index.html tab starts with a sample profile page built to the HTML final project's requirements. Paste your own page into it if you have it (that's the best option), or use the sample. You're welcome to add class attributes to the HTML as you style, but keep the structure and meaning intact.
Below are the requirements, numbered like quiz questions. Each one says what to build and why it matters. A checker reads your CSS every time the page runs, and ticks off the requirements it can detect in the Checks tab.
Requirements
1. Design tokens in :root
Start your CSS with a :root block defining at least three custom properties: a brand color, a text color, and a spacing value (for example --color-brand, --color-text, --space-md). Use them throughout the rest of your stylesheet with var().
Why: When every color and gap comes from a handful of labeled tins, changing your look later means editing one line, not twenty. It's also what makes the dark mode stretch goal below almost free. Review: CSS Variables.
2. A box-sizing reset
Add the border-box reset for all elements and their ::before and ::after.
Why: It makes width mean the whole framed picture, so padding never breaks your layout math. Review: The Box Model.
3. Typography with a proper font stack
On body, set a font-family stack that ends with a generic family, a base font-size in rem, and a unitless line-height between 1.5 and 1.7. Give your headings a contrasting style: a different font, weight, or size.
Why: Most of your page is text. A good stack, a readable size that respects reader settings, and generous line spacing do more for how professional it looks than anything else. Review: Typography and Units.
4. A comfortable content width
Keep your main content from stretching across giant screens: a centered container with a max-width (the min() container recipe works well), and paragraphs no wider than about 65ch.
Why: Lines that are too long are hard to read, because your eyes lose their place. Review: Common Layout Patterns.
5. Readable colors
Choose text and background colors with a contrast ratio of at least 4.5 to 1 for body text. Check them in your browser's developer tools or with a contrast checker.
Why: A beautiful page nobody can read isn't beautiful. Review: Colors.
6. A flexbox header
Lay out your <header> with flexbox: your name on one side, your nav on the other, vertically centered, with the nav links in a row with a gap.
Why: This is the most common flexbox pattern on the web, and your nav list becomes a real menu bar without changing its HTML meaning. Review: Flexbox in Practice.
7. A grid (or flexbox) layout for your content
Use grid or flexbox for at least one content area: your interests list as a set of cards, your articles in a responsive card grid (repeat(auto-fit, minmax(...))), or your About section with the photo beside the text.
Why: Real pages arrange content in rows and columns, not one long stack. This is where your page starts to look designed. Review: CSS Grid in Practice.
8. A responsive, polished image
Give your image max-width: 100% and height: auto so it never overflows its container, plus some polish, like border-radius (a circle for a profile photo?) or a soft box-shadow.
Why: Images that burst out of their containers are the most common mobile layout bug. Review: Backgrounds, Borders, and Shadows.
9. A styled form with visible focus
Style your contact form: labels on their own lines, inputs that fill the available width with comfortable padding, a styled submit button, and a clearly visible :focus-visible style on every input and button.
Why: A form is a conversation, and keyboard users need to see where they are in it. Never remove focus without replacing it. Review: Hover, Focus, and Interactive States.
10. At least one hover effect with a transition
Give your links, buttons, or cards a :hover state (and the same effect on :focus-visible), and make the change glide with a transition on transform, opacity, or a color.
Why: Feedback tells visitors the page heard them, and a short transition makes it feel smooth instead of mechanical. Review: Transitions and Animations.
11. A mobile-first responsive breakpoint
Write your base styles for small screens (a single column), then add at least one min-width media query that changes the layout for wider screens: a two-column About section, more cards per row, or a roomier header.
Why: Most visitors are on phones. Mobile-first keeps your base styles simple and adds layers only when there's room. Review: Responsive Design and Media Queries.
12. Respect reduced motion
Add a prefers-reduced-motion: reduce media query that turns off or shortens your transitions and animations.
Why: For some visitors, motion causes real physical discomfort. Honoring their setting takes a few lines.
13. Clean, organized CSS
Organize your stylesheet from general to specific (tokens, base, layout, components), name any new classes by purpose, keep selectors short and flat, use no !important outside the reduced-motion block, and run your CSS through the W3C CSS validator.
Why: Future-you has to maintain this. Keep it a closet, not a junk drawer. Review: Best Practices and Common Mistakes.
14. A skip link that waits for the keyboard
Give the skip link at the top of the page a class, and style it so it stays hidden until someone presses Tab, using the skip-link pattern from Display.
Why: A skip link is for keyboard users; everyone else shouldn't have to look at it. And because the pattern keeps it position: absolute, it never takes up a row in a grid page layout like the one in Common Layout Patterns.
Stretch goals (optional, for the ambitious)
- Add a dark theme by re-mixing your variables inside
@media (prefers-color-scheme: dark). - Make your header
position: stickywith a background and a subtle shadow. - Use a Google Font for your headings, with
display=swapand a sensible fallback stack. - Add a gentle
@keyframesfade-in for the main content on page load (and make sure requirement 12 covers it). - Use
clamp()so your main heading scales smoothly with the screen.
Using this workspace
The tabs on the left switch between these instructions, index.html, and style.css. The Result tab on the right shows your page a moment after you stop typing (or when you press Run), and the Checks tab ticks off what the checker can detect. For the responsive requirements, drag the line between the two sides to make the Result narrower or wider, and watch your media queries respond. On a phone, the Code and Result buttons in the toolbar switch between them. Reset puts the starter code back; press it twice, so a stray click can't wipe your work.
The checker can only see whether each technique is present. It can't tell whether your colors are readable, whether your layout looks balanced, or whether your stylesheet is organized. That judgment is yours, which is what the self-check below is for.
Self-check
This is a design project, so there's no score. Read each question and answer it honestly, yes or no, about your own page. Every "no" is just a pointer to your next improvement.
- Does my layout hold together if I shrink the browser window all the way down to phone width, and stretch it back out?
- Did I use
rem(orem) instead of hardcoded pixels for text and spacing, where it matters? - If I set my browser's default text size larger, does my page still look right, with nothing overlapping or cut off?
- Can I Tab through every link, input, and button and always see clearly where I am?
- Is every piece of text comfortable to read, with enough contrast against its background?
- Does every hover effect also work for keyboard focus, and does nothing important depend on hover alone?
- If I changed my brand color in
:root, would the whole page update from that one line? - Are my selectors short and flat, with no
!importantoutside the reduced-motion block? - Would another developer be able to find the styles for my header, my cards, or my form in under a minute?
- When I look at my page, does it feel like mine?
If you answered yes to all ten, you've built something you can proudly show anyone: a future employer, a client, your family. If a few came back "no," that's completely normal. Go back and fix them. The second pass is where good developers become great ones.
Where you go from here
Your page is structured, meaningful, accessible, and now genuinely good-looking. It adapts to any screen, responds to every hover and keypress, and respects the people using it.
There's just one thing it can't do yet: think. It can't remember a visitor's theme choice, validate a form with a friendly custom message, or load new content without refreshing the page. That's the electrician's job. See you in the JavaScript track, where your page comes alive.