CSS Demystified: Start writing CSS with confidence

Name: CSS Demystified: Start writing CSS with confidence
Price: 12.75 USD
Availability: InStock
Rating: 3.7 (3 reviews)

20h 45m 24s

English

Paid

May 18, 2023

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

Hi, I'm Kevin. I teach people how to make the web and how to make it look good while they're at it. I learned to make websites on my own. I know how fun and rewarding it is, but I also know that it can be incredibly frustrating. I'm here to help make your journey into web development as easy and as fun as possible. Whether you're trying to learn what you need to tweak your small business' website or you're looking to jump start a new career, I'm here to help.

Watch Online 177 lessons

0:00

#1: Welcome to CSS Demystified!

All Course Lessons (177)

#	Lesson Title	Duration
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