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

The concept of the css box model is deceptively simple. Upon this _simple_ concept lies the big shoulders of CSS. If I were to wrap the concept of the box model in a naive sentence, it would be this: 

Every element on a web page is rectangular! 

Pause for a moment, and think about this.

When you have a `div` or any other element within your document, what you have is a rectangualar element, like a box. This Box has some features. This features make up the box model.


 
 

# The Players in the Box Model

Consider the image below:

These are the "players" in the Box Model. 

Don't worry. At the end of this section, you'll clearly understand the image above. 

Take for instance some simple markup like so: `<div>I am a happy element</div>` When this is displayed on the page, all you see is the text, "I am a happy element"

What newcomers to the CSS language don't realize is there's more than meets the eye.

The text you see is the portion contained within the **content area** of the box element **(see graphic above)**. The other areas, namely, `padding area`, `border` and `margin` are all **invisible**

In the coming lessons, we will explore these.


Do not forget: 

Each element has a rectangular box model, which describes each of the rectangular boxes (areas) generated for the element

The concept of the css box model is deceptively simple. Upon this _simple_ concept lies the big shoulders of CSS. If I were to wrap the concept of the box model in a naive sentence, it would be this: 

Every element on a web page is rectangular! 

Pause for a moment, and think about this.

When you have a `div` or any other element within your document, what you have is a rectangualar element, like a box. This Box has some features. This features make up the box model.


 
 

# The Players in the Box Model

Consider the image below:

The Box model is arguably the most important concept you will learn in CSS as a whole. So, listen up! 

Introducing the Box Model 

The Box model is arguably the most important concept you will learn in CSS as a whole. So, listen up!

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

Introducing the Box Model