Want to become Flexbox Ninja? Learn with Flexbox Froggy Game

Flexbox, new layout mode in CSS3 is a cool stuff. But applying flexbox to your workflow can be challenging because of its complicated specs.
But, now with Flexbox Froggy it’s very easy to learn all the basics of flexbox with a fun webgame involving frogs and lilypads. It sounds crazy, but its seriously an awesome webapp.
You start at level 1 and slowly work your way through 24 different levels teaching the many aspects of flexbox orientation. The early levels start easy by asking you to align one or two frogs along a single container along with tips and suggestions to help you along the way.
But once you get past lesson 10 things really heat up. You’ll need to learn how to re-organize items within a container, how to organize content vertically, and how to create equidistant spacing between different rows of different content.
The cute little frogs may lure you in, but rest assure this is a tough game.
However, from complete novices to more experienced web developers, the game is made for all levels. The early lessons are a breeze and the later lessons can leave you hunched over the screen with clumps of hair by your side.
The full game source code is available for free on GitHub so you can download and play it locally if you wish.
Plus the webapp is multilingual offering 20 languages.
I will admit that rearranging frogs will not immediately make you a master of flexbox. But these lessons are meant to get you familiar with the flexbox syntax so you can feel more comfortable working in real-world scenarios.
If you’re a web developer of any skill level you should definitely check out Flexbox Froggy. It’s completely free, quite fun to play and surprisingly educational.

Related Posts

%d bloggers like this: