Type a little CSS, see a lot of color
Every activity opens on its own page with goals, hints and a live preview. Nothing you type can break anything — press reset any time.
Choose an activity
9 activities to try — click a card to open it.
Color the Fox
Use color and background-color to bring the fox to life.
4 goals
Start activity →Selector Practice
Tags, classes and ids — three ways to point at a shape.
3 goals
Start activity →Night Sky
Gradients, borders and border-radius make planets and stars.
3 goals
Start activity →Build the Zoo Sign
HTML tags are the building blocks — add the missing ones.
3 goals
Start activity →Panda Patches
One class can style many shapes, and one shape can wear many classes.
3 goals
Start activity →Two Classes, One Tree
Stack class names like .tree.pine to pick out just one kind.
3 goals
Start activity →Parrot Color Ways
Four ways to write a color: names, hex, rgb and hsl.
4 goals
Start activity →Nest Family Tree
Parents and children: .nest .egg only colors eggs inside the nest.
3 goals
Start activity →One Special Penguin
An id belongs to exactly one element — perfect for the star of the show.
3 goals
Start activity →