Gain insights into advanced and modern CSS concepts with a humorous twist. Explore direction-agnostic layouts, columns, flexbox, and grid, with engaging challenges at each stage.

Modern CSS Layout Decking Zombies with Style.png

In this course, you will learn advanced and modern CSS using zombies, silliness, and a sense of humor. If you’re looking for a course that’s accessible to those without technical training or inclination and/or don’t mind laughing a bit while learning, this course is for you.

You will start by learning some basic concepts of inline and block direction along with how they are used to style direction-agnostic layouts. Then, you will move towards learning CSS columns, followed by flexbox and finally grid. You will face a challenge at the end of each chapter that will test your learning.

Modern CSS Layout: Decking Zombies with Style

## Challenge
Use grid properties to style the zombies’ positions and placement. The basic set of styling has been done for your ease.

The grid should consist of two rows and three columns with a total of four child elements. The first zombie *Major Thomas J. McGillicutty* should be on the left side of the first grid element. The second zombie *Wayne J. Bebop* should be on the right side of the second grid element. The third zombie *Sterling K. Stealth* should be on the bottom of the third grid element and this element should span vertically till the end of the second row. The fourth zombie *Capt’n Phillip S. Crunch* should be on the center of the fourth grid element and this element should span horizontally till the end of the second column. Your output should look and behave like this when you resize your browser window:





# Challenge
Use grid properties to style the zombies’ positions and placement. The basic set of styling has been done for your ease.

The grid should consist of two rows and three columns with a total of four child elements. The first zombie *Major Thomas J. McGillicutty* should be on the left side of the first grid element. The second zombie *Wayne J. Bebop* should be on the right side of the second grid element. The third zombie *Sterling K. Stealth* should be on the bottom of the third grid element and this element should span vertically till the end of the second row. The fourth zombie *Capt’n Phillip S. Crunch* should be on the center of the fourth grid element and this element should span horizontally till the end of the second column. Your output should look and behave like this when you resize your browser window:





Evaluate yourself by solving the challenge given below.

Before We Begin

Zombie Inline Block Heads

Dividing the Horde (into Columns)

Weird Flexbox, but Okay, Zombie

CSS Gridiron Zombies

Conclusion

Grid Challenge

Challenge