7 Interactive Games to Practice Your Web Development Skills

Lucy MacartneyLucy Macartney
4 min read

Teaching yourself how to code can be a long and sometimes frustrating journey. It can be easy to get stuck in a cycle of constant learning, but real progress comes from hands-on practice. Building projects is one way, but in this post, I’m sharing seven free coding games where you can have some fun while learning and practicing.

Learn Git Branching

Mastering Git can be challenging. Learn Git Branching makes it easier with a visual, interactive approach. The game draws visual diagrams as you write Git commands, helping you to understand how Git really works.

A screenshot of Learn Git Branching. It shows a window with written instructions and then a visual diagram next to it representing what a git merge looks like.

Flexbox Froggy

Flexbox Froggy is a 24-level game to help you practice your CSS Flexbox skills. The aim of the game is to help frogs get to their lily pads by writing CSS code.

Screenshot of the "Flexbox Froggy" game level 3. Instructions on using "justify-content" are on the left, with a code editor showing . On the right, three colorful frogs and lilypads are displayed against a blue background.

Created by Thomas Park

Flexbox Zombies

Flexbox Zombies is a very fun, in-depth interactive game to help you master Flexbox. The goal is to use Flexbox properties to survive the onslaught of zombies.

The game has 12 chapters, with each chapter focusing on a different Flexbox concept. There are multiple challenges in each chapter, and each chapter builds on the last. By the end of the game, you should feel very comfortable writing Flexbox without using a cheat sheet.

A screenshot of Flexbox Zombies. A character aims a crossbow at two zombie figures. A text box provides instructions about using align-self: flex-end on the second figure. A code snipper shows CSS flexbox properties.

Created by Dave Geddes

Knights of the Flexbox Table

Knights of the Flexbox Table is another free game to help you practice your Flexbox skills. However, this time, you'll be practicing how to use Flexbox with Tailwind CSS.

A game interface showing three knights in a dungeon with three treasure chests. The chests are glowing green, yellow, and red. Text instructions and a code snippet are visible on the right side.

Created by Marcel Pociot

CSS Diner

CSS Diner is a fun game to help you learn and practice CSS selectors.

A CSS Diner game screen showing Level 8 of 32. The task is to "Select the small oranges in the bentos." The interface displays a bento tray with different food items and a CSS editor with accompanying HTML viewer code.

Created by Luke Pacholski

Grid Garden

Grid Garden is a 28 level game where you can practice your CSS Grid skills to help grow a carrot garden. This game should help you develop intuition with CSS Grid and see how powerful it can be in CSS layouts.

A screenshot from the Grid Garden game showing the instruction to use "grid-column-start" and "grid-column-end" to water carrots in a CSS grid. The code editor on the left displays a CSS code snippet. A 5x6 grid on the right shows water covering the first four columns on the first row, with carrots only in the first three columns.

Created by Thomas Park

Codewars

Codewars is an online platform to help you improve your algorithmic programming skills. It's not exactly a game but the platform offers a very game-like experience. You solve challenges known as “kata” and as you solve more challenges, your ranking increases.

Codewars supports a wide range of programming languages, meaning that you can practice in the language of your choice. It also has a strong community where users can discuss solutions and learn from each other.

Screenshot of a coding challenge titled "The Hashtag Generator" with requirements: start with a hashtag, capitalise first letters of words, limit length to 140 characters, and return false for empty input or output. A JavaScript function skeleton is shown on the right.

Conclusion

Have you used any other games in your learning web development journey? I’d love to hear about them in the comments 🗣️

Thank you for reading this far. I hope you enjoy playing these games! If you enjoyed this blog post, follow me on Hashnode, or on Twitter.

Have a great day and happy coding!

1
Subscribe to my newsletter

Read articles from Lucy Macartney directly inside your inbox. Subscribe to the newsletter, and don't miss out.

CSSGitGamesWeb DevelopmentCodewars

Written by

Lucy Macartney
Lucy Macartney

I'm a software developer and technical writer from London UK, living in Cali Colombia.