Color Coded

Role

Creator, designer, and engineer

Built with

React, TypeScript, Tailwind CSS, Lovable

Live

colorcoded.fun ↗

Color Coded is a children's coloring book series that teaches HTML and CSS through color. Each page pairs an illustration with a small block of real CSS: kids read the rule, find the color it declares, and fill in the matching shape. Book 1: Animals ships with 10 challenges and 10 lessons, with Space, Transportation, and Countries next in the series.

The problem

Most “kids learn to code” products start with a screen. My own kids don't need more screen time, and the abstractions in block-based editors don't map onto the code they'd eventually write.

CSS, though, is unusually kid-friendly: it's declarative, it's readable out loud, and half of it is literally about color. That felt like the smallest possible on-ramp to real syntax — no keyboard required.

The idea

Every spread has a coloring page and a code card. The code card contains a real CSS rule — selector, property, value — and the child's job is to decode it and color the matching part of the illustration.

The lessons build: single color declarations first, then multiple selectors, then classes and grouping. By the end of a book a child has read forty-plus valid CSS rules without ever being told they're studying.

Designing for two audiences

The book has to work for a five-year-old holding a crayon and for the adult sitting next to them. Illustrations are bold and low-detail so cheap markers still look good; code cards use a monospace face with generous tracking so the syntax reads as its own visual language.

The website mirrors that split: playful crayon palette and rounded display type up front, with a clear parents-and-educators explanation of what each book actually teaches.

Building the site

I built and shipped colorcoded.fun with Lovable — React, TypeScript, and Tailwind — as a marketing and sales surface for the series: book previews, sample pages, the lesson breakdown, and the roadmap for upcoming titles.

Keeping the whole thing in one codebase meant I could iterate on the story and the storefront in the same afternoon, which mattered a lot for a side project with a toddler-sized time budget.