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

Let's go over some guidelines to help you write better and more efficient CSS. 


**1. Use type selectors when all or most instances of an HTML element needs to be styled in the same way.**

For example: 
```css
	
  h1 {
  	color: red;
  }
  
```
Where `h1` represents any **type selector**. This will style every `h1` in the document. It is appropriate to use this selector when you're sure you want every element to look and feel the same way.

**2. Use classes to select elements that are more specific, reusable and flexible than type selectors.** 

For example:

```css

	.red-letters {
  	color: red;
  }
  
```
The class `.red-letters` may be applied to multiple HTML elements, and they will all have the color of red. 

This fosters reusability and flexibilty. 


**3. ID values can only be used once per page, so stick to using them for unique styles and global elements that are not repeated.** 

For example: 

```css
	
  #my-element {
  	color: teal;
  }
  
```
IDs in HTML are unique. They should not be added to multiple elements. By implication, styles set on an ID element cannot be reused. Stick to them only for unique styles that are not repeated.


__4. For descendant selectors, try not to go more than three levels deep.__

For example: 

This looks good:
```css

	div .red-letters {
  	color: red;
  }
```
This is too much 
```css
	div .red-letters h1 p {
		color: red; 
  }
```

It does work, but using more selectors may result in a slower page load because the browser has to cycle through each pattern. 

This is generally frowned upon. I dont want you writing messy code. 

<br />

# Conclusion
No two projects are exactly the same, so it will take practice and experience to get to know which selectors are best for each scenario. 

This comes with experience, so don't sweat it now.

When you're learning, the first step is just being able to make it work. Once you have that under your belt, you can always go back and see where you can improve and revise.

There are so many ways to target HTML with CSS, like I have shown you. So, how do you know which selector to use? This lesson contains best practices for selecting HTML elements. 

Best Practices for Selecting Elements

There are so many ways to target HTML with CSS, like I have shown you. So, how do you know which selector to use? This lesson contains best practices for selecting HTML elements.

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

Best Practices for Selecting Elements