CSS Demystified: Start writing CSS with confidence

20h 45m 24s
English
Paid

Course description

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.

Read more about the course

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 177 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online CSS Demystified: Start writing CSS with confidence

0:00
/
#1: Welcome to CSS Demystified!

All Course Lessons (177)

#Lesson TitleDurationAccess
1
Welcome to CSS Demystified! Demo
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

Unlock unlimited learning

Get instant access to all 176 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Mastering CSS Grid 2022 - With 3 cool projects

Mastering CSS Grid 2022 - With 3 cool projects

Sources: udemy
CSS Grid is a relatively new and unused concept to CSS. It's very important these days that our layouts are simple to maintain, and easy to adjust based on the dimensions of our...
17 hours 16 minutes 22 seconds
100 Days Of Code: The Complete Web Development Bootcamp 2024

100 Days Of Code: The Complete Web Development Bootcamp 2024

Sources: Academind Pro
Learn web development from A to Z in 100 days (or at your own pace) - from "basic" to "advanced", it's all included!
78 hours 51 minutes 55 seconds
Beyond CSS

Beyond CSS

Sources: kevin powell
Beyond CSS is a course designed to help you use modern CSS and tools like Sass and PostCSS in order to get control of your stylesheets.
18 hours 12 minutes 41 seconds
Composing Layouts in React

Composing Layouts in React

Sources: fullstack.io
In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives. Along the way you will learn modern CSS Layout tools lik...
4 hours 38 minutes 12 seconds