Play games and learn CSS. Hey, I just play!

Delicious value ：

taste ： Bubble cold noodles

I found several good models in the community before Study CSS The game of , After the experience, I found that it was good , Share with you .

For beginners ,CSS Various grammars may be a little boring , And it's important W3C in CSS There are not only many related documents , And the reading experience is terrible .

• www.w3.org/TR/?title=c…
• www.w3.org/TR/css-synt…

I've heard some back-end students vomit before CSS It's hard to learn , Even if I learned , If you don't use it for a long time, you will forget .

Actually , We might as well play games to deepen the learning and understanding of boring concepts , Practice the basic operations you will use in daily development , Develop muscle memory .

Learning while playing , Doesn't it smell good ？

1.Flexbox Froggy

• Portal

Flexbox frog , altogether 24 A level , Every level has grammar tips , mouse hover To the syntax attribute , All its attribute values will be displayed .

adopt Flex Syntax programming , Move the frog to the target lotus leaf , Help you deepen your memory .

Quack ～

2.Flexbox Defense

• Portal

Flexbox Tower Defense , altogether 12 Tower defense game of three levels , adopt Flex Put the defense tower , Block enemy soldiers from passing .

( The enemy also has 30 Seconds to the battlefield , Crush them ！ )

3.CSS Diner

• Portal

CSS dinner , altogether 32 A level , From simple to difficult , adopt CSS The selector syntax selects the beating plate for customs clearance , Help you get familiar with the grammar related to memory selectors .

Canteen waiter ： I'm good at picking up dishes ！

4.Grid Garden

• Portal

Grid The garden , common 28 Turn off , adopt Grid Syntax programming , planting , Water your own carrot garden , Help you know and remember Grid grammar .

5.Flexbox Zombies

• Portal

Flexbox Corpse , common 12 chapter , There are challenge rounds with increasing difficulty in each chapter .

Own plot , Cool animation and sound , use Flex Grammar hits zombies , Highly recommended experience ！！！

6.Grid Critters

• Portal

Grid animals , Hundreds of levels , Need to pay .

Your journey from the mysterious Grideros The planet begins , Your mission is to use your ship's powerful grid tools to save alien creatures from extinction .

The author is an expert with more than ten years of front-end experience UI Architects , In order to help people master CSS Grid Layout , He chose full-time and invested a lot of energy in developing the game .

Learning itself is anti human , But if you play while learning , Are you willing to for your love , A little more persistence ？

If you also know some fun learning CSS The game of , Then share it with you in the comment area ～

Reference link

dev.to/suprabhasup…

️ Three strikes of love

1. If you think the food and wine in the canteen are still palatable , Just like it and support it , Yours Fabulous It's my biggest motivation .

2. Pay attention to the front desk of official account , Eat every meal well ！

3. give the thumbs-up 、 Comment on 、 forward === Hurry up ！