What are the best browser-based games to teach coding?


These games run in your browser and are a fun way to practice basic website coding skills and techniques.

Whether you’re learning or teaching CSS or Javascript, there are many fun, free, browser-based games to practice and perfect your skills.


Learn CSS with fun games.

CSS Diner

CSS Diner focuses on CSS selectors. In this game, you select the right food during 32 challenges, using CSS selectors to specify which item should be added to your dish.

Passing the first level took me a couple of tries, as I wasn’t expecting to type in a non-html5 element, like plate. I especially love the refresher this game gives you on universal selectors (the *), selecting adjacent sibling items,

CSS Battle

This is a golf-themed CSS game.

Grid Garden

Practice CSS grid skills in this game’s 28 levels of tending to your carrot garden. Add poison to weeds and water to your carrots while gaining practice with grid-column-start, grid-column-end, grid-column, grid-row, order, grid-template-columns, grid-template-row, grid-template, and grid-area. You’ll even get to use the fr (fractional) unit. Starting at level 26, it starts to get challenging!

Flexbox Froggy

Practice your Flexbox positioning in 24 challenges that help frogs find lilypads. The game provides excellent visuals to teach the difference between space-between, space-around, and space-evenly in the CSS justify-content property. You’ll also have the opportunity to explore the align-items (flex-start, flex-end, center, baseline, stretch), flex-direction (row, row-reverse, column, column-reverse), order, align-self, flex-wrap, flex-flow, and align-content properties. The last level is a bit tricky!

Flexbox Defense

Play defense by positioning your towers with CSS to block your enemies.

Flexbox Zombies

Play “zombie survival challenges” as you learn and practice flexbox skills.

Javascript Games


This beginner’s game has you control a robot using javascript to complete missions.

Elevator Saga

Your job is to write code that successfully moves people riding in elevators.


For more advanced programmers; an open-source sandbox game, not a browser-based game

This open-source sandbox game (not a browser-based game) is intended for more advanced programmers where you control a colony by writing javascript.

Happy Web Designing + Programming!

If you know of other games, please share them in the comments.

About the author

Kelly Barkhurst

Designer to Fullstack is my place to geek out and share tech solutions from my day-to-day as a graphic designer, programmer, and business owner (portfolio). I also write on Arts and Bricks, a parenting blog and decal shop that embraces my family’s love of Art and LEGO bricks!

Add comment

By Kelly Barkhurst

Recent Posts