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 to Create the Basic Grid Setup for Catty Music

We will kick off with a very basic `html` document.

```html 

<body>
   <aside></aside>
   <main></main>
   <footer></footer>
</body>

```

There’s a bit of foresight involved in choosing this structure. You’ll understand very soon. 

Also note how semantic the markup is. This is one of the  advantages of using the CSS grid. You save yourself the hassles of using redundant container markup.  

Now style the document.


```css

body {
   display: grid;
   min-height: 100%
}

```

This will kick off the grid formatting context by making `body` a `grid-container`

Now we can go on to define the row and column structure within the grid.


<br /> 

# How to create the Rows and Columns for Catty Music
Creating the rows and columns is pretty easy.
The final design we are gunning for is this:

<br /> 

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

<br /> 

However, the initial grid setup we need is a grid of 2 rows and 2 columns.

<br />

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

<br />


## Here are a few things to note about the column setup

1. The first column must have a fixed width — say, 50px  

2. The second column must fill the remaining width in the grid.

## On Row Setup:  
1. The second row must have a fixed height — say, 100px
2. The first row must also fill the remaining height within the grid.

<br /> 

# The lay-man’s solution.
If you’re NOT very experienced with CSS, you’re likely to write this:

```css 

body {
   ...   
   grid-template-rows: 100% 100px;
   grid-template-columns: 50px 100%;
}

```

The problem with this is that you have accidentally created a grid whose width and height is a total of `100% + 50px`

We want a total width and height of exactly 100%, so this approach is wrong.


# The 'smart' person’s solution.
If you’ve got some experience with CSS, then you’re likely to do something much more smarter. Like this:

```css
body {
   ...
   grid-template-rows: calc(100% - 50px) 50px;
   grid-template-columns: 50px calc(100%-50px);
     
 ```

This is pretty smart. But it’s got one problem — it 
isn’t very maintainable.

For example, if you have to change any of the the fixed widths, then you must always change the `calc` definition every time .


# The Efficient Solution
Luckily, CSS Grid has a new unit that solves this problem elegantly. 

## The fractional unit (fr)
The fractional unit solves the problem of automatically distributing space.

If you have three grid columns aligned as shown below, the fractional unit will automatically distribute the space equally.

<br /> 

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

<br /> 

If for some reason you add more elements — no worries. The fr unit will equally redistribute the space .

<br />

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


Finally, if you have a fixed width element, then you can take up the remaining space with the `fr` unit.

Here’s what I mean:

```css

body {
   ...
   grid-template-rows: 1fr 50px;
   grid-template-columns: 50px 1fr;
  
```

And that is it — done! `50px` will be allocated to the fixed tracks, and the remaning space taken up by the other grid track. 

If you’re still confused with fr unit, please check out, the <a href="https://medium.com/flexbox-and-grids/the-css-fractional-unit-fr-in-approachable-plain-language-fdc47bd387f7" target="_blank">  CSS Fractional Unit (Fr) In Approachable, plain Language.</a> 
It only takes 3 minutes to read.



Now let’s take baby steps to building a clone of the famous music app, Catty Music 😁

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

Time to Code — CSS Grid, Hands-on

How to Create the Basic Grid Setup for Catty Music