CSS Demystified: Start writing CSS with confidence
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
# | 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 |