# thomaspark/flexboxfroggy

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/thomaspark-flexboxfroggy).**

7,351 stars · 728 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/thomaspark/flexboxfroggy
- Homepage: https://flexboxfroggy.com
- awesome-repositories: https://awesome-repositories.com/repository/thomaspark-flexboxfroggy.md

## Topics

`css` `flexbox` `flexbox-froggy` `game`

## Description

Flexbox Froggy is a CSS flexbox learning game that teaches layout properties through interactive positioning puzzles. Players learn flexbox by writing CSS rules to move frogs onto lily pads, with each level presenting a new layout challenge that reinforces a specific flexbox concept.

The game embeds a code editor with syntax highlighting and inline error hints, allowing players to write and test CSS rules in a live preview environment. A hint and solution system provides optional guidance for stuck players, while the visual feedback loop updates frog and lily pad positions in real-time based on the applied CSS, making the learning process directly observable.

The level-based progression system organizes challenges into sequential puzzles of increasing complexity, each evaluated against predefined target layouts. The game board itself is rendered using CSS flexbox, ensuring consistent display across devices.

## Tags

### User Interface & Experience

- [Game-Based Flexbox Learning](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/flexbox/game-based-flexbox-learning.md) — Teaches CSS flexbox layout by positioning frogs on lily pads using flexbox properties in an interactive game. ([source](https://cdn.jsdelivr.net/gh/thomaspark/flexboxfroggy@main/README.md))

### Part of an Awesome List

- [Educational Level Progression Systems](https://awesome-repositories.com/f/awesome-lists/devtools/level-and-tile-editors/tile-based-level-mapping/educational-level-progression-systems.md) — Organizes challenges into sequential levels with unique layout puzzles and increasing complexity.

### Development Tools & Productivity

- [Educational](https://awesome-repositories.com/f/development-tools-productivity/terminal-syntax-highlighting-engines/in-browser-code-editing/code-editors/educational.md) — Embeds a code editor with syntax highlighting and error hints specifically for learning CSS flexbox.

### Education & Learning Resources

- [CSS Layout Learning Games](https://awesome-repositories.com/f/education-learning-resources/css-layout-learning-games.md) — Teaches CSS flexbox layout properties by solving interactive positioning puzzles in a game environment.
- [Targeted Feedback Loops](https://awesome-repositories.com/f/education-learning-resources/targeted-feedback-loops.md) — Updates frog and lily pad positions in real-time based on applied CSS, reinforcing learning through direct observation.
- [Learning Hints](https://awesome-repositories.com/f/education-learning-resources/learning-hints.md) — Provides optional hints and reveals correct answers for stuck players, supporting self-paced learning.

### Game Development

- [Educational](https://awesome-repositories.com/f/game-development/game-engines-frameworks/game-engines/educational.md) — Drives gameplay by evaluating user-submitted CSS against predefined target layouts and providing visual feedback.

### Security & Cryptography

- [CSS](https://awesome-repositories.com/f/security-cryptography/third-party-script-security/iframe-sandboxing/live-preview-sandboxes/css.md) — Executes user-written flexbox rules in a live preview showing immediate visual results without page reload.

### Web Development

- [Interactive Flexbox Learning Patterns](https://awesome-repositories.com/f/web-development/flexbox-layout-patterns/interactive-flexbox-learning-patterns.md) — Teaches CSS flexbox properties by positioning frogs on lily pads through interactive coding challenges. ([source](https://flexboxfroggy.com))