CSS Demystified: Start Writing CSS with Confidence (Module 1-3)

Would you like to write CSS with confidence?

Have you ever written a line of CSS expecting one thing to happen, only for it to do the exact opposite of what you were hoping for?

Have you ever written a line of CSS as a guess, crossing your figures that it might fix your problem… somehow, hopefully?

Or maybe you’re an expert at finding a solution on Stack Overflow, only for it to half-work and then have to waste time trying to get it to work on your own site?

CSS Demystified: Start Writing CSS with Confidence (Module 1-3)

Closed

Start understanding CSS instead of just hacking your way through it.

Buy now

Imagine a day where you could write CSS and know exactly what was going to happen.

Or, when something doesn’t work, you know why it didn’t work and can quickly fix it without having to ask someone or do a Google search.

That day is just around the corner.

I know it's right around the corner because I've been there too, as have countless students of mine.

It's about learning how CSS actually works

It isn’t about learning all of the properties of CSS — which is what most tutorials and courses do, they say “here is a bunch of different things you can do with CSS” — but learn how CSS itself works.

The biggest reason people have so much trouble is that they don’t even know about the fundamentals which CSS is built upon.

People learn about things like the cascade and specificity, but they don't really understand how they work.

Then there are the things that people often have never heard of, such as formatting contexts and stacking context.

Could you explain to someone else how these work?

Have you even heard of them?

Your teacher for this course

My name is Kevin Powell and I teach people CSS, both in the classroom and to over 100,000 people on YouTube.

Being a teacher, I'm constantly being asked "why isn't this working", and "what can I do to fix this?"

Many of the problems I see people coming across are popping up due to their lack of the fundamentals of CSS, even though they're often things they tell me that they know.

That's why I created this course. It's literally to answer the question of "why isn't this working".

CSS is a beautiful language, but it gets a bad wrap because people don’t understand how it works

There is nothing wrong or broken with CSS.

Beginners get frustrated because some of it seems counter-intuitive. People coming from other languages get frustrated with it because it doesn’t work the way they think it should.

This course is put together to show you how CSS is meant to work and make sure you understand the fundamentals that it’s built on top of.

I’m also going to teach you how you can continue to learn in a way that helps you understand why problems happen in the first place. The underlying theories are an important part of this, but it’s not the end of the road.

I want to help you be a master of CSS and be able to use it to do what you want, instead of fighting against it half the time.

Who is this course for?

This course is for you if:

You already understand the very basics of CSS, but struggle implementing what you know
You lack confidence when writing CSS. You feel like you know it, but feel like something is holding you back
You're coming from the back-end world, or are more familiar with JavaScript, and are trying to figure out this whole CSS thing

This course is not for you if:

You aren't at all familiar with HTML and CSS yet
You are hoping to have the answers delivered on a silver platter

When you join, you’ll be getting access to:

The overlooked fundamentals
People have heard of these fundamental concepts, but often ignore them because they seem relatively simple. A lot of people feel that they know them really well, but this is one of the places where many people, from beginners to experienced developers make mistakes.

This section of the course covers:

The cascade: everyone knows the cascade, but so many people still make mistakes with how it works, and often see the global scope of CSS as a problem instead of a feature.
Inheritance: understanding inheritance — and what is and isn't inherited — lets you start taking advantage of one of the most powerful parts of the cascading
Specificity: Naming things in CSS is hard enough, and when you don't really understand specificity, it's even worse.

The unknown fundamentals
These are literally the most fundamental concepts of CSS, the things that dictate how the page is rendered, and yet most people have never even heard of them.

Formatting contexts: There are a number of these, but they are all very similar to one another. Knowing what creates a new formatting context, and what that means, can help you start understanding why certain CSS tricks and hacks actually work.
Stacking context: Have you ever run into an issue with z-index? For something which seems relatively simple (the bigger the number, the "higher" it's stacked), there are some complications that can arise with z-index. If you understand stacking context, you'll know what is causing any z-index issue, as well as how to fix it.

Bonus Content

A workbook to help reinforce your learning throughout the lessons, and which can be a quick reference guide when you are done
How to learn CSS the right way guide
CSS challenges to help you put reinforce what you've learned in this course
Private Community channel

BONUS: Private Community Channel

If you follow me on YouTube, you might already know of my community which hosted on a Discord server. Heck, you might even be a member!

When you join this course, you'll get access to private channels inside that server dedicated to this course. In there, you can discuss course content and ask questions to me as well as other course members.

BONUS: How to learn CSS the right way - A guide & challenges

Have you ever been told that the best way to learn CSS is to "build something"? This PDF guide does the opposite. It outlines effective strategies to learn CSS in a way that will stick, not only helping you accomplish what you need to do, but making sure you understand everything you are doing too.

Start understanding CSS instead of just hacking your way through it

Stop wasting your time hoping that your CSS is going to work and start txruly understanding the fundamentals that will step your game up to the next level.

Buy for $25

Introduction

And introduction to the course

Welcome to CSS Demystified!

My software and extensions

The Discord Community

The rules!

Pacing yourself

The course material

A Figma File to experiment with

Using Figma

00-intro.zip

Understanding CSS

Before we really dive in, we need to understand CSS, from the vocabulary we use to talk about it to why it is the way it is (because it is a little bit weird!), and how we can't look at CSS in isolation like we can some other languages 😊.

CSS Anatomy/Terminology - So we can all be speaking the same language

Introduction

Understanding CSS

Overlooked Fundamental 1: The box model

Overlooked Fundamental 2: Inheritance

Overlooked Fundamentals 3: The Cascade

Putting it into practice

Overlooked Fundamentals: Wrap up

Unknown Fundamentals: Introduction

Unknown fundamentals: formatting context

Unknown Fundamentals: Stacking Context & Containing Blocks

Content vs. Layout

Final Project | The homepage

Final Project | The blog page

Final Project | Finishing it up

You did it!