DEV Community

Cover image for Learn CSS By Playing Games ๐Ÿ‘พ
Suprabha
Suprabha

Posted on

Learn CSS By Playing Games ๐Ÿ‘พ

Learning CSS can be a frustrating experience sometime. One of the best things about learning to code is that people who are good at coding also happen to have the skills to make games that teach other people to code.

Here are some games which help you to master CSS.

1. Flexbox Froggy

Flex box froggy

This game is about Flexbox and it covers flex properties like align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and order in 24 different levels.

Yeah, last level is bit challenging ๐Ÿ˜‰

2. Flexbox Zombies

FlexBox Zombies

Here we use Flexbox to position the heroโ€™s crossbow and hit the zombies and survive along the game.
Each section unravels part of the plot, gives you expertise over a new flexbox concept, and presents zombie survival challenges that force you to solidify your new skills like your life depends on it.

3. Flexbox defense

flexbox-defence

Flexbox defense is based on the classic tower defence games, but to place our items we write CSS instructions. We use the justify-content property on the main container to move the single towers into effective positions.

4. Grid Garden

Grid garden

Grid Garden game features 28 levels, starting with easy difficulty and gradually increasing it. Use the various grid properties to water and grow your carrot garden. Grid Garden has a code editor and visual area so you instantly see your result.

5. CSS Battle

CSS battle

CSS Battle is more of an online challenge than an actual CSS practice game, the objective is to write HTML and CSS code to replicate the given target image in the least code possible. This game is constantly updated with new challenges. It has a global ranking system and the ability to re-play each challenge so you can improve your own results.

6. CSS Diner

CSS Diner

The CSS Diner webapp is really fun and genuinely educational for developers of all skill levels. Youโ€™ll go through 26 different levels of increasing difficulty. The first few levels teach core fundamentals like element selectors and class selectors. In the later levels youโ€™re working with advanced concepts like :only-of-type and :not(x).

7. CodePip

Code pip

We already checked 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.

8. CodeMonkey

Code monkey

CodeMonkey teaches coding using CoffeeScript, a real programming language, to teach you to build your own games in HTML5. Itโ€™s aimed at coding for kids, but itโ€™s definitely fun for adults, too.

9. CodinGame

Coding Game

CodinGame offers up fun free games to help learn more than 25 programming languages, including JavaScript, Ruby, and PHP. One of the great things about CodinGame is that you can play with friends or colleagues, and also enter international coding competitions.

10. CodeCombat

Code combat

Learn Python, JavaScript, CoffeeScript, or the Lua game scripting language. On the beginner Dungeon level, youโ€™ll move your Hero through the game using some basic commands according to the tutorial alongside the game.

Games using pure CSS ๐Ÿ”–

1. Roadmap

Roadmap

Skill and speed are required to solve this little game, only made with CSS and HTML. It is not directly teaching CSS, but looking into the source code teaches a lot about clip-path, transform and animation with @keyframes!

2. Carnival

Carnival

You only have 8 seconds to hit all targets! A nice little CSS game using checkboxes and CSS animations.

3. Service Workies

Service workies

In this adventure you'll learn how to avoid the PWA pitfalls. You'll level up your skills and thrive with Service Workers. Perhaps even slay the savage beasts that have plagued the poor village workies for centuries! A registration is required.

4. Unfold

Unfold

This isn't exactly a game but more an interactive presentation about CSS 3D Transforms. Give it a go, it not boring ๐Ÿ˜‚, animations are really awesome which has been done by pure CSS.

Paid Games ๐Ÿค‘

Grid Critters

Grid cutters

Your journey to master CSS Grid begins on the mysterious planet Grideros. Your mission is to use your ship's powerful Grid tool to save alien critters from extinction. A registration is required.

๐ŸŒŸ Twitter ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป suprabha.me ๐ŸŒŸ Instagram

Top comments (6)

Collapse
 
afif profile image
Temani Afif

my website isn't that bad too: css-challenges.com/ :p

Collapse
 
niksh25 profile image
Nikhil Singh

WOW!
This is amazing!

Collapse
 
priyadarshu profile image
Priyadarshini Chettiar

Thanks for sharing ๐Ÿ˜ƒ

Collapse
 
glenncogar profile image
Glenn Cogar

Thanks ๐Ÿ™ so much fun I didn't realise I could have with CSS ๐Ÿ˜‚

Collapse
 
keefdrive profile image
Keerthi

Nice collection. Agree learning through games can be effective rather than always going through theory.

Collapse
 
mxglt profile image
Maxime Guilbert

Really cool post! Thanks!