If, like me, you’ve known about CSS flexbox for a long time but don’t really know it, I have something that might help. It’s not the solution — I just finished it and I don’t feel like a flexbox-master — but it is REALLY REALLY good as a learning tool. I now would consider reaching for flexbox when before I wouldn’t have thought to.
Flexbox, for those who don’t know, is a solution to a lot of annoying CSS problems. It’s not without it’s own rough edges. Mainly that you have to think a little harder about the difference between up and down and left and right. But getting past that unlocks a whole lot of awesome power.
Now to what we’re here for: Flexbox Froggy is a little 24-level game that leads you through the basics of flexbox by placing frogs on lily pads. It sounds simple enough, and is. Well, until the last level. Which is pretty hard and I nearly cheated to find the solution. But I didn’t and I eventually got it working right. But it’s a great primer on working with flexbox, and probably a fun and pretty-looking little skill test if you are already a master.