Final CSS review

The course page is done. Before you call it finished, let’s review it the way I review my own projects: not by admiring the desktop screenshot, but by trying to break it.

Go through this list with the page open next to DevTools.

The checklist

• selectors are short and reusable, mostly single classes
• the cascade works without escalating specificity, no !important, no #id .class .class chains
• widths have sensible minimums and maximums, with min(), max-width, or minmax()
• source order still makes sense when you read the HTML top to bottom
• focus indicators are visible on every link and button
• text has enough contrast and lines stay between roughly 45 and 75 characters
• content wraps instead of clipping, including long URLs
• layout survives 200% zoom, a long site name, and a 320px window
• motion respects prefers-reduced-motion

Each item comes from a lesson in this course. If one fails, you know where to go back to.

Clean up

Projects accumulate rules that no longer do anything. Search the stylesheet for each class name and delete the ones the HTML no longer uses.

Then group what’s left by component: header rules together, card rules together, hero rules together. Shared values like spacing and colors belong in custom properties on :root:

:root {
  --space: 1rem;
  --accent: #2457d6;
  --border: 1px solid currentColor;
}

When the accent changes next month, you change one line.

The one-element test

My favorite way to check whether I understand a stylesheet. Pick one element, say a link inside a card, and explain where each of these came from:

• its color
• its font family and size
• its width
• the space around it
• its position on the page

For each one, find the declaration in DevTools and say why it won. “The color is #2457d6 because .card a sets it, and that beats the #222 inherited from body.” “The width is 14rem because it’s a grid item in a minmax(0, 1fr) track and the grid is 46rem wide with two gaps.”

If you can do that for one element, you can debug any element later. If you get stuck on one of the five, you’ve found the lesson to revisit.

What’s next

You now know how the cascade picks a value, how boxes get their size, how Flexbox and Grid arrange them, how a page responds to space and preferences, and how to find the cause when something breaks. Everything else in CSS builds on those.

The three quizzes below pull questions from the whole course. Take them without looking back at the lessons first.

Quick check

Start quiz

Result

You got of right.

Try again

Quick check

Start quiz

Result

You got of right.

Try again

Quick check

Start quiz

Result

You got of right.

Try again