What it is like
Flexbox Froggy teaches a piece of real web design, CSS flexbox, by turning it into a puzzle. Each level shows a pond, some frogs and their lily pads; you type a line or two of layout code and watch the frogs hop into place. Get it right and the next level adds a new idea.
It is one of the gentlest introductions to coding we know, and satisfying even if you never plan to build a website. The levels are short, the feedback is instant and the frogs are excellent company. People who already write CSS will race through it; everyone else will learn something useful.
Your first go
Read each level’s short explanation before typing; it tells you the one property you need. If you are stuck, try the values listed on the left one at a time.
A good place to stop
There are twenty-four levels, and the end of the set is a natural place to stop. Doing it in two short sittings works well.
Before you click
The site carries adverts and links to its maker’s other learning games.
Quordle
Murdle
Euclidea