Flexbox Zombies: Review
August 4th 2020
Introduction
When I started to learn web development it seemed that flexbox was well established and well loved by the web dev community. I started to learn flexbox as one of the core parts of css. I found it to be like most things in css, easy to get started with but really hard to master.
Flexbox was my go-to tool for layouts in my projects but I found myself checking out a css-tricks article every time my flexbox started to get a big janky. While this article is great and I'm very thankful for it, it was a crutch of mine. I was leaning on it a lot!
One day I was listening to a podcast where the creator of flexbox zombies was a guest. Dave Geddes told a super similar story to mine, he was also leaning on this css-tricks guide to flexbox and that's why he created flexbox zombies.
Story
The story is told via a series of text slides. You as the main character are given a crossbow that has limited capabilities. You use this crossbow to kill zombies. With each new level of the game, you get more capabilities on your crossbow and learn more about how it works.
Gameplay
The crossbow is a mental model for how flexbox works. You can set the
'crossbow' to display:flex to turn it on and go from there. I found
this metaphor to be amazingly useful. It helps link the desired
outcome of your layout with a more tangible idea of using the crossbow
to kill zombies.
The game itself suggest that the player take a break of at least one day between lessons. I took this approach and completed all 12 chapters of the game in a few weeks. I found this to be a great touch, and apparently there is some good science backing up this approach to learning overall (use your googles to find those).
Conclusion
At the moment flexbox zombies is totally free to play. Therefore I recommend that everyone who is not a flexbox master at least check the game out. In the long run I figured I'll be saving myself lots of time and stress of trying to read through the same old docs to find information that i should know already.