Not-so-typical methods to master various web technologies.
Photo by Nicolas Gras on Unsplash
Whether it is gaining expertise or learning an entirely new language, developers need to keep up with the trends as well as up their existing skillset.
No matter how passionate you might be about coding, continuous learning can be tiresome and may even have counter-productive effects such as “tutorial hell”.
Fortunately, there are plenty of genuine ways to up your coding skills without spending hours reading books or watching tutorials.
Playing coding games is an exciting way to spend your time while also solving problems and learning new things along the way.
Below are 7 games you should play to up your web development skills:
1. CSS Diner
Game to learn CSS. Source.
CSS Diner, made by Luke Pacholski, is a fun & intuitive way to master CSS selectors.
You are provided with a CSS editor for you to type your CSS code into as well as an HTML viewer, which renders items like plates.
There are as many as 32 levels and the sole challenge of each level is figuring out how to select particular items using the CSS selectors. With each passing level, the complexity of the game increases.
Moreover, there are also examples present at each level to help you in case you are unsure about the solution.
2. CheckiO
CheckiO’s TypeScript challenges. Source: GIF by Author of the site.
If you want to learn TypeScript(or Python), CheckiO is an incredible website for you and definitely worth checking out.
Moreover, there’s also a Chrome extension available which allows you to use your local desktop IDE instead of the web-based development environment.
You get several challenges, such as removing non-unique elements from a given list and there are over 300 exercises available.
With the aim to build the most entertaining coding game, CheckiO offers few different varieties of these coding games. There is Empire of Code which combines tactics, strategy, and coding into a single game.
They also have challenges and helpful articles related to programming on their blog page.
What’s interesting is that the site helps the teachers to use these code puzzles and games to supplement their teachings.
Things like monitoring class progress as well as access to solutions submitted by students are available to teachers.
3. Cyber-Dojo
One of the Cyber-Dojo challenges. Source.
Cyber-dojo is a must-visit site if you are a fan of Test Driven Development(TDD).
If you are unaware of TDD, it is an approach to how we look at software development. In TDD, the tests are written before the actual software development code.
To get started, visit the site to create a new practice session and choose the problem you want to solve followed by the language of your choice.
Cyber-dojo offers support for almost all the prominent programming languages such as JavaScript, C, Java, Python, and more.
4. Elevator Saga
Source: GIF by Author of Elevator Saga page.
Another fun game you can try out is the Elevator Saga game.
You have to program the movements of elevators using JavaScript, with the aim to transport people from one floor to another in an efficient manner.
There are time constraints and you can rewrite the code as many times as you want to try and minimize the time taken to transport people.
It really gets challenging as you advance and as the official documentation says “Only the very best programs will be able to complete all the challenges”.
You can even use the developer's tools of your browser to debug the code if need be and besides this, the code is also stored in the local storage hence you need not worry if you accidentally close the browser.
5. Code Combat
Code Combat Game. Source: Screenshot by Author of the official site.
Code Combat has been one of my favorite coding games for a while and I still enjoy playing it sometimes.
This site offers a collection of games, some based on dungeon-style navigation while others on game development where it’s your duty to build levels.
As you complete each game, the next one gets unlocked.
In the first game, Dungeons of Kithgard, you have to guide your hero through hallways without touching obstacles like spikes present on walls.
JavaScript and Python are supported while the support for CoffeeScript and C++ is in the experimental phase.
6. Codewars
Codewars’s JavaScript challenge. Source.
As the name suggests, Codewars is really about the actual code “wars” i.e fixing and comparing codes.
This game is really great if you want to master a language in an intriguing way.
As you complete the challenges, you earn ranks that show your expertise level. Moreover, these ranks are used to match you with problems that will really challenge you.
You can also compare your code with other fellow users as well as create your own challenges that other users can try out.
Additionally, you don’t get support for only a few well-known languages but for an abundant amount of languages.
This game also promotes and uses the Test Drive Development(TDD) approach.
7. CSS Battle
CSS Battle landing page. Source: GIF by Author of the site.
CSS Battle is an excellent game if you want to master CSS. Unlike the CSS Diner game, this game is not just about using selectors.
You are provided with an image and you have to try your best to replicate that image using nothing but CSS, not even JavaScript or external assets like pictures.
Everything from alignment to size to color has to match the provided image in order to get a 100% success result.
You can pick the exact challenge you want and each challenge focuses on certain CSS features such as the use of transition, overflow, blocks, etc.
You also get a leaderboard and interestingly, there is also a jobs board present.
What add to the fun is the fact that you are allowed to create your custom battles with custom targets and leaderboards and play with your friends.
Final thoughts
Developers have to always keep on learning new languages or spend time mastering their current language of choice.
While it starts off exciting, this process of continuous learning can become boring, and to rejuvenate your programming journey, you can try out the games mentioned above.
Although individually, these games can’t guarantee to teach you everything you need to know about the language, they still provide value and can sharpen your technical skills.
However, just sharpening your existing skills isn’t enough and you have to learn new approaches and practices as you go about building new projects from scratch. 5 Ways to Grow as a Developer Definite methods to up your game and advance your careerjs.plainenglish.io
I really hope you enjoyed reading this article and have fun playing these games.