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

In the [Zombie Width and Height](https://www.educative.io/pageeditor/10370001/5934169064996864/5340598377119744) lesson, we learned the size property of inline and block layouts. In this lesson, let's have a look at padding and margin properties. 
## Padding direction agnostic zombies
- `padding-inline-start`: The size of the padding at the start of the inline
direction

  (This is the writing-direction-agnostic version of padding-left.)
- `padding-inline-end`: The size of the padding at the end of the inline
direction

  (This is the writing-direction-agnostic version of padding-right.)
- `padding-block-start`: The size of the padding at the start of the block
direction

  (This is the writing-direction-agnostic version of padding-top.)
- `padding-block-end`: The size of the padding at the end of the block direction

  (This is the writing-direction-agnostic version of padding-bottom.)

```CSS
.padding-direction-agnostic-zombies {
    padding-inline-start: 1em;
    padding-inline-end: 1em;
    padding-block-start: 0.5em;
    padding-block-end: 0.5em;
}
```

Experiments to try:
   1. What happens if you remove the `box-sizing` property?

In the [Zombie Width and Height](https://www.educative.io/pageeditor/10370001/5934169064996864/5340598377119744) lesson, we learned the size property of inline and block layouts. In this lesson, let's have a look at padding and margin properties. 
# Padding direction agnostic zombies
- `padding-inline-start`: The size of the padding at the start of the inline
direction

  (This is the writing-direction-agnostic version of padding-left.)
- `padding-inline-end`: The size of the padding at the end of the inline
direction

  (This is the writing-direction-agnostic version of padding-right.)
- `padding-block-start`: The size of the padding at the start of the block
direction

  (This is the writing-direction-agnostic version of padding-top.)
- `padding-block-end`: The size of the padding at the end of the block direction

  (This is the writing-direction-agnostic version of padding-bottom.)

```CSS
.padding-direction-agnostic-zombies {
    padding-inline-start: 1em;
    padding-inline-end: 1em;
    padding-block-start: 0.5em;
    padding-block-end: 0.5em;
}
```

Experiments to try:
   1. What happens if you remove the `box-sizing` property?

Get introduced to the padding and margin properties of inline and block layouts.

Before We Begin

Zombie Inline Block Heads

Dividing the Horde (into Columns)

Weird Flexbox, but Okay, Zombie

CSS Gridiron Zombies

Conclusion

Padding and Margin Properties

Padding direction agnostic zombies