🏋️ Train your WEB DEV skills with online games 🎮
Tags: webdev, javascript, beginners, game
Published: 2019-11-27 14:52:39

Learning to code by ourselves can be overwhelming, not only for the difficulty of the subject, but also trying not to get lost in the humongous amount of tutorials and documentation available online. Luckily, there are resources that make things easier and fun, offering educational contents with a gamification aspect.

For a reference you can check out the article I recently published, about learning CSS concepts through online games:

{% link https://dev.to/paco_ita/train-your-css-skills-with-online-games-4ah3 %}

Afterwards, I got many inquiries about similar games to learn web development and javascript. Below the results of my research.
&nbsp;


##Checki0
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lqxhklaxtq465d3u83s1.png)

Checki0 allows to learn the basics of Javascript or Python by solving different problems and moving between "floating islands" in an imaginary world. Each island collects around 40 challenges and an increasing level of difficulty.
&nbsp;
![Checki0](https://thepracticaldev.s3.amazonaws.com/i/rjq0w675h5n4rod4wukb.png)
**Free** [Let's play](https://checkio.org/)
&nbsp;

-----------------------------------
&nbsp;
##Elevator Saga
In Elevator Saga you have to program the movement of elevators, by writing a program in JavaScript. The goal is to transport people in the most efficient manner.
Depending on how well you do it, you can progress through the ever more difficult challenges.
&nbsp;
![Elevator](https://thepracticaldev.s3.amazonaws.com/i/ic6ke6bkua7g2xjwulky.png)

An help and documentation section will help you moving the first steps in this interesting game.

**Free** [Let's play](http://play.elevatorsaga.com/)
&nbsp;

-----------------------------------

&nbsp;


##CodinGame
CodinGame offers free games where you have to solve puzzles and algorithm problems. It is possible to choose which language to learn among a wide choice: JavaScript, Ruby, Java and C#, just to mention some. <br> To make things more interesting, you can invite friends to play online and - if you want to increase the challenge - you can also participate in international programming competitions.

![CodinGame](https://thepracticaldev.s3.amazonaws.com/i/bft3gev4mw1gikn8kmdz.png)

There are many playgrounds for each programming language and you can choose among different grades of difficulty, so that you can proceed at your own pace. 

**Free** [Let's play](https://www.codingame.com/training)
&nbsp;

-----------------------------------

&nbsp;

##Screeps
Screeps is MMO sandbox for programmers with already some experience. The title stands for "scripting creeps". The game offers a wide range of options for players and possibilities to practice real-life code in a fun way.
&nbsp;
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cyqhy3a8q7q6z1bu67rq.png)

> Screeps is a massive multiplayer online real-time strategy game. Each player can create their own colony in a single persistent world shared by all the players. Such a colony can mine resources, build units, conquer territory. As you conquer more territory, your influence in the game world grows, as well as your abilities to expand your footprint. However, it requires a lot of effort on your part, since multiple players may aim at the same territory.<br> Unlike some other RTS games, your units in Screeps can react to events without your participation – provided that you have programmed them properly. And, unlike other MMO, you do not have to play Screeps constantly to play well. It is quite enough just to check once in a while to see if everything goes well.

&nbsp;
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/w0wp1slekywgmhh6hbck.png)
**Free** [Let's play](https://screeps.com/)
&nbsp;

-----------------------------------

&nbsp;

##CodeWars
CodeWars is a portal providing an extensive list of languages you can choose from.
![CodeWars](https://thepracticaldev.s3.amazonaws.com/i/r31f1s1llq8p4nmb14ie.png)

After an initial and simple test, you will be asked to confirm the programming language you are interested in and to select at which level  to start your training (from absolute beginner to senior developer). You  earn points by solving different challenges, each one covering different coding principles, and compete with other developers for the highest position on the scoreboard.

![example](https://thepracticaldev.s3.amazonaws.com/i/juzpccidaevgebsg6gbp.png)
**Free** [Let's play](https://www.codewars.com/)
&nbsp;

-----------------------------------

&nbsp;


##Untrusted
Untrusted is an adventure game where you need to use your JavaScript skills to solve problems that arise during the story development. In order to guide the main character (Dr. Eval, the green @ on the screen) between levels, you enter javascript instructions on the right panel to let him escape from the current stage.
&nbsp;
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xga01dfzgrogu580ca79.png)
**Free** [Let's play](https://alexnisnevich.github.io/untrusted/)
&nbsp;

-----------------------------------

&nbsp;


##Ruby Warrior
You guide a knight through different levels, coding his moves and learning Ruby along the way. You can choose among an easy or intermediate difficulty. 

**Note:** the game starts with music on! So be aware in case you open the link in the office or at school :smile:
&nbsp;
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p8ayl74l20cbnz6eprbe.png)
**Free** [Let's play](https://www.bloc.io/ruby-warrior#/)
&nbsp;

-----------------------------------

&nbsp;

##Dungeon & Developers
Many developers like RPG games (I do :smile:) and 352 Inc, a digital web agency, used this aspect to create Dungeon & Developers.
&nbsp;
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ppi52gzw3nwta7t3dopr.png)

It is not exactly a game, but it provides really cool graphics and it is worth a look. You build a *talent tree*, following the classical RPG tree skills. For each level there is a set of links redirecting to different topics (CSS, Javascript, SEO, etc.), after mastering them - that is, you
 study the referenced docs at each step - you unlock the next skillset, adding features points (strength, wisdom or charisma) to your character, exactly as in a classic RPG game.
&nbsp;
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/otuf1e1rthv7vrtiwbio.png)

From the creators:
> We came up with Dungeons & Developers as a fun way to assess, promote and learn the skills it takes to design and develop great web sites.

**Free** [Let's play](http://www.dungeonsanddevelopers.com/)
<hr>

If you know other games (not just tutorials or docs) to learn javascript or web development basics, please mention them in the comments below, so I will update the list.
&nbsp;
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vq05prdgb5dxet2ucwhx.jpg)