Core challenges

Do them in order the first time.

Pick a background, text, and accent colour that look good together. The whole page updates as you change each one.

Drop a <button> into the code, give it your own text, and style it so it feels clickable.

Build a rounded, padded container with a subtle shadow — the visual building block of most modern pages.

Make something change when the cursor lands on it. Your first taste of CSS pseudo-classes — and why animations feel alive.

Add one media query and watch your layout adapt to phones and tablets. Congratulations — that's a real web page.

Bonus challenges

Once the five are done, these are longer, capstone-style projects — open each one in the editor.