5 Games to learn CSS in fun way

[{"selector":"#anim-72fa292b-ff35-4839-8afc-2facb61bbd53","keyframes":{"transform":["translate3d(109.66767%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b5a4139d-113c-4841-9105-91ac837c3faf","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ada6a8de-990c-444f-84ae-e5de511f0ca5","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Arrow

1. Grid Garden

[{"selector":"#anim-4e6b8d00-81c8-4191-85cf-5b04bf6528f3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-447e1aaf-e49a-41e7-b35d-2c84dc0c08d1","keyframes":{"transform":["translate3d(95.00000%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Arrow

2. CSS Diner

[{"selector":"#anim-ecdad71a-3fe3-4c82-8594-cd5b979dbf4e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-963f683f-8bf8-4fc3-8939-2f8c2e6ec98d","keyframes":{"transform":["translate3d(95.00000%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Arrow

3.Flexbox Froggy

[{"selector":"#anim-eb77abf8-79ff-4980-9a29-2b139a53115b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ace0884d-997d-4571-adfc-0adc196b8f7e","keyframes":{"transform":["translate3d(90.75000%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Arrow

4. Flexbox Defense

[{"selector":"#anim-b44274d0-123c-49e1-9930-55f444a1ed5a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ab7f6dec-6830-4e6c-ba82-e81baf92d3e9","keyframes":{"transform":["translate3d(90.99999%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Arrow

5. CSS battle

[{"selector":"#anim-92c251c5-78e7-4311-b705-451a1a5983c5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2a062b5f-b3ca-4b5a-8696-a774bd550927","keyframes":{"transform":["translate3d(90.99999%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Arrow

You'll learn how the core aspects of CSS

[{"selector":"#anim-9da51a4c-5d53-4f48-8fe2-f4b3ba84466a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bbf8a76e-70b3-4acb-8619-44e3152dcb0e","keyframes":{"transform":["translate3d(104.59770%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Arrow

Now you're front end developer

[{"selector":"#anim-0e1203eb-aada-4a34-bf30-29231c01efae [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(1.530612239756561%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

Join our community to learn more 🔻

5 Games to learn CSS in fun way

1. Grid Garden

This is a great game to learn about the css grid, and it has 28 levels to master grid.

2. CSS Diner

This is an amazing game to learn about selectors in css, it has 32 levels

3.Flexbox Froggy

28 levels to go through to make you master flexbox!

4. Flexbox Defense

This game covers all flex properties in 12 levels with animations

5. CSS battle

Its a really fun game where you use your CSS skills against an opponent and make shapes

You'll learn how the core aspects of CSS

Now you're front end developer

Join our community to learn more 🔻

Join Now