thomaspark/flexboxfroggy

★ 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

Things people build with this

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

Tech stack

JavaScriptCSSHTML

Getting 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).

In plain English

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?

Open on GitHub → Explain another repo

← thomaspark on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.