Kevin Powell /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?

  • $47

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

  • Closed

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

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.

Contents

Introduction

And introduction to the course
Welcome to CSS Demystified!
  • 6 mins
  • 395 MB
My software and extensions
  • 4 mins
  • 106 MB
The Discord Community
  • 13 mins
  • 369 MB
The rules!
  • 4 mins
  • 230 MB
Pacing yourself
    The course material
      A Figma File to experiment with
      • 180 KB
      Using Figma
      • 5 mins
      • 125 MB
      00-intro.zip
      • 1.13 GB

      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
      • 3 mins
      • 18.8 MB
      Preview
      Why is CSS so weird? An introduction
      • 2 mins
      • 116 MB
      Preview
      Why is CSS so weird?
        Preview
        Why is CSS so weird? A follow-up
        • 11 mins
        • 765 MB
        Preview
        CSS is all about relationships
        • 4 mins
        • 267 MB
        Preview
        01-understanding_css.zip
        • 1.12 GB

        Overlooked Fundamental 1: The box model

        Introduction to the Overlooked Fundamentals
        • 8 mins
        • 523 MB
        Preview
        The box model and box-sizing
        • 7 mins
        • 446 MB
        Preview
        What happens when we don't set a width?
        • 3 mins
        • 40.2 MB
        Preview
        What happens when we set a width
        • 4 mins
        • 53.5 MB
        Preview
        Adding box-sizing
        • 2 mins
        • 29.4 MB
        Preview
        Fixing a layout
        • 3 mins
        • 135 MB
        Preview
        A quick word on setting heights
        • 5 mins
        • 125 MB
        Preview
        02-box-model.zip
        • 1.27 GB

        Overlooked Fundamental 2: Inheritance

        Inheritance
        • 6 mins
        • 437 MB
        Preview
        A quick look at inheritance in action
        • 5 mins
        • 104 MB
        Preview
        A little project
        • 2 mins
        • 101 MB
        Preview
        A little project | Starting files
        • 644 KB
        A little project | my solution
        • 25 mins
        • 961 MB
        A little project | Follow-up
        • 4 mins
        • 107 MB
        Getting browser styles in Firefox
          03-inheritance.zip
          • 1.51 GB

          Overlooked Fundamentals 3: The Cascade

          Introduction to the Cascade
          • 3 mins
          • 173 MB
          How well do you really know it?
          • 3 mins
          • 217 MB
          Importance and Origin
          • 7 mins
          • 454 MB
          Origin and font-size implications
          • 5 mins
          • 82.9 MB
          When animations and transitions get involved
          • 7 mins
          • 272 MB
          Closing thoughts on Importance
          • 3 mins
          • 173 MB
          Specificity
          • 9 mins
          • 604 MB
          Fixing specificity issues
          • 3 mins
          • 59.1 MB
          Calculating specificity
          • 9 mins
          • 108 MB
          04-cascade.zip
          • 2.04 GB

          Putting it into practice

          Pricing Cards - downloads
          • 118 KB
          A safe approach to CSS
          • 12 mins
          • 342 MB
          Pricing Cards | Introduction
          • 2 mins
          • 50.3 MB
          Challenge | Pricing Cards
          • 2 mins
          • 53.3 MB
          Pricing Cards - Version 2 - Downloads
          • 128 KB
          My Solution | Pricing Cards
          • 7 mins
          • 198 MB
          Updated Design
          • 6 mins
          • 148 MB
          Updated Design - Downloads
          • 12.1 MB
          Updated Design | My solution
          • 9 mins
          • 315 MB
          Adding in custom properties
          • 7 mins
          • 185 MB
          Setting up the typography
          • 8 mins
          • 265 MB
          Mirroring the layout
          • 9 mins
          • 275 MB
          Starting to think about class naming
          • 8 mins
          • 246 MB
          05-practice.zip
          • 1.9 GB

          Overlooked Fundamentals: Wrap up

          Overlooked Fundamentals | Final Project
          • 3 mins
          • 79.2 MB
          Overlooked Fundamentals | Final Project Files
          • 23.6 MB
          My solution
          • 30 mins
          • 1.07 GB
          A word on class naming
          • 7 mins
          • 488 MB
          A word on class naming - different options
            Overlooked Fundamentals | Wrap up
            • 3 mins
            • 174 MB
            06-module_1-wrap-up.zip
            • 1.66 GB

            Unknown Fundamentals: Introduction

            The Unknown Fundamentals | Introduction
            • 2 mins
            • 131 MB
            Unknown Fundamentals | Project 1 introduction
            • 1 min
            • 56.2 MB
            Project files
            • 5.26 MB
            Teaching you how to fish
            • 4 mins
            • 230 MB
            Articles to read
              01-unknown-fundamentals-intro.zip
              • 415 MB

              Unknown fundamentals: formatting context

              Introduction to Formatting Contexts
              • 2 mins
              • 116 MB
              Inline formatting context and anonymous boxes
              • 6 mins
              • 417 MB
              Block formatting context
              • 11 mins
              • 781 MB
              Formatting context and floats
              • 4 mins
              • 70.9 MB
              Collapsing margins in action
              • 14 mins
              • 425 MB
              Creating a new formatting context
              • 3 mins
              • 68.8 MB
              Flex and grid formatting contexts
              • 6 mins
              • 364 MB
              Consistency
              • 8 mins
              • 544 MB
              Creating a CSS rule for Flow Content consistency
              • 9 mins
              • 247 MB
              Adding consistency to our magic page
              • 3 mins
              • 79.6 MB
              Magic site | mini-challenge files
              • 590 KB
              Magic page finishing touches
              • 5 mins
              • 158 MB
              A look at the updated design
              • 5 mins
              • 102 MB
              Magic site v2 | Project files
              • 16.6 MB
              Easy wins
              • 17 mins
              • 573 MB
              Adding columns
              • 11 mins
              • 404 MB
              The square corner decorations
              • 12 mins
              • 386 MB
              Stepping up our spacing utility
              • 6 mins
              • 238 MB
              02-formatting-context.zip
              • 4.68 GB

              Unknown Fundamentals: Stacking Context & Containing Blocks

              Stacking Context and Containing Blocks Introduction
              • 2 mins
              • 72.3 MB
              Introduction to Stacking Context
              • 2 mins
              • 134 MB
              Exploring z-index
              • 4 mins
              • 291 MB
              Stacking context deep dive
              • 9 mins
              • 660 MB
              Stacking context in action
              • 5 mins
              • 71.5 MB
              When stacking context breaks things
              • 7 mins
              • 183 MB
              An important clarification on z-index
                Stacking context coming into play
                • 9 mins
                • 350 MB
                Stacking context mini-challenge | Files
                • 13.9 MB
                Fixing the stacking issue
                • 5 mins
                • 148 MB
                Introduction to containing blocks
                • 4 mins
                • 245 MB
                When the containing block is not the parent
                • 6 mins
                • 379 MB
                Containing blocks on the magic site
                • 3 mins
                • 98.1 MB
                Containing blocks in action
                • 3 mins
                • 68.4 MB
                Containing blocks, a more complex example
                • 2 mins
                • 31 MB
                Containing block edge cases
                • 4 mins
                • 64.8 MB
                A look at the updated design
                • 4 mins
                • 93 MB
                Updated Magic Site | Project Files
                • 17.3 MB
                More easy wins
                • 3 mins
                • 125 MB
                Setting up the typography
                • 12 mins
                • 405 MB
                Fun with custom properties
                • 12 mins
                • 403 MB
                The testimonial
                • 10 mins
                • 282 MB
                Even more custom properties
                • 4 mins
                • 154 MB
                The corner squares - updated
                • 12 mins
                • 422 MB
                Call to actions
                • 7 mins
                • 248 MB
                Module wrap-up
                • 4 mins
                • 255 MB
                Extra reading
                  03-stacking-context.zip
                  • 4.81 GB

                  Content vs. Layout

                  Captions will be added soon!
                    Introduction to Module 3
                    • 3 mins
                    • 187 MB
                    Content vs Layout
                    • 5 mins
                    • 317 MB
                    Remember this?
                    • 3 mins
                    • 171 MB
                    Remember this - Files
                    • 222 KB
                    Fixing the problem
                    • 4 mins
                    • 105 MB
                    A deeper look at Flexbox
                    • 14 mins
                    • 861 MB
                    Content vs Layout in action | Files
                    • 3.7 MB
                    Content vs Layout in action | Introduction
                    • 12 mins
                    • 455 MB
                    Making things more consistent | In Action
                    • 3 mins
                    • 82.9 MB
                    Styling things up with utility classes | In Action
                    • 3 mins
                    • 115 MB
                    Plug and play | In Action
                    • 7 mins
                    • 303 MB
                    More Dynamic Layouts | In Action
                    • 4 mins
                    • 97.5 MB
                    content-vs-layout.zip
                    • 2.5 GB

                    Final Project | The homepage

                    Introduction to the final project
                    • 6 mins
                    • 409 MB
                    Final Project Starting Files
                    • 42.1 MB
                    A look at what we're building
                    • 8 mins
                    • 165 MB
                    Writing the HTML
                    • 38 mins
                    • 936 MB
                    Bringing in, and building out, our reset
                    • 5 mins
                    • 117 MB
                    Styling the typography
                    • 16 mins
                    • 498 MB
                    Making the typography responsive
                    • 2 mins
                    • 71.3 MB
                    Adding in our spacing
                    • 8 mins
                    • 316 MB
                    More spacing!
                    • 6 mins
                    • 181 MB
                    Adding columns
                    • 4 mins
                    • 111 MB
                    Backgrounds
                    • 4 mins
                    • 109 MB
                    Styling the article previews
                    • 7 mins
                    • 195 MB
                    Making the images responsive
                    • 4 mins
                    • 122 MB
                    The call to action
                    • 8 mins
                    • 212 MB
                    Styling the form elements
                    • 12 mins
                    • 334 MB
                    Form fun from the future!
                    • 4 mins
                    • 113 MB
                    Styling the footer
                    • 13 mins
                    • 354 MB
                    Making the form responsive
                    • 5 mins
                    • 129 MB
                    Styling the header and the navigation
                    • 19 mins
                    • 528 MB
                    part 1.zip
                    • 4.42 GB

                    Final Project | The blog page

                    Introducing the blog page
                    • 3 mins
                    • 172 MB
                    Blog Page Files
                    • 385 KB
                    Starting work on the blog page
                    • 10 mins
                    • 328 MB
                    A solution and the secondary navigation
                    • 11 mins
                    • 328 MB
                    Flexbox vs Grid - and setting up the grid
                    • 17 mins
                    • 567 MB
                    Making the grid responsive
                    • 3 mins
                    • 116 MB
                    Styling the featured article
                    • 12 mins
                    • 438 MB
                    part 2.zip
                    • 1.76 GB

                    Final Project | Finishing it up

                    Introduction to the final page
                    • 2 mins
                    • 80.2 MB
                    Individual article files
                    • 194 KB
                    A look at the header
                    • 7 mins
                    • 290 MB
                    The main article
                    • 9 mins
                    • 378 MB
                    Article challenge #1 | files
                    • 194 KB
                    Challenge #1 | Solution
                    • 8 mins
                    • 269 MB
                    A new challenge!
                    • 5 mins
                    • 194 MB
                    Article challenge #2 | files
                    • 194 KB
                    Challenge #2 | Solution
                    • 7 mins
                    • 276 MB
                    The read next area
                    • 3 mins
                    • 93.8 MB
                    About adding in the links
                    • 3 mins
                    • 161 MB
                    Adding the links and a challenge
                    • 9 mins
                    • 285 MB
                    Containing block challenge | Files
                    • 194 KB
                    A solution and styling it up
                    • 5 mins
                    • 151 MB
                    A quick look at performance
                    • 8 mins
                    • 247 MB
                    Getting the links to cover the entire article
                    • 3 mins
                    • 107 MB

                    You did it!

                    You made it to the end of the course! That's so exciting, and I really do hope that you enjoyed it and learned a lot from it.

                    And that's a wrap!
                    • 3 mins
                    • 184 MB
                    Could I ask you a favor?
                      part 3.zip
                      • 2.42 GB
                      all-files.zip
                      • 137 MB

                      Text

                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.