CSS Demystified: Start Writing CSS with Confidence (Module 1-3)
- Buy now
- Learn more
Introduction

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

CSS Anatomy/Terminology - So we can all be speaking the same language
Why is CSS so weird? An introduction
Why is CSS so weird?
Why is CSS so weird? A follow-up
CSS is all about relationships
01-understanding_css.zip
Overlooked Fundamental 1: The box model

Introduction to the Overlooked Fundamentals
The box model and box-sizing
What happens when we don't set a width?
What happens when we set a width
Adding box-sizing
Fixing a layout
A quick word on setting heights
02-box-model.zip
Overlooked Fundamental 2: Inheritance

Inheritance
A quick look at inheritance in action
A little project
A little project | Starting files
A little project | my solution
A little project | Follow-up
Getting browser styles in Firefox
03-inheritance.zip
Overlooked Fundamentals 3: The Cascade

Introduction to the Cascade
How well do you really know it?
Importance and Origin
Origin and font-size implications
When animations and transitions get involved
Closing thoughts on Importance
Specificity
Fixing specificity issues
Calculating specificity
04-cascade.zip
Putting it into practice

Pricing Cards - downloads
A safe approach to CSS
Pricing Cards | Introduction
Challenge | Pricing Cards
Pricing Cards - Version 2 - Downloads
My Solution | Pricing Cards
Updated Design
Updated Design - Downloads
Updated Design | My solution
Adding in custom properties
Setting up the typography
Mirroring the layout
Starting to think about class naming
05-practice.zip
Overlooked Fundamentals: Wrap up

Overlooked Fundamentals | Final Project
Overlooked Fundamentals | Final Project Files
My solution
A word on class naming
A word on class naming - different options
Overlooked Fundamentals | Wrap up
06-module_1-wrap-up.zip
Unknown Fundamentals: Introduction

The Unknown Fundamentals | Introduction
Unknown Fundamentals | Project 1 introduction
Project files
Teaching you how to fish
Articles to read
01-unknown-fundamentals-intro.zip
Unknown fundamentals: formatting context

Introduction to Formatting Contexts
Inline formatting context and anonymous boxes
Block formatting context
Formatting context and floats
Collapsing margins in action
Creating a new formatting context
Flex and grid formatting contexts
Consistency
Creating a CSS rule for Flow Content consistency
Adding consistency to our magic page
Magic site | mini-challenge files
Magic page finishing touches
A look at the updated design
Magic site v2 | Project files
Easy wins
Adding columns
The square corner decorations
Stepping up our spacing utility
02-formatting-context.zip
Unknown Fundamentals: Stacking Context & Containing Blocks

Stacking Context and Containing Blocks Introduction
Introduction to Stacking Context
Exploring z-index
Stacking context deep dive
Stacking context in action
When stacking context breaks things
An important clarification on z-index
Stacking context coming into play
Stacking context mini-challenge | Files
Fixing the stacking issue
Introduction to containing blocks
When the containing block is not the parent
Containing blocks on the magic site
Containing blocks in action
Containing blocks, a more complex example
Containing block edge cases
A look at the updated design
Updated Magic Site | Project Files
More easy wins
Setting up the typography
Fun with custom properties
The testimonial
Even more custom properties
The corner squares - updated
Call to actions
Module wrap-up
Extra reading
03-stacking-context.zip
Content vs. Layout

Captions will be added soon!
Introduction to Module 3
Content vs Layout
Remember this?
Remember this - Files
Fixing the problem
A deeper look at Flexbox
Content vs Layout in action | Files
Content vs Layout in action | Introduction
Making things more consistent | In Action
Styling things up with utility classes | In Action
Plug and play | In Action
More Dynamic Layouts | In Action
content-vs-layout.zip
Final Project | The homepage

Introduction to the final project
Final Project Starting Files
A look at what we're building
Writing the HTML
Bringing in, and building out, our reset
Styling the typography
Making the typography responsive
Adding in our spacing
More spacing!
Adding columns
Backgrounds
Styling the article previews
Making the images responsive
The call to action
Styling the form elements
Form fun from the future!
Styling the footer
Making the form responsive
Styling the header and the navigation
part 1.zip
Final Project | The blog page

Introducing the blog page
Blog Page Files
Starting work on the blog page
A solution and the secondary navigation
Flexbox vs Grid - and setting up the grid
Making the grid responsive
Styling the featured article
part 2.zip
Final Project | Finishing it up

Introduction to the final page
Individual article files
A look at the header
The main article
Article challenge #1 | files
Challenge #1 | Solution
A new challenge!
Article challenge #2 | files
Challenge #2 | Solution
The read next area
About adding in the links
Adding the links and a challenge
Containing block challenge | Files
A solution and styling it up
A quick look at performance
Getting the links to cover the entire article
You did it!

And that's a wrap!
Could I ask you a favor?
part 3.zip
all-files.zip

What happens when we don't set a width?

The codepen I used in this video: https://codepen.io/kevinpowell/pen/47b0601cf0b78a0eb035b5de75326fed