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.
CSS GAMES
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
JSRobot
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.
Screeps
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.
