How to Learn Web Development by Playing Coding Games

I’ve created games like Flexbox Froggy and Grid Garden, along with others like CSS Diner and CodeCombat, that help package an educational experience into a fun, engaging format.

Yet, as with any learning resource, these questions frequently arise:

• Which coding games should I bother to invest my time in?
• How can I use coding games to learn most effectively?

In this article, I offer some tips to help you answer these questions based on my experiences as a game developer and educator.

Have a Gameplan

When you’re starting out on a mission to learn web development, whether it involves games or not, you should start with a plan.

Though your plan doesn’t need to be set in stone, having a strategy for what you want to accomplish and how you’ll do it will already put you a few steps ahead.

When you’re enrolled in a course or bootcamp, a lot of this planning is already done for you by experienced facilitators. freeCodeCamp offers a wonderfully organized curriculum as well.

But if you’re self learning, all of the resources available on the web (which at once feels like a solitary void and a chaotic spectacle) can be overwhelming. So let’s break it down.

When forming a plan, there are roughly three modes of learning you should target.

First is instruction. This is where you’re introduced to a new concept or skill, whether in the form of videos, books, tutorials, or documentation. In the classroom, this could be a teacher on the whiteboard.

Second is practice, where you get to exercise your cognitive muscles and strengthen your grasp on those new concepts. This can take the form of practice problems, drills, or coding challenges.

Third is integration, where you incorporate your newly gained knowledge and skills into your existing practices. There’s nothing better for this than project-based learning, where you apply what you’ve learned in a more authentic, well-rounded scenario.

An example of this is a web app you start as a weekend project. Even a relatively simple one will draw from all of the different facets of web development (and there are so many), helping you to contextualize what you’ve learned.

These three modes don’t have rigid divisions, and many resources you come across will span more than one of them. Still, it’s a useful way of thinking about and planning your learning.

Now when it comes to coding games, they too can fit in any of these modes. Many of the existing code games do have their greatest strength in the second mode — practice, with a small dose of instruction.

For example, in Flexbox Froggy, you’re presented with a variety of challenges in how you position frogs using CSS flexbox, with each level ratcheting up the difficulty.

By the end, you’ll have applied the Flexbox properties many times, in many combinations, to the point that they start becoming second nature.

Through this lens, you can see that coding games best serve as a complement to other resources you may use, including freeCodeCamp’s lessons.

Be a Critic

The next question you might have is which coding games you should play. Rather than provide you a static list, I encourage you to evaluate them yourself the same as you would any reference you come across.

First, consider the game from an entertainment angle. It is a game after all, and should be fun for you. Next, consider the pedagogical angle. That is, what am I learning from the game, and am I learning it effectively?

Educational game designers have to walk a tightrope in balancing fun with learning. For something that leans more on the learning, there are many resources inside and outside of gaming.

But beware the other direction, a game with merely a facade of educational substance. A coding game can fail when the educational content is too shallow or there are too many other game mechanics that distract you from engaging with what you need to learn.

Evaluating a learning resource on your own can be difficult, especially as a beginner. So your evaluation should also weigh the perspectives of others.

Consult with a trusted mentor or blogger. Or look for resources that have positive recommendations in your community: in the freeCodeCamp forums, web dev subreddits, or your favorite Discord or Slack group.

Press Start Now

Even if you ask yourself the same questions as everyone else about how to best fit coding games into your learning plan, everyone will have a different answer. There is no one-size-fits-all solution.

Your learning style and what sparks your passion will depend on your experiences, preferences, and goals. So what I encourage you to do is start today, have fun with it, and discover what works for you.

Though the idea of coding games that help you learn web dev has been around for years, the genre is still in its infancy. There is so much untapped potential to the idea that you can learn in a fun, interactive, immersive environment, and games are a great vehicle for that.

Fortunately for us, more coding games are becoming available all the time. I welcome you to stop by Codepip and play a coding game for yourself today.