[web dev] – Learning to use CSS Flexbox with Flexbox Froggy

If you have ever encountered difficulty learning Flexbox in CSS, here is an excellent solution: flexbox froggy. This website allows their learners to master flexbox by playing a simple game: placing the frogs on the proper lilypads in a pond.

In each level, you will learn different properties of flexbox, for example. In level one, it instructs you to use justify-content: flex-end; to move the frog to the right hand side of the pond.

Level one

As the game levels up, the users will be far more getting familiar with the properties such as align-items, flex-direction… Anytime you find yourself forgetting the possible values for a property, you don’t necessarily go back to the previous level but hover over the property name to view them. (How easy it is!!!!)

Hovering to get value reminder

You will then learn how to combine other properties to place more and more frogs on their appropriate lilypads.

Combination of properties

After 24 levels, you will likely be pretty much confident with CSS flexbox.

Hope you will have relaxing time learning and playing with Flexbox Froggy.


Leave a Reply

Your email address will not be published. Required fields are marked *