flexboxfroggy

Flexbox Froggy is a browser-based game designed to teach CSS flexbox, a way of arranging and positioning items on a web page. CSS, or Cascading Style Sheets, is the language that controls how web pages look. Flexbox is one of its layout systems, letting developers place items in rows, columns, or grids without writing complex positioning rules by hand. The game makes these concepts approachable by turning them into puzzles, playable at flexboxfroggy.com.

Rather than reading documentation, players type CSS flexbox properties into a text box and watch cartoon frogs move across a pond to land on matching lily pads. Each correct CSS rule moves the frogs closer to their target positions. The game is aimed at web learners who want a hands-on, trial-and-error way to understand layout properties rather than studying reference pages.

One notable aspect of the project is its translation coverage. Volunteers have localized the game into more than 50 languages, ranging from Afrikaans and Arabic to Ukrainian and Vietnamese. The README credits each translator by name and invites further contributions through a standard fork-and-pull-request workflow on GitHub. This breadth makes the game accessible to learners who are not comfortable working in English.

The code is released under the MIT License and the images under a Creative Commons license, so anyone can fork, adapt, or self-host the game freely. The project was created by Thomas Park and has been maintained since 2015, with the copyright updated through 2023. The README links to a blog post by the author with background on how the project came to be.