Gain insights into advanced CSS concepts, delve into responsive design, explore animations, learn practical projects, and discover powerful tools. Perfect for backend engineers and budding developers.

My Goal is to take you from a beginner (or intermediate) CSS user to becoming one of the best CSS devs you know! 


👉🏻 COURSE CONTENT?
1. A detailed look at CSS Fundamentals
2. Practical SVG for today
3. A Sane Guide to Responsive Design
4. Creating sleek Interfaces with CSS Animations and Transitions
5. Writing Maintainable CSS and tips for CSS at Scale
6. Learn the CSS Grid by Building ... wait for it! 😉
7. Get a Private slack Invite where you can ask me anything
8. Gain a Solid Understanding of CSS Fundamentals 
9. Build Practical Projects
10. Flexbox, Variables, Gradients, Backgrounds, Responsive Images, Handy pro tools, and many more! 

👉🏻 WHAT ARE THE REQUIREMENTS?
The course assumes no previous knowledge of CSS

👉🏻 WHAT'S THE TARGET AUDIENCE?
1. Backend Engineers looking to level up their frontend design skills 
2. Budding developers looking to create beautiful applications 
3. Generally, engineers who want to stand out by truly understanding the internals of CSS

Ready to upgrade?

The Complete Advanced Guide to CSS

Assume you had a box of clothes. 

You fold your clothes and have them kept neatly in this box.

I found you a good picture of the box. See below 😀. 



What if for some reason you needed more space within the box? 

You do NOT want the clothes to touch the edges of the box.  You want the box to expand in size and create an empty space that separates the clothes from the edges of the box. 

How would you do this? 

This is kinda difficult as boxes do NOT expand magically. 

Now, back to CSS. 

This box may represent any `html` element. Within this box we can choose to nest other elements, include texts or images. This represents the clothes inside the box. 

Unlike the boxes in the real world, we can choose to create empty spaces within the CSS box! 

This can be for many reasons such as taking advantage of white space and creating a breathing space within your design. To do this, **padding** to the rescue! 

To include a padding within your element, aka _inner space_, use the **padding** property. 

For example: 

```css

div {
    padding: 10px
}

```

This will add a `10px` padding on **all** sides, within the boundaries of the element. 

To target specific sides witin the box, do this: 

```css

div {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
}

```

In a much later lesson, we will take a second look at the `padding` shorthand. For now, this will suffice. 


<br />
<br />

# Exercise
Below is a `div` that contains the text, "I am an happy element". Give this `div` a padding of `10px` on the left, `15px` on the right, `21px` at the top, and `18px` at the bottom. Use the long form, setting each direction explicitly. 

The CSS padding properties are used to generate space around content. What does that mean? We take a playful look at the padding area - with illustrations.

Introduction

Getting started with CSS

Oh My Selectors!

CSS Fundamentals Everyone Should Know

Colors, colors, colors!

We all Need Units

Typography in CSS

The Box Model

Challenge: Hands-on Practice with Texts, Margin, Padding and Borders

Getting creative with Backgrounds

Project: Build a Movie Order Page

Making Sense of CSS Gradients

Hands-on Practice with Gradients

Project: Build a Sign Up Page for a Startup

{New} Teach Me Positioning Like I'm Five

{New} A Detailed Look at CSS Variables ( a.k.a Custom Properties )

{New} CSS Variables Real World Applications

{New} Long Live the CSS Grid

Final Words

The Padding Area