CSS Challenges
Challenges are longer, end-to-end exercises. No fill-in blanks — you build something small from scratch.
Suggested first ten
| Challenge | Topics covered |
|---|---|
| Style a button (default, hover, focus, disabled) | buttons, pseudo-class |
| Build a 3-card responsive grid | grid, RWD |
| Make a sticky top navbar | navigation-bar, position |
| Centre a modal with a backdrop | align, opacity |
| Build a card-flip animation | 3D transforms, transitions |
| Dark-mode toggle with CSS variables | variables, media queries |
| Build a single-page Holy Grail layout | website-layout |
| Recreate a Figma-style design token system | variables, specificity |
| Animated loading spinner | animations, transforms |
| Style a complete contact form | forms, attribute selectors |
Tip: When you finish a challenge, save the snippet to a personal repo. Six months in you'll have a small design system of your own.
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 Challenges</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
A great challenge for practising hover states is styling a…
Answer:
The most common interactive HTML element.
Discussion
Loading…