CSS Demystified: Start writing CSS with confidence

20h 45m 24s
English
Paid
May 18, 2023

CSS seems easy at first, but the deeper into it you get, the more complicated it becomes. Often we end up trying to fix problems by adding more and more code on top and hoping for the best. That leads to fragile code and hours of wasted time while you try to get things to work properly. As frustrating as CSS can seem though, it doesn't have to be that way.

More

CSS is based on rules and logic (even if it doesn't always feel that way). Instead of fighting with CSS, if you learn about how CSS is built at its very core, and you start to work with how it's meant to work, it can actually be a lot of fun.

Learn to embrace CSS

CSS is an essential language for putting a website together, but it's often ignored in favor of the latest JS framework.

People pay $10,000+ to go to bootcamps to become front-end developers, but are left mystified by CSS.

CSS is often seen as simple language because it has a simple syntax and then it's pooped on because it doesn't behave like other languages.

CSS is it's own language though, and in this course, we're going to learn to embrace it for what it is, take advantage of its differences, and really start to understand what the heck is going on with CSS.

What's inside CSS Demystified

What we'll be building together

Throughout the modules, we'll be working on several exercises and projects to help you reinforce your learning.

There will be several smaller exercises and quick examples which you'll have access to.

For the larger projects, you'll have access to design specifications, the Figma files, and all the finished code.

Above you can see our two big projects. On the left is a large single-page site, which is the focus in module 2. On the right is a 3-page site, which is the focus on module 3.

Module by module breakdown

Below is a breakdown of all the modules of the course. They're split up by week because CSS Demystified is a drip course, with a week between each module.

Week oneThe misunderstood fundamentals {

CSS isn't like other programming languages, and for good reason. In the first week, we'll look at why it's different, and deep dive the fundamentals of it to embrace that difference.

}

Week twoThe unknown fundamentals{

This week will build off what we started with during week 1, and continue to influence how we write our CSS.

With our newfound understanding of CSS, we can start approaching it in new ways. Less fighting, less confusion, and more control.

}

Week threeContent vs Layout {

We live in a world of components. We're told that components should live in isolation, but then we build them in ways that influence other items around them.

This week is all about learning how we can prevent that from happening and creating resilient layouts and components that can work anywhere we want them to.

}

Weeks four & fiveStep up your learning {

These weeks are a part of the #gold package only, as they do not focus on writing CSS, but on different techniques you can use to help you learn more effectively.

Week four looks at tips and tricks to help break out of tutorial hell, including a look at how I learn things well enough to teach them.

Week five is a look into the cheatcode to learn things at a very deep level, which dives into teaching things, even if it's just to yourself, or to a bigger audience.

}

Watch Online CSS Demystified: Start writing CSS with confidence

Join premium to watch
Go to premium
# Title Duration
1 Welcome to CSS Demystified! 05:24
2 My software and extensions 03:16
3 The Discord Community 12:56
4 The rules! 03:10
5 CSS Anatomy/Terminology - So we can all be speaking the same language 02:37
6 Why is CSS so weird? An introduction 01:37
7 Why is CSS so weird? A follow-up 10:25
8 CSS is all about relationships 03:40
9 Introduction to the Overlooked Fundamentals 07:08
10 The box model and box-sizing 06:06
11 What happens when we don't set a width? 02:26
12 What happens when we set a width 03:25
13 Adding box-sizing 01:59
14 Fixing a layout 02:44
15 A quick word on setting heights 04:43
16 Inheritance 05:59
17 A quick look at inheritance in action 04:51
18 A little project 01:25
19 A little project | my solution 24:54
20 A little project | Follow-up 03:22
21 Introduction to the Cascade 02:23
22 How well do you really know it? 02:59
23 Importance and Origin 06:12
24 Origin and font-size implications 04:50
25 When animations and transitions get involved 06:10
26 Closing thoughts on Importance 02:24
27 Specificity 08:14
28 Fixing specificity issues 03:00
29 Calculating specificity 08:22
30 Pricing Cards | Introduction 02:01
31 A safe approach to CSS 11:24
32 Challenge | Pricing Cards 01:37
33 My Solution | Pricing Cards 06:48
34 Updated Design 05:46
35 Updated Design | My solution 08:52
36 Adding in custom properties 06:57
37 Setting up the typography 07:50
38 Mirroring the layout 08:15
39 Starting to think about class naming 07:33
40 Overlooked Fundamentals | Final Project 02:24
41 My solution 29:05
42 A word on class naming 06:40
43 Overlooked Fundamentals | Wrap up 02:24
44 The Unknown Fundamentals | Introduction 01:49
45 Unknown Fundamentals | Project 1 introduction 00:48
46 Teaching you how to fish 03:10
47 Introduction to Formatting Contexts 01:38
48 Inline formatting context and anonymous boxes 05:42
49 Block formatting context 10:38
50 Formatting context and floats 03:46
51 Collapsing margins in action 13:04
52 Creating a new formatting context 02:38
53 Flex and grid formatting contexts 05:52
54 Consistency 07:25
55 Creating a CSS rule for Flow Content consistency 08:21
56 Adding consistency to our magic page 02:54
57 Magic page finishing touches 04:46
58 A look at the updated design 04:19
59 Easy wins 16:04
60 Adding columns 10:06
61 The square corner decorations 11:51
62 Stepping up our spacing utility 05:49
63 Stacking Context and Containing Blocks Introduction 01:02
64 Introduction to Stacking Context 01:52
65 Exploring z-index 04:00
66 Stacking context deep dive 09:00
67 Stacking context in action 04:01
68 When stacking context breaks things 06:06
69 Stacking context coming into play 08:35
70 Fixing the stacking issue 04:13
71 Introduction to containing blocks 03:52
72 When the containing block is not the parent 05:11
73 Containing blocks on the magic site 02:42
74 Containing blocks in action 02:26
75 Containing blocks, a more complex example 01:33
76 Containing block edge cases 03:11
77 A look at the updated design 03:48
78 More easy wins 02:48
79 Setting up the typography 11:13
80 Fun with custom properties 11:20
81 The testimonial 09:08
82 Even more custom properties 03:21
83 The corner squares - updated 11:01
84 Call to actions 07:00
85 Module wrap-up 03:30
86 Introduction to Module 3 02:35
87 Content vs Layout 04:21
88 Remember this? 02:22
89 Fixing the problem 03:32
90 A deeper look at Flexbox 13:42
91 Content vs Layout in action | Introduction 11:58
92 Making things more consistent | In Action 02:40
93 Styling things up with utility classes | In Action 02:32
94 Plug and play | In Action 06:53
95 More Dynamic Layouts | In Action 03:59
96 Introduction to the final project 05:36
97 A look at what we're building 07:53
98 Writing the HTML 37:06
99 Bringing in, and building out, our reset 04:47
100 Styling the typography 15:55
101 Making the typography responsive 01:50
102 Adding in our spacing 07:56
103 More spacing! 05:31
104 Adding columns 03:36
105 Backgrounds 03:09
106 Styling the article previews 06:38
107 Making the images responsive 03:43
108 The call to action 07:35
109 Styling the form elements 11:12
110 Form fun from the future! 03:52
111 Styling the footer 12:56
112 Making the form responsive 04:22
113 Styling the header and the navigation 18:35
114 Introducing the blog page 02:23
115 Starting work on the blog page 09:28
116 A solution and the secondary navigation 10:31
117 Flexbox vs Grid - and setting up the grid 16:29
118 Making the grid responsive 02:55
119 Styling the featured article 11:13
120 Introduction to the final page 01:08
121 A look at the header 06:21
122 The main article 08:25
123 Challenge #1 | Solution 07:21
124 A new challenge! 04:18
125 Challenge #2 | Solution 06:25
126 The read next area 02:18
127 About adding in the links 02:14
128 Adding the links and a challenge 08:56
129 A solution and styling it up 04:41
130 A quick look at performance 07:16
131 Getting the links to cover the entire article 02:55
132 And that's a wrap! 02:32
133 Introduction to Module 4 02:38
134 What is tutorial hell? 01:05
135 Don't get frustrated if you're stuck 02:09
136 It's okay to move backwards 02:24
137 Don't compare yourself to others 03:09
138 The levels of cognition 03:18
139 Different methods of learning 04:42
140 Intentional learning 04:30
141 Getting to, and through, the applying stage 04:49
142 Knowing what you don't know 05:40
143 A simple example 03:07
144 When we take shortcuts 08:50
145 Let's learn together! 02:34
146 Taking a first look at it 10:05
147 Putting it into action 15:10
148 You can't remember everything 02:49
149 Less is more 06:10
150 You need to start doing 04:27
151 Wrap up 06:37
152 Introduction to Module 5 05:05
153 The next three levels 05:41
154 Being your own student 04:15
155 Why this works 05:26
156 How to teach 02:31
157 My first steps 13:22
158 Experimentation 13:05
159 The next step after you experiment 11:13
160 Some examples and ideas 07:03
161 Staying on top of things 18:02
162 Putting my approach into action 07:01
163 Asking questions when you are stuck 16:18
164 Moving into the applying stage 09:40
165 Vocalizing and analyzing 03:20
166 In Action - Wrap up 05:21
167 Go public! 07:12
168 A look at Dev.to 08:46
169 A quick look at getting started with video 05:22
170 Finding things and teaching what you've just learned 04:05
171 A low stress way to go public 04:30
172 Don't try to make things perfect 07:19
173 Teach everything you know 05:35
174 Live session #1 (November 6, 2020) 02:00:05
175 The Discord Community 12:56
176 My software and extensions 03:16
177 Using Figma 04:17

Similar courses to CSS Demystified: Start writing CSS with confidence

Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!

Duration 12 hours 13 minutes 30 seconds
The CSS Bootcamp: Zero to Mastery

The CSS Bootcamp: Zero to Mastery

Duration 40 hours 15 minutes 13 seconds
100 Days Of Code: The Complete Web Development Bootcamp 2022

100 Days Of Code: The Complete Web Development Bootcamp 2022

Duration 78 hours 51 minutes 55 seconds
The Ultimate HTML5 & CSS3 Series: Part 3

The Ultimate HTML5 & CSS3 Series: Part 3

Duration 5 hours 38 minutes 4 seconds
50 Projects In 50 Days - HTML, CSS & JavaScript

50 Projects In 50 Days - HTML, CSS & JavaScript

Duration 18 hours 13 minutes 45 seconds
The Responsive Web Design Bootcamp

The Responsive Web Design Bootcamp

Duration 17 hours 36 minutes 12 seconds
Composing Layouts in React

Composing Layouts in React

Duration 4 hours 38 minutes 12 seconds