CSS Certificate
Earn the CSS certificate by passing the exam and shipping a polished, responsive site.
CSS certificate outline
EXAMPLE
# CSS certificate - outline ## Part 1 - exam (60 min) Topics: - The cascade + specificity + inheritance - Box model + box-sizing - Display modes (block, inline, inline-block, flex, grid) - Flexbox + Grid layout - Responsive design (media queries, container queries, clamp) - Typography + colour + custom properties - Transitions + animations - Accessibility (focus-visible, prefers-reduced-motion, contrast) - Modern CSS (cascade layers, :has(), subgrid, nesting) Passing mark: 70 percent. ## Part 2 - capstone (take-home, ~8 hours) Ship a small marketing site: - Responsive: 1 col mobile, 2-3 cols tablet, 4 cols desktop - Dark mode via prefers-color-scheme or a class toggle - Custom properties for the design system - Accessible focus rings + skip link - Animations respect prefers-reduced-motion - Lighthouse 90+ across the board - Deployed publicly Submit a Git repo + live URL + a 90-second demo video. ## Grading - Responsive correctness (25 percent) - Accessibility (25 percent) - Modern CSS usage (clamp, container queries, :has) (20 percent) - Lighthouse score (15 percent) - Visual polish (15 percent) ## Tips - Use design tokens via custom properties from day one - Reach for clamp, min, max before media queries - Container queries beat media queries for component-level responsiveness ## What this certificate proves - You can author maintainable, modern CSS at scale - You understand the cascade well enough to debug it - You can ship accessible, fast pages
Why it matters
A CSS certificate is meaningful when the capstone is real. Treat it like a portfolio piece - build something a hiring manager would actually use, ship it where they can see it, and pair it with a clean demo video.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Certificate</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Where would you display the cert on a résumé?
Under the
section.
The category name speaks for itself.
Discussion
Loading…