Flexbox Froggy – Learning CSS Layout

Flexbox Froggy is a game for learning CSS flexbox.
The goal of the game is to help the frogs get to their lilypads by writing CSS code. There are 24 levels. Can you beat all the levels?  You want to try?
This is interesting and funny way of learning flexbox.

Flexbox is also a good topic because beginners can learn this improved way of positioning right out of the gate, while many experienced web developers who aren’t familiar with it yet can finally get on with it.

Flexbox Froggy takes inspiration from the classic arcade game Frogger, and web literacy games like the brilliant CSS Diner and Erase All Kittens, where you learn about CSS selectors and HTML markup respectively.

There is also a version with no Hints for more challenge.
If you want hints, just select a language at the bottom of page. Flexbox Froggy supports
more than 30 languages…

Share with your friends