Play and Learn CSS | Learn CSS by playing a Game | Gaming based learning

{tocify} $title={Table of Contents}

CSS is hard! Not anymore.

Here is the list of 6 awesome free sites to learn CSS by playing games:

1. CSS Grid garden

→ Learn CSS Grid Layout by planting trees and growing your garden with 28 different levels.

👉 Grid Garden - A game for learning CSS grid (cssgridgarden.com)

2. Flexbox Zombies

→ Flexbox Zombies is a fun game where we use Flexbox to position hero’s crossbow and hit the zombies and survive.

👉 Flexbox Zombies (mastery.games)

3. Flexbox froggy

→ Learn Flexbox by guiding the frog to the lilypad using diffent Flexbox properties you have learnt.

👉 Flexbox Froggy - A game for learning CSS flexbox

4. CSS Diner

CSS Dinner is a game to learn different selectors in CSS and organising them in a way to prepare a good looking meal.

👉 CSS Diner - Where we feast on CSS Selectors! (flukeout.github.io)

5. CSS battle

→ CSS Battle is a online interactive playing platform where you can invite your friends and make use of CSS properties to build certain shapes and battle against them.

👉 CSSBattle

6. Flexbox diffense

→ In this game, we use the CSS Flexbox properties in building a strong tower and stopping enemies.

👉 Flexbox Defense

Reference:

Linkedin post from 

(1) Pradeep Pandey | LinkedIn