DEV Community

Cover image for ๐Ÿ‹๏ธ Train your WEB DEV skills with online games ๐ŸŽฎ
Francesco Leardini
Francesco Leardini

Posted on • Updated on

๐Ÿ‹๏ธ Train your WEB DEV skills with online games ๐ŸŽฎ

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:

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

Checki0

Alt Text

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.
ย 
Checki0
Free Let's play
ย 


ย 

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.
ย 
Elevator

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

Free Let's play
ย 


ย 

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.
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

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
ย 


ย 

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.
ย 
Alt Text

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.
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.

ย 
Alt Text
Free Let's play
ย 


ย 

CodeWars

CodeWars is a portal providing an extensive list of languages you can choose from.
CodeWars

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
Free Let's play
ย 


ย 

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.
ย 
Alt Text
Free Let's play
ย 


ย 

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 ๐Ÿ˜„
ย 
Alt Text
Free Let's play
ย 


ย 

Dungeon & Developers

Many developers like RPG games (I do ๐Ÿ˜„) and 352 Inc, a digital web agency, used this aspect to create Dungeon & Developers.
ย 
Alt Text

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.
ย 
Alt Text

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


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.
ย 
Alt Text

Top comments (12)

Collapse
 
willianpascoal profile image
Willian Pascoal

I've spent hours on CodeCombat, very good too.

Collapse
 
sbu_05 profile image
Sibusiso Dlamini

Thanks this is really helpful

Collapse
 
paco_ita profile image
Francesco Leardini

Welcome! I am glad you found it useful. Enjoy the trainings :)

Collapse
 
nwajeigideon profile image
Nwajei Gideon

This really helpful cause am a little tired of tutorials and documentation ๐Ÿ˜Š

Collapse
 
negue profile image
negue

Nice collection ^ , thank you!

Collapse
 
paco_ita profile image
Francesco Leardini

Glad you found it useful!!

Collapse
 
simonced profile image
simonced

A game I often go back to is Colobot.
It's a free download, and we can do some advanced stuff in it.
It's not online though...

Collapse
 
paco_ita profile image
Francesco Leardini

I will have a look at it! Thanks for mentioning it.

Collapse
 
diek profile image
diek

Thank you! I will try the elevator one xD

Collapse
 
paco_ita profile image
Francesco Leardini

You are welcome! I am glad you found ti useful

Collapse
 
paco_ita profile image
Francesco Leardini

Thanks for the add-on Pavel!

Collapse
 
paco_ita profile image
Francesco Leardini

Yeee :)

Some comments have been hidden by the post's author - find out more