Here are some games that allow you to master CSS in no time.
1. CSS Diner: CSS Selectors
Pretty basic, right? Select elements, classes, ids … maybe pseudo-classes? What else is there? Actually, there are more ways to select elements than you might think, and CSS Diner wants to teach you how to use them by asking you to select pieces of food with CSS. Some of the challenges can get a bit confusing, but this is coding — there’s no shame in googling it.
2. Flexbox Zombies
Flexbox Zombies is an insanely well-developed game/course that promises to teach you how to use flexbox with an intuitive, engaging, and self-reinforcing game that mostly revolves around you shooting zombies with weapons that are controlled by flexbox code. It takes you from the very basics through to the advanced stuff over the course of several levels that come complete with a storyline, cool graphics, and zombie-slaying action – you might even forget you’re learning CSS. Flexbox itself is an awesome technology for organizing content responsively along one dimension, and if you do anything with front-end web development, you owe it to yourself to learn it. Whether you’ve been putting it off or not, Flexbox Zombies is an excellent excuse to play a game that really does teach you something. If only all education could be this way, right? The same creator has also designed a game-course for CSS Grid called “Grid Critters.” It’s not free, but if you like Flexbox Zombies you might choose to drop the cash on it.
3. Grid Garden
Personally, I think flexbox is fine, but it really shines on one-dimensional (row or column) layouts, so for bigger projects and templates, you’ll want to turn to grid (maybe with some flexbox containers inside the grid cells). Once you figure it out, it’s neat and clean and amazing, but there can be a bit of learning curve which is where Grid Garden (and the aforementioned Grid Critters) can help. Grid Garden is a free game where you have to lay out a garden so that your carrots are being watered and the weeds are being poisoned – and it turns out that grid is perfect for this task! It’ll give you a solid grasp of basic grid positioning that you can then apply to your own site layouts
4. Flexbox Defense
Already know the basics of flexbox but can’t keep “justify” and “align” quite straight? Flexbox Defense is a flexbox tutorial disguised as a tower defense game that will make sure you remember that you remember your justify-content and align-self – or die. But you can just try again. If you’ve never been a fan of those games that only accept one right answer, you’ll like this one, as it allows you to position the towers wherever you like and succeed or fail on your own.
5. Flexbox Froggy
You could probably get a solid afternoon’s gaming in just going through existing Flexbox tutorials, but it’s probably better to space it out over a few days or weeks just to make sure you get lots of memory-refreshers. Flexbox Froggy is perfect for that – it doesn’t take you up from zero, but if you ever find yourself forgetting the commands, you can dash through this game in a few minutes to get yourself back up to speed.
6. CodePip Games
If you checked out Grid Garden and Flexbox Froggy, you’ve seen some examples of CodePip’s work already. Those are just the two free games they offer. If you sign up for a pro account on their site, they also have games that range from general CSS review to JavaScript.
How much CSS will this teach me?
Running through these games can help you learn some basic concepts quite well – especially if you want to learn flexbox. Ultimately, though, games can only teach you which words to type. You’ll have to put them into practice if you want to really figure out how to use them. Get yourself a good code editor and some ideas that you want to implement and start messing around!
