Flexbox Zombies: Learn the basics of CSS Flexbox while experiencing a zombie survival story.
Flexbox Froggy: Learn the basics of CSS Flexbox via frog & lily pad alignment puzzles.
Grid Garden: Learn the basics of CSS Grid while planting a garden.
VIM Adventures: An online game for learning VIM’s keyboard shortcuts. Think “Zelda meets text editing”.
Ideally, the qualities of these resources is that they are free (or considerably cheap if not), accessible and that they (mostly) center around learning useful knowledge / skills for Web Development.
Learn info sec concepts as well as essential Linux commands by playing games of capture the flag in your terminal. Games should be played in the order they are listed
I found Elevator Saga really fun, it’s a game where you write Javascript and interact with a simple API in order to make elevators move.
It’s more of a way to practice algorithms / problem solving / logical thinking than a way to learn Javascript, however, and it doesn’t really assess you beyond whether or not you completed the objective.
And while they’re non-free, I want to give honourable mention to the Zachtronics collection of games on steam. They are all fantastic programming puzzle-like games, and some of them teach you some basic assembly-like code which I found really entrancing, my recommendation would be Exapunks but there are lots of different ones. Exapunks comes with its own simple assembly language, retro tech vibes and has a score system that lets you self-assess on 3 different metrics.
So without being the partypooper for too long, I’d just like to point out that when people are very, very new to a thing like programming or what not, it’s okay to get started playing games and doing activities in some app, but at some point you do have to branch out.
At the same time I think it’s too common for people in this school of thought to be very absolutist about not engaging with what they consider inferior ways of learning: games, tutorials, etc. Personally, I think a multi-layered approach to learning is best. Whatever keeps your attention on the subject as long as possible.
At the end of the day though, I’ve always gotten the most on a new subject from a text book.
That being said, here’s a couple that haven’t been mentioned.
I actually really recommend that web developers and hobbyists (particularly backend hobbyists) at some point go through the intro web app sec courses on tryhackme. It’s not going to make you a mastermind or something like that, but it’s going to get you thinking about the basics and what is possible for someone to do to you and your users if you’re not thinking about it.
I definitely agree that as a learning tool these games are limited, but I think they are still very powerful in what they do accomplish. Namely, garnering interest and demystifying the basic programming concepts-- especially now that some of the more traditional avenues of exposure to coding are somewhat faded and lost to time.
I could never get into these learning-based games for programming/coding, personally. Not sure why; I think it doesn’t feel substantial enough? I always hated ‘hour of code’ activities in middle school. I’ve found a lot more success through trial and error, but I know some people who really benefit from this sorta thing! Theyre great programs/games, I wish I could benefit from them properly.
While I haven’t played this yet I do find it interesting. It mentions that little to no knowledge of JS is required to play the game, but reviews over time have mentioned it is a situation where the more JS you know the more you can bend the game so to speak.
–
With that in mind I think this could be paired well with a traditional study approach to JavaScript. One could study their JavaScript through an avenue of their choosing and then do a playthrough of this game. Over time they may notice they can achieve things in the game they couldn’t previously, serving as validation that this programming language their learning is sticking around in their brain
I’ve played a decent chunk of this one too, I’d recommend it to anyone who likes idle games and who might enjoy messing around with JS dev, though if I remember right it doesn’t do a lot to teach you, despite coming with its own documentation website.
One fun thing about it though is that its inherently moddable; it is itself written in Javascript and executes in a web environment, so your in-game scripts can also hack into the game’s code either to exploit it or to create helpful features for yourself. I had a blast creating a mini interactive UI library for it a couple years ago, so all my scripts could have full on GUI’s.
Would probably more recommend this one to someone who knows JS basics already but now wants an excuse to play around with it, outside of a webdev context.
That was the feeling I was getting from the reviews as well. That previous knowledge of JavaScript really benefits you with this game. In a few other forum topics on here a common theme of no intermediate resources being available for people of many skill backgrounds. Having not played the game myself, do you think this would be something that could benefit someone who is in an intermediate point with JavaScript the most?
Kind of but mostly from an enjoyment perspective. The coding aspect of Bitburner is fairly freeform and almost kind of minimal unless you go off-rails and start experimenting with things you don’t have to do (with nebulous / debatable benefits) which is why I’d say it’s better for intermediate coders who would probably be more likely to try exploring that way.
Overall not the best learning experience but it’s at least a cool way to expose people to JS and maybe suck them in, and has a neat little script trading community too.
Oh I like that, that seems actually really useful for anyone struggling with selectors.
And it also reminded me of CSS Battles - You’re given a simple-ish target image, and asked to recreate it using only CSS and some html. You get scored on a function of how similar the end result is (by pixels) and how large the code footprint is. At my last job we had ‘CSS battle Friday’ and it was actually a great way for us to share CSS tips with each other, since the winner would usually have used a technique someone else didn’t know about. Though it doesn’t exactly encourage good CSS habits or sensible markup!