These 10 Fun Games Will Teach You Modern CSS

Learn all about modern CSS layouts and polish up your core CSS skills with these interactive games. With layout techniques like CSS grid, a speedrun challenge, and a fundamental selector test, there’s something for all abilities.

1

Flexbox Froggy

Teaching designers about flexible box layout for nearly a decade, Flexbox Froggy is probably the most well-known CSS game. For good reason, too. Not only is flexbox one of the trickier CSS concepts to nail down, but this gamified tutorial wins big on ease of use and cuteness.

Across a series of 24 challenges, each level displays a handful of frogs and corresponding lily pads they call home. Your task is to transport each amphibian using the power of CSS flex alone. You can freely edit the CSS in a text box and immediately see how various properties affect the frogs’ positions. There’s no penalty for getting something wrong, so you can experiment, fine-tune your CSS, and observe the results.

Things start easy with a simple justify-content property moving a frog from one corner to another. But the difficulty ramps up to take in different directions, wrapping, and several different sets of frogs. Each level has brief help text that links property names to a short description alongside possible values.

Flexbox Froggy is perfect for beginners or more advanced designers looking to refresh their Flexbox knowledge.

2

Flexbox Zombies

If helping frogs sounds a bit too cutesy, you might prefer to tackle hordes of brain-eating zombies instead. Flexbox Zombies ups the production values with animation, music, and dialogue. But its approach is similar to Flexbox Froggy: type CSS into a text box to progress.

The game is presented across a series of levels grouped into chapters which are locked to prevent you from jumping ahead. Your CSS controls a crossbow—and, later, other weapons—to zap zombies in various positions on the screen.

With 12 chapters, each housing around 20 steps that combine tutorials and challenges, there’s a lot of value here. Those challenges lack the quick tips that Flexbox Froggy offers, but the Hint button gives advice based on what you’ve already tried, which is a useful addition.

3

Flexbox Defense

Taking a lead from the tower defense genre, Flexbox Defense has a similar layout and feel to Flexbox Froggy. This time, rather than helping out cutesy frogs, your task is to position towers so they take out incoming enemies that move along a path.

In this game, each level’s objective is slightly less clear, so the emphasis is a bit more on gaming and strategy. Not only will you need to apply your CSS skills, you’ll also need to work out exactly where to place your towers to take out the incoming attackers.

Related

I’d Rather Play These Games on a Foldable Phone

These games feel more at home on a foldable than anywhere else.

The challenge remains on the simple side, but the extra element encourages experimentation, so you may find it’s more effective, with greater coverage of Flexbox properties. Hints are, once again, offered via simple hover popups, and the small set of 12 levels makes this an ideal option for a quick learning session.

4

Flex Box Adventure

Flex Box Adventure is yet another variation on a familiar theme, but it includes lots of explanation and some nice quality-of-life features. Guide your heroes to defeat a variety of enemies and conquer CSS Flexbox!

The game features three difficulty settings which affect the amount of help it provides. On the easiest setting, the experience is almost like an annotated CSS tutorial, but the annotations are engaging puzzles that are perfectly picked to demonstrate each concept.

Each level unlocks when you complete the previous one, even on the easiest setting, so your progress is guided and linear. My only small complaint is that levels only unlock within their difficulty setting, so it’s worth challenging yourself and starting at a higher difficulty.

5

Grid Garden

From the creator of Flexbox Froggy, Grid Garden takes a similar approach to CSS Grid layout. This time around, you’re tasked with watering carrots and poisoning weeds, but the principle and interface are both familiar.

CSS Grid makes a lot of use of shorthand properties so that “3 / span 3” and “3 / 6” are equivalent. Grid Garden teaches you about several of these shorthands, but it lets you use any CSS that leads to a correct solution, so multiple approaches are often available.

Like Flexbox Froggy, this is a short set of tests that you can sail through pretty quickly if you’re already a CSS expert. But they offer good coverage of grid basics and culminate in a satisfyingly tricky challenge.

6

Grid Attack

The creators of Flex Box Adventure have also produced a grid equivalent of their Flexbox game, Grid Attack. It works in just the same way, with three difficulty settings, plenty of supporting hints, and guided progression. Instead of 24 levels, however, this game has a whopping 80, reflecting the more complicated nature of CSS grid.

Grid Attack throws you in at the deep-end somewhat; it can be tricky to work out exactly what the first level even wants you to do. But once you’re familiar with the diagram style, the large number of levels makes for a pretty gentle learning curve.

One really nice feature is the inspector, which draws a gridline overlay to help you orient yourself. This is a bit like the grid layout your browser dev tools may offer, but it’s specifically tailored to each challenge. The inspector can be a bit of a spoiler, so make sure to hide it if you’re after a real challenge.

Related

What Your Function Keys Do in Chrome DevTools

If you use Chrome DevTools, knowing what the function keys do could speed up your workflow. Here’s a list of what they do.

7

Anchoreum

Once you’ve mastered Flex and Grid, it’s time to explore some other aspects of CSS. From the creator of Flexbox Froggy and Grid Garden, Anchoreum deals with CSS anchor positioning.

Anchor positioning is a newer scheme that lets you position an element relative to another. In fact, it’s so new that not all browsers support it; if you’re using Firefox or Safari, this game may not work for you.

Anchoreum is longer than the previous two games in the series, with a total of 40 challenges. I’ll confess that I wasn’t even aware of anchor positioning when I discovered this site. But, once again, the game does a great job combining explanations, hints, and puzzles to teach the fundamentals.

8

CSS Diner

CSS is about more than layout, and games can teach you about more fundamental syntax too. Selectors are an important yet complicated part of CSS, and CSS Diner’s set of 32 challenges is a great way of sharpening up your skills.

Each level has a very simple requirement: type the selector that matches the given elements. This ranges from selecting all elements with the same tag name to selecting every second element in a list, starting from the third.

Most of these challenges are on the easy side, so experts might try to speedrun it instead. But some of the nuances of type selectors or attribute pattern matching can stump even CSS wizards, so don’t get too complacent!

9

CSS Speedrun

Talking of speedruns, here’s a real one. CSS Speedrun is probably the most basic recommendation on the list, but it’s a short and fun way to challenge yourself.

Each of the ten levels presents some HTML and tasks you with writing a selector to identify the highlighted elements. It may seem much like CSS Diner, but CSS Speedrun has a couple of interesting differences.

For one, a timer adds to the pressure, counting the number of seconds it takes you to complete each task. And these tasks are on a slightly trickier level. For example, you’ll need to remember how to structure a complex nth-child selector on just the second level.

Fortunately, each level has two forms of hint. The first is a simple in-page popup, while the second is a direct link to the relevant MDN documentation. The site also acknowledges that their may be more than one solution, showing the expected “devs choice” when you complete each challenge.

10

CSSBattle

This one is not for the faint-hearted! Unlike any of the other games featured here, CSSBattle has regular, daily challenges. Each of these requires you to recreate a specific shape or pattern using CSS alone.

Many of the games here are liberal in the solutions they accept, but CSS Battle takes this a step further. You can edit the markup and CSS in whatever way suits you; the only thing that matters is the end result.

CSS Battle demonstrates quite how powerful style sheets can be. You may not believe that some of the requested shapes can be produced at all, but with perseverance, experimentation, and a lot of CSS knowledge, they are achievable.

The game is free, although you’ll need to register to submit your score and pay a subscription for full access to past challenges. The scoring is a little unpredictable (exactly how do you measure the similarity between two images anyway?) but features like the visual diff and slide comparison will assist your efforts.