</>Color CodedGet Book 1

Color by code

Nothing to install, nothing to plug in. The code is on the paper and the answer is in the crayon box.

owl.css
h1 {
color: blue;
}
.star {
color: yellow;
}
.owl-body {
color: brown;
}
.leaves {
color: green;
}
.sky {
color: light blue;
}

A page in three moves

  1. 1

    Read one rule at a time — they're short on purpose.

  2. 2

    Find the matching label printed inside the drawing.

  3. 3

    Color that shape with the value's color, then tick the rule off.

What kids actually learn

Selectors are names

A selector like .leaves is just a label for a part of the picture. Find the label on the page, and you've found what the rule is about.

Properties are questions

color asks 'what color is the ink?' and background-color asks 'what color is behind it?'. Two questions, two crayons.

Values are answers

green, light blue, #ffcc00 — the value is the crayon. Kids learn color names and hex codes side by side.

Structure is HTML

Each drawing comes with a mini HTML outline so children see how tags nest, and which tag their class belongs to.

Ready to color?

Book 1: Animals has 10 challenges that go from a single color rule to a full scene.

See the books