★All content is automatically translated.

I made a game for learning CSS flexbox called Flexbox Froggy. The goal of the game is to help the frog reach the lily pad by writing CSS code. See if you can beat all the levels!

Flexbox Froggy is inspired by the classic arcade game Frogger and web literacy games like the great CSS Diner and Erase All Kittens where you can 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 level is similar to the "Zombie Positioning" activity that appeared in the Mozilla Thimble tutorial work, but uses a powerful new flexbox model instead of absolute positioning.

Flexbox is a good topic because even beginners can learn these improved positioning methods right away, but many experienced web developers who are not yet familiar with it can finally use it. It meant that I myself wanted to learn for a while. There are best tutorials for this purpose, such as CSS Tricks, Codrops, and Scotch.io, but few have interactive learning experiences.