I first learned about Flexbox Froggy quite a while ago – it’s a wonderful resource for both learning what flex can do and as a resource for remembering a specific flex property. Sure, a site like CSS-Tricks has a great flexbox article which I refer to just about every time I work with flex, but sometimes you just need to put some frogs on lilypads. I saw it in my bookmarks earlier today and ran through some of the exercises again. #24 is still pretty intense for how it works – and works without class-specific order rules, which is incredibly impressive in my book.

I’m a big fan of flex – as far as I’m concerned it’s a developer efficiency increase like functional programming. Instead of manually defining floats (and let’s be honest: breaking, then redefining, then redefining again, then throwing clearfixes at it, then re-re-re-re-redefining…) just tell flex to solve it for you. That can be powerful – it is powerful – but that’s not to say never use float – sometimes you need to, and that’s fine. Sometimes you have to write for loops; it’s all about having as many options available as you can. What’s essential is understanding what flex is doing when you tell it to solve your layout problems, or else you’ll be stuck in flex hell much like float hell, and that’s why I love Flexbox Froggy so much: It provides immediate feedback on what you’re doing and builds you up to a pretty good starter level of flex knowledge in 24 fairly quick exercises.

Plus, cute frogs. Who doesn’t like those?