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

## Break those zombies down
`break-after`: This instructs the browser whether to break a page, region, or
column after an element. If you’re familiar with `page-break-after`, this has
the same functionality as that, but they changed the name to generalize it since it
works on more than just pages. `break-after` can have the following values:
- `auto`: Allows but doesn’t require breaks after the element it appears on
- `avoid`: Avoids any break (column, page, or region) after the element
- `page`: Forces a page break after the element
- `avoid-page`: Avoids a page break after the element

`break-before`: This is the same as break-after, but it works before the
element in question. It takes the same values as `break-after`. This more generalized property name replaces `page-break-before`.

`break-inside`: This is the same as `break-after` and `break-before` (and takes the
same values, except for `page`), but it governs whether or not a page break
can happen inside an element.

```CSS
.i-break-for-zombies-before {
    break-before: page;
}
.i-break-for-zombies-inside {
    break-inside: avoid;
}
.i-break-for-zombies-after {
    break-after: avoid-page;
}
```
__Experiments to try:__
   1. Add the classes to different elements and see how that affects the way columns are separated.
   2. Flip each of the break properties to auto and watch how the column distribution changes.

# Break those zombies down
`break-after`: This instructs the browser whether to break a page, region, or
column after an element. If you’re familiar with `page-break-after`, this has
the same functionality as that, but they changed the name to generalize it since it
works on more than just pages. `break-after` can have the following values:
- `auto`: Allows but doesn’t require breaks after the element it appears on
- `avoid`: Avoids any break (column, page, or region) after the element
- `page`: Forces a page break after the element
- `avoid-page`: Avoids a page break after the element

`break-before`: This is the same as break-after, but it works before the
element in question. It takes the same values as `break-after`. This more generalized property name replaces `page-break-before`.

`break-inside`: This is the same as `break-after` and `break-before` (and takes the
same values, except for `page`), but it governs whether or not a page break
can happen inside an element.

```CSS
.i-break-for-zombies-before {
    break-before: page;
}
.i-break-for-zombies-inside {
    break-inside: avoid;
}
.i-break-for-zombies-after {
    break-after: avoid-page;
}
```
__Experiments to try:__
   1. Add the classes to different elements and see how that affects the way columns are separated.
   2. Flip each of the break properties to auto and watch how the column distribution changes.

Before We Begin

Zombie Inline Block Heads

Dividing the Horde (into Columns)

Weird Flexbox, but Okay, Zombie

CSS Gridiron Zombies

Conclusion

Break Properties

Break those zombies down