Can't Unsee — an eye-training game for interface details
Compare similar interfaces, choose the stronger option, and practice noticing spacing, typography, alignment and icon details.
About this resource
Flexbox Froggy is a learning game by Thomas Park, the creator of Codepip. Across 24 levels, you use CSS Flexbox to position colorful frogs on their matching lily pads. It is aimed at beginners; basic CSS knowledge helps but is not required. Enter CSS declarations in the built-in editor and watch the frogs move. Once every frog matches its target, you can continue. Instructions introduce each task, while visual feedback connects your code to its effect on the layout. The exercises cover justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex-flow and align-content. You practice alignment along the main and cross axes, changing direction, rearranging items and wrapping them onto multiple lines. These concepts help designers understand how web layouts work. Settings include Ukrainian and other languages, a colorblind mode and three difficulty options. Beginner includes directions, Intermediate removes them, and Expert also randomizes levels. Repeating the exercises without directions provides a way to check your recall after a guided pass. The original game is free, needs no account or installation, and saves progress locally in your browser. Codepip offers account-based cross-device progress. The publisher recommends current Chrome, Edge, Firefox or Safari, preferably on a computer or tablet. A keyboard makes entering CSS easier.
Usage and licensing
The game is free to access. Source code is MIT-licensed: https://github.com/thomaspark/flexboxfroggy/blob/main/LICENSE. Flexbox Froggy images: Thomas Park / Codepip, CC BY 3.0, https://creativecommons.org/licenses/by/3.0/. Source: https://github.com/thomaspark/flexboxfroggy. Reusing images requires attribution, a license link and an indication of changes where applicable; attribution does not imply the creator endorses your use.
Check the creator’s current terms before using this resource.Similar resources
Kern Type — a kerning practice game
A free browser game for developing an eye for letter spacing: reposition letters, receive a score and compare your result with a reference solution.
Color — a color-matching practice game
A timed browser game for matching target colors and practicing hue, saturation, complementary, analogous, triadic and tetradic color relationships.