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

# What is a Grid Container?
Every website or application layout you make (or have seen) is essentially boxes placed within certain defined boundaries.

In very simple terms, a grid is just 'lines'. Horizontal and vertical lines that define the placement of other design elements.

You’ll be familiar with this if you use design software such as Adobe Photoshop or Sketch.

In the context of the CSS Grid layout, a grid container is a parent that contains all the items in the grid. The Grid container defines the initial placement of the grid lines, both vertical and horizontal.

# What is a Grid Line?
Assume for a bit that you have a fully laid out grid like this:

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

 

The layout comprises a grid container with a number of perfectly laid out grid items (child elements within the grid)

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

 

Grid lines are the horizontal and vertical lines that divide the grid.

 

# What is a Grid Cell?
A Grid cell is the smallest unit of area in a grid layout. It is any space bounded by four grid lines.


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

 

# Grid Area
A grid area may be as small as the area contained within a grid cell (shown above). It may also be as large as all the cells within the grid.
In the image below, the area covered by the four cells is a grid area.

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

 

# What is a Grid Track
I don’t like very technical definitions. So, a grid track may be seen as a fancy name for columns and (or) rows. It is the space between any two grid lines.

The images below show example grid tracks.

![https://cdn-images-1.medium.com/max/400/1*oan28239S-v0oJZECQPKIA.png](https://cdn-images-1.medium.com/max/400/1*oan28239S-v0oJZECQPKIA.png)

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

![https://cdn-images-1.medium.com/max/400/1*xkbT0CjkBWb-5S_hxcBvGw.png](https://cdn-images-1.medium.com/max/400/1*xkbT0CjkBWb-5S_hxcBvGw.png)

 

So, we’ve got the first piece of the CSS grid puzzle sorted out.

Let's move on 😃

Let’s take a look at the CSS grid terminologies you absolutely have to know.

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

Basic CSS Grid Terminologies You Should Know

What is a Grid Container?