Learn CSS with 10 fun games

If you have dreams and dry goods, search [Moving the World] pay attention to this Shawanzhi who is still washing dishes in the early morning.

This article has been included in GitHub https://github.com/qq449245884/xiaozhi , and there are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.

Mastering CSS can be quite a challenge. But there is no shortcut, only more practice and more writing. There are some interesting ways to learn, though, and that is through play. This article will focus on ten amazing games that you can play and learn CSS.

1. Flexbox froggy

Address: https://flexboxfroggy.com/

"Flexbox froggy" is a very interesting game, mainly used to learn the layout of flex . It has 24 levels with progressively increasing difficulty. We can use the properties related to flex to place the frog in the correct position and pass the level.

2. Flexbox defense

Address: http://www.flexboxdefense.com/

"Flexbox defense" is also a game to learn the layout of flex . In this game, we have to pass the layout of flex and move the turret to the correct position to defend a road from being attacked. It has 12 levels of progressively increasing difficulty and the deeper the program for examining flex.

3. Knights of the Flexbox Table

Address: https://knightsoftheflexboxtable.com/

It is also a game for learning the layout of flex , but it adopts the TailwindCSS style. If you like to use TailwindCSS, then this game is suitable for you. It has 18 levels, and the difficulty gradually deepens. The program to examine flex is also deeper.

4. Flex Box adventure

Address: https://codingfantasy.com/games/flexboxadventure/play

Flex Box adventure is also a game to learn the layout of flex . It has 24 levels. In addition to different styles, there is also a more humanized experience, that is, there are prompts. If we can't think of the answer, we can find the correct answer we want through the prompt.

5. Flexbox zombies

Address: https://mastery.games/flexboxzombies/

Flexbox zombies is also a learning flex layout game. The graphics in this game are super nice! I was blown away by how cool this storyline was.

6. Grid garden

Address: https://cssgridgarden.com/

Grid garden is a super fun way to learn CSS grids. We have to use a grid layout to make sure all the carrots get water to pass the level. It has 28 levels to practice with tons of CSS grid options!

7. Grid attack

Address: https://codingfantasy.com/games/css-grid-attack/play

This game is developed by the same author of "Flexbox adventure", and the game experience is also very good.

In the game we have to use CSS grids to change the land so that the demons cannot survive. It has 80 levels and allows us to choose a super fun way to learn CSS grids.

8. CSS Diner

Address: https://flukeout.github.io/

CSS Diner is a game for learning CSS selectors. Through the title, we need to write a specific css selector to select the specified items on the table to pass the test. When we select an item, interesting animation effects will appear to enhance our game experience.

9. Guess CSS

Address: https://www.guess-css.app/

This game is very similar to CSS Diner. It gives a picture and then provides 3 options. We construct our answers in our minds based on our existing knowledge, and then choose one of the 3 options that we think is the correct answer to pass the level.

10. CSS Speedrun

Address: https://css-speedrun.netlify.app/

In this game, we have to write the corresponding CSS selector according to the arrow sign, there is the timing of the title, we have to do it as fast as possible, it is a good thing for developers who like to increase the difficulty in the game Great challenge. .

This game has ten levels, you can play it several times to improve your problem solving speed. I got stuck on the third question, do you know how to solve it?

---

The possible bugs in the editing of cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful BUG monitoring tool Fundebug .

Reference: https://dev.to/dailydevtips1/10-amazing-games-to-learn-css-382i

communicate with

If you have dreams and dry goods, search [Moving the World] pay attention to this Shawanzhi who is still washing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, and there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.