In the first three weeks of my programming course we’ve focused a lot on the basics of HTML and CSS. In this context we also took a first stab at CSS layouts with Floats.

Now today CSS Floats are not exactly state of the art anymore. When you look for alternatives, Flexbox and CSS Grid are the two most prominent contenders.
According to caniuse.com, both Flexbox and CSS Grid are available in all major browsers today. I haven’t had a close look at Grid yet, but used Flexbox quite a lot in previous projects.

The first time I heard about Flexbox and wanted to use it, I read the CSS Tricks article. I somewhat understood the basics of it, but I was far from completely understanding it.

What really helped though was this game: http://flexboxfroggy.com/

The gist of the game is to help a frog reach a lilypad by using Flexbox styles. The game has 24 levels, walking you through the foundational styles up to the more advanced ones.

When you want to learn Flexbox, give it a try!