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

## When to use what
With all this knowledge under your belt, you have multiple options to achieve an apocalyptic CSS layout. It is important to know which technique works best under a given situation. The following table summarizes the information:

|__Property__   |  __Complexity level__ |  __Great at__ | __Terrible at__  |
| - | :- | :- | :- |
|__Tables__   | Low to high, depending on the implementation  | Rigid and even complex layouts if you can get away with a single size screen and can build for that (which is unlikely in today’s multi-screen environment)  | Anything responsive; also, there is no separation of content and visual structure  |
| __Positioning__  | Low  | A small number of design/content elements placed in odd locations or only slightly offset from the regular flow  | Any complex layout  |
|__Floating__   | Low  | Allowing content to wrap around an image or other visual element, two columns or even three columns as long as the content in each column is separate from the others  |Any complex layout  |
| __Columns__  | Medium to low  | Separating large swaths of text into connected columns  | Complex layouts that contain more than text |
| __Flexbox__  | Medium  |Lining items up either horizontally or vertically. And being flexible to multiple screen sizes  | Lining things up in more than one direction at a time and keeping things aligned |
| __Grid__  | High  | Complex layouts and keeping things aligned in two directions at the same time | Minor layouts (too complex for quick needs; shines at page-wide/section-wide layout) |

But the point to note is that all are excellent tools for creating complex layouts, and you can even use them in combination.

# When to use what
With all this knowledge under your belt, you have multiple options to achieve an apocalyptic CSS layout. It is important to know which technique works best under a given situation. The following table summarizes the information:

|__Property__   |  __Complexity level__ |  __Great at__ | __Terrible at__  |
| - | :- | :- | :- |
|__Tables__   | Low to high, depending on the implementation  | Rigid and even complex layouts if you can get away with a single size screen and can build for that (which is unlikely in today’s multi-screen environment)  | Anything responsive; also, there is no separation of content and visual structure  |
| __Positioning__  | Low  | A small number of design/content elements placed in odd locations or only slightly offset from the regular flow  | Any complex layout  |
|__Floating__   | Low  | Allowing content to wrap around an image or other visual element, two columns or even three columns as long as the content in each column is separate from the others  |Any complex layout  |
| __Columns__  | Medium to low  | Separating large swaths of text into connected columns  | Complex layouts that contain more than text |
| __Flexbox__  | Medium  |Lining items up either horizontally or vertically. And being flexible to multiple screen sizes  | Lining things up in more than one direction at a time and keeping things aligned |
| __Grid__  | High  | Complex layouts and keeping things aligned in two directions at the same time | Minor layouts (too complex for quick needs; shines at page-wide/section-wide layout) |

But the point to note is that all are excellent tools for creating complex layouts, and you can even use them in combination.

Before We Begin

Zombie Inline Block Heads

Dividing the Horde (into Columns)

Weird Flexbox, but Okay, Zombie

CSS Gridiron Zombies

Conclusion

Finding the Right Zombie Trashing Tool

When to use what