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

# Don't you self justify, zombie!

`justify-self`: This lets you set how an item is aligned within its context, i.e. its column. 

> __Note:__ The properties we’ve discussed are like genetic zombie contagions—(set on the parent), while this and the other “self” properties are set within the item itself.
```CSS
.zombie-item {
    justify-self: stretch;
}
```
`justify-self` can have the following values:
- `start`: This aligns the item with the start of the column that it is in. In left-to-right languages, that’s the left.
- `end`: This aligns the item with the end of the column that it is in. In left-to-right
languages, that’s the right.
- `center`: This centers the item within the column.
- `stretch`: This stretches the item to fill the width of the column.



Learn about grid self properties like justify-self, align-self, and place-self.

Before We Begin

Zombie Inline Block Heads

Dividing the Horde (into Columns)

Weird Flexbox, but Okay, Zombie

CSS Gridiron Zombies

Conclusion

Placing Content in Your Post-Apocalyptic Grid - III

Don’t you self justify, zombie!