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

# How do you Define a Grid?
Just like Flexbox, everything begins with a one-liner. `display: grid` or `display:inline-grid` for an inline version.

For example, to make a certain `div` a grid container, do this:

```css 

div {
 display: grid;
}

```

 

# How do You Create Columns and Rows?
A grid without columns and rows is *kinda* pointless.

To create columns and rows within a grid container, you use the two new CSS properties: `grid-template-columns` and `grid-template-rows`.

So how do you use these? Pretty simple.

`grid-template-columns` defines the placement of the **columns** while `grid-template-rows` defines the placement of the **rows** within the grid container. 

How it actually works is you pass in length values into these properties, and they create row and column tracks within the grid container.


Look at an example below:

```css

grid-template-columns: 100px 200px 300px

```

This will create 3 new columns within the grid container. The first with a length of `100px`, the other, `200px` and the last, `300px`.

 


![https://cdn-images-1.medium.com/max/1000/1*OGJmxXekTwSlW-aoTeSXEw.png](https://cdn-images-1.medium.com/max/1000/1*OGJmxXekTwSlW-aoTeSXEw.png)

 

```css

grid-template-rows: 100px 200px 300px

```
This will create 3 new rows within the grid container. The extents are shown below

 

![https://cdn-images-1.medium.com/max/1000/1*TcGMy7iMxXoRbqs8hL0NHw.png](https://cdn-images-1.medium.com/max/1000/1*TcGMy7iMxXoRbqs8hL0NHw.png)

 

Now put these together, and you get a full grid — with rows and column defined.

```css

.grid-container {
 display: grid;
 grid-template-columns: 100px 200px 300px
 grid-template-rows: 100px 200px 300px
}

```

Now that you understand the basic terminologies, like an adventurous kid, let’s get kicking!

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

CSS Grid, Baby Steps

How do you Define a Grid?

How do You Create Columns and Rows?