Flexbox Froggy is a 24-level CSS exercise disguised as a small puzzle game. Each level asks you to align frogs with lily pads using properties such as justify-content, align-items, flex-direction and order, with the result visible immediately.
Learn one property at a time
The first puzzles isolate a single flexbox property and show the acceptable values beside the editor. Enter a declaration, watch the frog move and use the mismatch between frog and lily pad as immediate feedback.
Notice the container
The game is especially good at reinforcing that flexbox rules usually describe the relationship between a container and its children. Later stages combine direction, alignment and ordering so that a rule learned in isolation has to work as part of a layout.
Carry the lesson into real CSS
After finishing a group of levels, recreate one of the arrangements in a blank HTML page. The game builds recall quickly, but using the same properties with real content is what turns the puzzle solution into a dependable layout skill.
Things to know
- The site includes advertising and a consent interface in some regions.
- It teaches flexbox rather than broader CSS layout and accessibility concerns.
- Completing a puzzle does not explain every browser or content edge case.