Challenge 1 of 5

Challenge 1: Change 3 colours

Pick your own background, text, and accent colours — watch the whole page update.

0 of 5 complete 1/5 ✓ Completed

What you're building

Open the editor. In the visual panel on the right, change the background, text, and accent colours to something that reflects your taste.

This is the fastest way to feel how CSS custom properties work — they cascade through the whole page automatically.

How the editor knows you're done

You've changed at least one of the default colours — background #ffffff, text #0f172a, or accent #2563eb. The editor detects this and marks the challenge complete.

A starting point

This one's point-and-click — no typing required. Look at the right side of the editor for the visual panel. You'll see three colour swatches grouped under Theme (or similar wording).

Click any swatch to open a colour picker. Drag the picker around or paste in a hex code (like #ff6b6b for tomato red, #1e293b for slate, #fbbf24 for warm yellow). The preview on the left updates the moment you let go.

Try one swatch at a time so you can see exactly what each colour controls.

Open in editor → Back to all challenges →