Flexbox Froggy: frogs teach CSS
A game where you guide frogs onto lily pads by writing CSS flexbox properties. Before you know it, layout makes sense.
What it is
Flexbox Froggy is a browser game for learning CSS flexbox. On each level you help frogs reach the lily pads of their own color by writing the right CSS properties. It was made by Codepip, a studio that builds games for learning web development.
Why we picked it
Flexbox is one of those things that makes more sense in your hands than in the docs. Every level is a tiny puzzle built around a property like justify-content, align-items, flex-direction, order or flex-wrap. You type a line of code and instantly see where the frogs jump. Get it wrong and they sit in the wrong spot; fix it and they settle onto their pads. That instant feedback beats any cheat sheet.
It is not just for total beginners either. You can pick a difficulty: Beginner, Intermediate with no directions, or Expert with no directions and random levels. There is a colorblind mode, and the game is translated into dozens of languages. If you are looking for a fun way to learn flexbox quickly, this is probably the most pleasant one out there.
Where to start
- Play the levels in order; each one adds a single new idea.
- When you get stuck, read the property hints in the level description.
- Once you finish, replay on Expert to test yourself without any hints.
- Turn on colorblind mode in settings if the lily pad colors are hard to tell apart.
- Move on to Grid Garden by the same makers to learn CSS Grid the same way.
Who it's for
Beginner web developers, designers who want to understand the code behind layouts, and anyone who still searches for how to center a div.
Quick answers
Is Flexbox Froggy free? Yes, it runs in your browser and is free to play.
What should I play after Flexbox Froggy? The makers suggest Grid Garden for CSS Grid, plus Anchoreum.
Does it have difficulty levels? Yes: Beginner, Intermediate and Expert, with fewer hints at each step up.
