What is flexboxfroggy?

thomaspark/flexboxfroggy — explained in plain English

Analysis updated 2026-06-24

★ 7,339JavaScriptAudience · developerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((Flexbox Froggy))
    What it does
      Teaches CSS flexbox
      Interactive puzzles
      50 plus languages
    How it works
      Type CSS rules
      Move frogs to lilypads
      Browser based game
    Audience
      Web learners
      Bootcamp students
      Educators
    License
      MIT open source
      CC licensed images

mindmap root((Flexbox Froggy)) What it does Teaches CSS flexbox Interactive puzzles 50 plus languages How it works Type CSS rules Move frogs to lilypads Browser based game Audience Web learners Bootcamp students Educators License MIT open source CC licensed images

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Practice CSS flexbox layout properties through interactive puzzles without reading documentation

USE CASE 2

Self-host or fork the game to create a localized version for students in your own language

USE CASE 3

Teach web layout concepts in a classroom or coding bootcamp using the gamified puzzle format

What is it built with?

JavaScriptCSSHTML

How does it compare?

	thomaspark/flexboxfroggy	ripple-ts/ripple	vincit/objection.js
Stars	7,339	7,344	7,345
Language	JavaScript	JavaScript	JavaScript
Setup difficulty	easy	moderate	moderate
Complexity	1/5	3/5	2/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Use, copy, modify, and distribute freely for any purpose including commercial use as long as you keep the copyright notice (MIT License, images under Creative Commons).

So what is it?

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.

Copy-paste prompts

Prompt 1

I'm learning CSS flexbox, walk me through justify-content and align-items with examples similar to the Flexbox Froggy puzzles

Prompt 2

Show me how to add a new level to the Flexbox Froggy game with a puzzle where three frogs must be placed at equal intervals in a row

Prompt 3

Translate the Flexbox Froggy game into Portuguese, show me the translation file format and what strings need to change

Prompt 4

Self-host the Flexbox Froggy game locally, what files do I need and how do I run it without the live site?

Frequently asked questions