fbpx

Flexbox: Frogs to Zombies – Learning the Next Level (Literally)

What I am taking about in this blog – “How Frogs transformed into Zombies ? – The jumping dead”. Not really. Its about how people have used their creative juices to create some mind blowing ways to teach others. In this case, learning flexbox.

A while back, I started working on a react native project. In fact, it was the first project in React Native for our company and I was responsible for the research and getting it off the ground. After comparing various other mobile development frameworks like Ionic and Xamarin, our team voted to go for React Native (so far it has proven to be a good decision – well done team). When I started to work on the UI, I would come across JSX styles with flex everywhere. I had no previous experience in working with flex.

Suddenly, I was seeking Google’s assistance and reading through a bunch of websites describing with codes and diagrams – boxes and arrows. They weren’t bad, but I would quickly forget most of it. So whenever I had to use flex, I would always have to refer back to the documentation and examples. Until one day I came across FlexboxFroggy which changed everything. Now learning was more fun-and-games than just going through the examples. Plus, I could now visually see what my code actually did.

Learning Flexbox Through Gamification

Flexbox Froggy code window               Flexbox Froggy game area

The whole thing is divided into levels where the aim is to place the right coloured frogs on their matching lillypad by using correct flex layout in CSS. Each level would be based on one or more particular flexbox properties which would increase in complexity with increasing levels. I completed all 24 levels in one sitting (sweet). Thanks to this, I now have a far better understanding of flexbox and I don’t have to go back to the docs every time.

Flexbox Zombies

And few days back, it got even better. Someone in Twitter posted a link to a new thing: FlexboxZombies. This takes the learning experience to a whole new level. They managed to put in a whole story line and the graphics are awesome. My kids would be glad to play this (Oops – forgot that I don’t have kids. 😉 – I was happy to play). It must have taken a lot of effort, creativity and time to put such a beautiful learning resource together. We should all appreciate the work put in by its creator, Dave Geddes. Follow him on Twitter @geddski.

 

Leave a Reply