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

<br /> 

# The Need for Variables 

If you’re new to variables in preprocessors or native CSS, here are a few reasons why variables are important.

* **More readable code**

Without saying much you can quickly tell how readable and more maintainable variables make any code base.

* **Ease of change across large documents**

If you have all constants saved in a separate file , then you do not have to jump through thousands lines of code when you want make a change to a variable.
It becomes super-easy. Just change it in one place.

*  **Spot typos faster**

It is pain to search through lines of codes trying to spot an error. It is more annoying if this is an error due to typos. They are difficult to spot, and the good use of variables eliminates the hassles.

To this end, readability and maintainability are the big wins. 
Thanks to CSS variables, now we can have these with native CSS too.

<br />

# Defining CSS variables 
Let me start with something you’re already familiar with i.e variables in Javascript. 

Assuming you write Javascript, a simple variable may be declared like so:

`var amAwesome;`

and then you assign it some value like so:

`amAwesome = "awesome string"`

In CSS, a CSS variable is any “property” whose name begins with two dashes.

```css

/*can you spot the variable here? */
.block {
  color: #8cacea;
 --color: blue
 } 
 
```



Why variables are important and how to get started with them.

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

Getting Started with Variables

The Need for Variables