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