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

> __Night of the living tip:__ 
>
>While orphans and widows both have wide
support, neither works in Firefox. If you’re
testing in Firefox, and they aren’t working,
it is because of that. That said, they shouldn’t cause any issues in Firefox if you include them.

# Zombie orphans
`orphans`: This property sets the minimum number of lines that need to be
shown at the bottom of a page, region, or column. In other words, if you set
it to two and only one line of the next paragraph fits into the last part of
that page, the region, or column, then that line will be pushed to the next page,
the region, or column.
```CSS
.horde-layout-columns {
    orphans: 2;
}
```

# Undead widows
`widows`: is similar to orphans, but from the other direction. If the last line
(or lines) of a paragraph go on to the next page, region, or column, it’s
called a widow. If the widow property is set to two, then there must be at
least two lines transferred to the next page, region, or column.
```CSS
.horde-layout-columns {
    widows: 2;
}
```
__Experiments to try:__
   1. Look for it mainly in the p tags. If you're having trouble seeing it, set the orphans, widows, and column numbers high so that you have more chances to see it at work. Take the right edge of your browser and slowly bring it back and forth. Watch how the paragraphs change as they move between columns.
   2. Add some paragraphs with dummy text and see how it works. Will a 1 work? How about a 0 or negative number?

Learn about orphans and widows properties.

Before We Begin

Zombie Inline Block Heads

Dividing the Horde (into Columns)

Weird Flexbox, but Okay, Zombie

CSS Gridiron Zombies

Conclusion

Orphans and Widows Properties

Zombie orphans