Flexbox Froggy teaches CSS flexbox by having you move frogs onto lily pads. Each level shows a pond; you write a line of real CSS, such as justify-content, and the frogs shift. Get it right and you advance.
The levels start easy and get trickier, and the code you type is genuine, so the lessons transfer to real work. It is a good first step for anyone starting web design, and a fun refresher for those who have always looked up the properties.
The game is from Codepip. It takes about five minutes to start and works on phones, although typing code is easier on a keyboard. Its sibling /site/grid-garden covers CSS grid, and more games are at /category/games. Plan on about 5 min.
Tips for getting the most out of it
- Read the instruction, then type the one property.
- Use a keyboard.
- Try Grid Garden next.
Questions about Flexbox Froggy
What is Flexbox Froggy?
Flexbox Froggy is a game that teaches CSS flexbox by letting you position frogs on lily pads using real code. Plan on about 5 min. It works on phones. You can find it at flexboxfroggy.com, and we check the link daily.
Do I need to know CSS to play Flexbox Froggy?
No. The game starts with the basics and adds concepts level by level, so beginners can learn as they play. Plan on about 5 min. It works on phones. You can find it at flexboxfroggy.com, and we check the link daily.
Sites like Flexbox Froggy
Grid Garden
Water your carrots with CSS grid code.
- 5 minutes
- Works on phones
- Alive · checked 16 days ago
VIM Adventures
Learn Vim keystrokes by playing an adventure game.
- Rabbit hole
- Desktop
- Alive · checked 16 days ago
The Wiki Game
Race from one Wikipedia page to another using only links.
- 5 minutes
- Works on phones
- Alive · checked 16 days ago
Regex Crossword
Crosswords where the clues are regular expressions.
- Rabbit hole
- Works on phones
- Alive · checked 16 days ago
Moral Machine
Judge self-driving car dilemmas and compare with the world.
- 5 minutes
- Works on phones
- Alive · checked 16 days ago