4 Funny Games Helps To Learn CSS Easily


Share

1. FLEXBOX FROGGY

Help Froggy and friends by writing CSS code! In this game, you must bring the frogs home to their lilypads by mastering CSS flexbox, a powerful new module that makes layout a breeze. With it you can control alignment,spacing,and wrapping of elements on the webpage using only one or two lines of code.


Learning Objectives:

Introduce the fundamentals of using CSS flexbox to position elements on a webpage.


Prerequisites:

For beginners of CSS flexbox. Familiarity with the basics of CSS is a plus but not required.


2. GRID GARDEN

How well can you tend to your carrot garden using CSS grid? In this game, you must water your carrot crops and poison the weeds by mastering CSS grid, a powerful new module that makes 2-dimensional grid layouts a piece of cake. With it you can define columns,rows,and grid template areas.


Learning Objectives:

Introduce the fundamentals of using CSS grid to create layouts on a webpage.


Prerequisites:

For beginners of CSS grid. Familiarity with the basics of CSS is a plus but not required.


3. CSS DINER

If you konw the basic of CSS selectors, use the Dinner table to practice your CSS skills. Here you have plates and fruits placed on a dinner table and your task is to select the various elements using selectors.


Learning Objectives:

Introduce the fundamentals of using CSS Selectors used in webpage.


Prerequisites:

For beginners of CSS Selectors. Familiarity with the basics of CSS is a plus but not required.



4. FLEXBOX DEFENCE

in flex box defense Your job is to stop the incoming enemies from getting past your defense. Unlike other tower defense games, you must position your tower using CSS! We'll start with container properties. A flexbox container has a main axis and a cross axis.


Learning Objectives:

Introduce the fundamentals of using CSS Containers used in webpage.


Prerequisites:

For beginners of CSS Container. Familiarity with the basics of CSS is a plus but not required.




Share Author Section