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

## Borderline direction agnostic zombies

- `border-inline-start`: The border properties for the start of the inline
direction (the writing-direction-agnostic version of border-left)
- `border-inline-end`: The border properties for the end of the inline direction
(the writing-direction-agnostic version of border-right)
- `border-block-start`: The border properties for the start of the block
direction (the writing-direction-agnostic version of border-top)
- `border-block-end`: The border properties for the end of the block direction
(the writing-direction-agnostic version of border-bottom)
```CSS
.bordering-direction-agnostic-zombies {
    border-inline-start: 5px solid #960B0B;
    border-inline-end: 5px solid blue;
    border-block-start: 5px solid green;
    border-block-end: 5px solid purple;
}
```

# Borderline direction agnostic zombies

- `border-inline-start`: The border properties for the start of the inline
direction (the writing-direction-agnostic version of border-left)
- `border-inline-end`: The border properties for the end of the inline direction
(the writing-direction-agnostic version of border-right)
- `border-block-start`: The border properties for the start of the block
direction (the writing-direction-agnostic version of border-top)
- `border-block-end`: The border properties for the end of the block direction
(the writing-direction-agnostic version of border-bottom)
```CSS
.bordering-direction-agnostic-zombies {
    border-inline-start: 5px solid #960B0B;
    border-inline-end: 5px solid blue;
    border-block-start: 5px solid green;
    border-block-end: 5px solid purple;
}
```

Get introduced to the border property 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

Border Property

Borderline direction agnostic zombies