Flexbox Froggy
Thomas Park (Codepip)
Plays on mobile
Similar games
Flexbox Froggy is a coding puzzle where you learn CSS flexbox by guiding cute frogs onto lily pads of their own color.
Each level asks you to write properties such as justify-content, align-items and flex-direction and instantly shows how the frogs move. With 24 levels, it is a fun practice ground for anyone getting started with web layout.
-
Step 1: Read the description on the left and type the needed CSS properties into the code box.
-
Step 2: Once every frog sits on the matching lily pad, the 'Next' button lights up.
-
Step 3: Click highlighted code words in the description for examples, and use Settings to change the language, difficulty or colorblind mode.
- Keyboard
- Mouse
- Touch
Mouse
- Click
Once the game starts, its controls are also shown on screen.
Full instructions
Read the description on the left and type the needed CSS properties into the code box. Once every frog sits on the matching lily pad, the 'Next' button lights up. Click highlighted code words in the description for examples, and use Settings to change the language, difficulty or colorblind mode.
Credits and license
- Developer
- Thomas Park (Codepip)
- License
- MIT
- Source
- github.com/thomaspark/flexboxfroggy
- Attribution
- Flexbox Froggy by Thomas Park (Codepip). Code MIT; frog and lily pad images by Thomas Park, licensed CC BY 3.0 (https://creativecommons.org/licenses/by/3.0/). Fonts PT Sans, Fredoka One, Source Code Pro under SIL OFL 1.1.
This game is hosted under the terms of its license.
Ratings and comments
Be the first to rate it
The average appears here once enough players have rated.
Rate this game
Write the first comment
Played it? Share what you think: the difficulty, your favourite level, a tip.
Comments could not be loaded.
