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

# An orderly apocalypse
`order`: It is used on individual flexed elements. It sets or changes the order of
those items in the flexed layout. It’s important to know that if order has not been set, order defaults to 0. The lowest order number appears in the leftmost/topmost position, depending on `flex-direction`. If items have the same order numbers, they go in source order. 
>__Note:__ This does not change the source order and can thus hurt accessibility if reordering causes confusion.
```CSS
.zombie-item {
    order: 1;
}
```

__Experiments to try:__
1. What happens when you change the `flex-direction`?
2. What happens if you use a negative number?
3. Add an order: 3 to the `z1` class. What happens?

Learn about the order and align-self properties of flexbox.

Before We Begin

Zombie Inline Block Heads

Dividing the Horde (into Columns)

Weird Flexbox, but Okay, Zombie

CSS Gridiron Zombies

Conclusion

order and align-self Properties

An orderly apocalypse