Free Coding Games for Learning Web Development
Join the DZone community and get the full member experience.Join For Free
Flexbox Froggy & Grid Garden
Codepip is a collection of free and premium coding games for learning web development, from a minecart game called Nth Cart about the
CSS Diner is a delightful coding game where you "feast on CSS selectors". Seated for dining, you use CSS selectors to pick different items like plates and pickles from it. It starts simple, but you quickly work your way up to more complex selectors involving siblings and attributes.
Erase All Kittens
Erase All Kittens is an epic introduction to coding for younger students aged 8 and up. In EAK, your mission is to edit HTML code, which in turn modifies the platforms on a level, allowing you to collect cat gifs and reach the end.
SQL Murder Mystery
The games so far have covered the frontend languages. But what about the backend?
In SQL Murder Mystery, you're a sleuth who must use SQL concepts and commands in order to crack a murder case.
Select Star SQL is a deeper dive into SQL, where you run queries against a real-world dataset and use your findings to form conclusions about capital punishment. By the end, you'll have a solid mental model of SQL.
Method of Action
The design games from Method of Action are adjacent to web development but are too gorgeous not to mention. These games are focused on different aspects of visual design, such as color theory, kerning, and boolean operations needed to create your own vector graphics.
CSSBattle is a code-golfing game. Presented with different designs made in pure CSS, your goal is to replicate them with as little code as possible, not unlike golf where a lower score is better. Your score is stacked up against other players, so you'll need to use every CSS trick in your bag to show up on the leaderboards.
Flexbox Zombies is another game that teaches the power of using CSS flexbox, all the while surviving a zombie onslaught. The visuals are certainly a treat.
Shortcut Foo uses the spaced repetition technique to help you memorize keyboard shortcuts for your code editor of choice, whether it's Visual Studio Code, Atom, Sublime, Emacs, or Vim. By having hundreds of powerful commands at your fingertips, you'll be able to "accomplish more in less time with fewer keystrokes".
Opinions expressed by DZone contributors are their own.