CF

CSS Demystified: Start writing CSS with confidence

20h 45m 24s
English
Paid

CSS can feel simple at first, but it grows complex as you build real pages. You may try to fix issues by adding more code. This makes your styles fragile and hard to manage. You do not have to fight with CSS though.

CSS follows clear rules. When you learn how it works at its core, things start to make sense. You can write cleaner code. You can fix problems with less stress. You may even start to enjoy it.

Embrace the CSS Mindset

CSS is a real language. Many new developers skip it and jump into JavaScript. Bootcamps often rush past it too. This leaves you unsure of why your layout breaks.

CSS looks simple, but it works in its own way. In this course, you will learn how it thinks. You will use its strengths. You will write styles with more control and less guessing.

What You Will Build

You will work through small exercises and larger projects. These will help you practice each concept right away.

You will get design specs, Figma files, and finished code for the major projects. One project is a large single‑page site. Another is a full three‑page site.

Module Breakdown

The course releases one module each week. Here is what you will cover.

Week One: Core Ideas

CSS is not like other languages. You will learn why it behaves the way it does. You will explore the key rules that drive everything in CSS.

Week Two: Hidden Rules

This week builds on week one. You will use new ideas to write more stable CSS. You will fight less with layout issues and gain more control.

Week Three: Content and Layout

Modern sites use many components. These components should not break each other, but they often do. This week shows you how to build layouts and components that work in any spot.

Weeks Four & Five: Build Better Learning Habits

These weeks are part of the gold package. They focus on how you can learn more effectively.

Week four gives you tools to escape “tutorial hell.” You will see the methods the instructor uses to learn new topics well enough to teach them.

Week five explores how teaching a concept—even to yourself—helps you learn it deeply.

Additional

https://github.com/kevin-powell/css-demystified-course-material

About the Author: Kevin Powell

Kevin Powell thumbnail

Kevin Powell is a Canadian developer and one of the most cited independent voices on modern CSS — running the Kevin Powell YouTube channel, which has anchored a generation of front-end developers' relationship with CSS. He is widely respected for the patience and depth of his explanations of the parts of CSS that the language's reputation as a quirky historical accident often obscures.

The course catalog covers modern CSS in depth: Grid and Flexbox layout, custom properties (CSS variables), modern responsive design (container queries, the dynamic viewport units, modern color spaces), CSS animations and transitions, typography on the web, and the design-system thinking that connects CSS to broader UI work. Material is structured for working developers building real interfaces.

The CourseFlix listing under this source carries 7 Kevin Powell courses spanning that range. Material is paid; Kevin Powell's courses are sold individually on the original platform. Courses are aimed at developers ready to make CSS a deliberate craft rather than an afterthought.

Watch Online 177 lessons

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
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

Related courses

Frequently asked questions

What are the prerequisites for this CSS course?
There are no formal prerequisites for this course. It is designed for individuals who may find CSS challenging or confusing. The course starts with core ideas, making it suitable for beginners as well as developers who want to deepen their understanding of CSS. Familiarity with basic HTML is helpful but not required.
What projects will I work on during the course?
During the course, you will work on both small exercises and larger projects. You will receive design specs, Figma files, and finished code for major projects, including a large single-page site and a full three-page site. These projects are designed to help you practice and apply the concepts learned in each module.
Is this course suitable for someone who already knows basic CSS?
Yes, the course is suitable for individuals who have a basic understanding of CSS but want to deepen their knowledge. It covers core ideas, overlooked and unknown fundamentals, and hidden rules, helping you write more stable CSS and gain better control over layouts and styles.
What topics are not covered in this CSS course?
The course focuses on understanding CSS at a deeper level and does not cover JavaScript or server-side programming. It emphasizes CSS rules, relationships, and layouts, providing insights into CSS-specific challenges rather than cross-technology integrations.
How much time should I expect to dedicate to this course each week?
The course is structured with a weekly module release. With a total runtime of approximately 20 hours and 45 minutes spread over multiple weeks, you should plan to dedicate around 3 hours per week to complete the lessons and projects, depending on your learning pace.
Will the skills learned in this course be useful for other web development courses?
Yes, the skills learned in this course will be highly beneficial for other web development courses. A strong understanding of CSS is crucial for front-end development, making it easier to integrate with JavaScript and HTML. The concepts of layout and styling are foundational for any web design or development path.
What specific CSS tools or features will I learn about?
The course covers various CSS tools and features, including the box model, box-sizing, the cascade, specificity, flex and grid formatting contexts, and custom properties. You will also explore topics like inheritance, formatting contexts, and layout consistency, equipping you with a comprehensive understanding of CSS.