Teach yourself CSS Flexbox with the Flexbox Froggy Game
In the past we’ve glossed over flexbox and the basics of how it works. But actually applying flexbox to your workflow can be challenging because it’s such a complicated addition to the CSS spec.
Read Also: 6 Ways to Align Content Vertically with CSS
With Flexbox Froggy you can learn all the basics of flexbox with a fun webgame involving frogs and lilypads. I know it sounds crazy but this is 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. Early lessons also include 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 including English, French, German, Italian, Chinese, Japanese, and Russian(plus many others).
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.