CSS Grid Garden
cssgridgarden.com
A free browser game that teaches CSS Grid layout by having you write real grid properties to water garden plots — covering grid-column, grid-row, grid-area, and grid-template across 28 levels.
Why it is useful
The CSS Grid counterpart to Flexbox Froggy. Grid is harder to internalize than Flexbox because of the two-dimensional coordinate system — the game makes the placement logic intuitive by making it visual and immediate. After completing it you can write grid layouts without reaching for a reference. The game covers the full CSS Grid specification, not just the basics.
More in Learning Resources
Other learning resources you might not have heard of.
- DuolingoThe most widely used language-learning app, using short gamified lessons, streaks, and spaced repetition to build vocabulary and grammar over time.
- Learn X in Y MinutesA community-written cheat sheet site covering 170+ programming languages and tools in a dense, example-heavy format — showing syntax and idioms from variable declaration to classes in a single scrollable page.
- AnimagraffsEducational site publishing animated technical explainers on engines, aircraft, electronics, infrastructure, vehicles, watches, and other mechanical or scientific systems.
- CodecademyInteractive coding courses across dozens of languages and frameworks, with an in-browser editor so you write real code inside every lesson.
- The Linux Command LineWilliam Shotts' free comprehensive book on the Linux command line — covering navigation, file operations, permissions, shell scripting, processes, and system administration — available to read online in full.
- VisuAlgoAnimated, step-by-step visualisations of data structures and algorithms, from sorting and linked lists to graphs and dynamic programming, with the ability to run each on your own input.