I’ve created a game for learning CSS flexbox called Flexbox Froggy. The goal of the game is to help the frogs get to their lilypads by writing CSS code. See if you can beat all the levels!
Flexbox Froggy takes inspiration from the classic arcade game Frogger, and web literacy games like the brilliant CSS Diner and Erase All Kittens, where you learn about CSS selectors and HTML markup respectively.
I chose CSS flexbox in part because its layout properties make for good gameplay mechanics. The game levels are similar to the “positioning zombies” activity that featured in my work with Mozilla Thimble tutorials, but using the powerful new flexbox model instead of absolute positioning.
Flexbox is also a good topic because beginners can learn this improved way of positioning right out of the gate, while many experienced web developers who aren’t familiar with it yet can finally get on with it. It’s something I myself have been meaning to learn for awhile now. There are topnotch tutorials out there for this purpose like those by CSS Tricks, Codrops, and Scotch.io, but few interactive learning experiences.
If you spot any bugs or have ideas for new levels, please open an issue on GitHub.