English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 20h 19m | 10.4 GB
Stop wrestling with CSS.
The all-new interactive learning experience designed to help JavaScript developers become confident with CSS.
CSS can be fun. I promise.
For a lot of front-end developers, CSS is the most frustrating part of their work.
When you make a mistake in Typescript, you get a helpful tooltip telling you exactly what you did wrong. In CSS, by contrast, you’re left in the dark, without any clues about why you’re not getting the result you expected.
These constant bewildering surprises take us out of flow state, and shake our confidence. No wonder so many of us don’t enjoy writing CSS!
Despite all appearances, though, CSS is actually a deeply consistent and robust language. It feels unpredictable because there are complex systems involved, systems that are totally invisible to us.
CSS is an implicit language.
It doesn’t matter how many years you spend practicing CSS—if you don’t learn how its underlying systems work, your mental model will always be incomplete.
Think about how most of us learn CSS: we learn how individual properties work, instead of focusing on how layout algorithms use those properties as inputs. We learn “cool tricks” for specific situations, instead of concepts that can be applied broadly to any situation.
It’s like trying to solve a puzzle when you’re missing pieces. Except it’s even worse, since we blame ourselves!
Nobody is born with CSS skills.
We assume that we’re missing some sort of “CSS gene”, that we’re just not good at this stuff. And it’s the most unfair self-criticism in the world. If you learn the rules of CSS, you can be good at it too!
Becoming proficient with CSS is game-changing. All of a sudden, the most frustrating part of your job becomes fun! As JS developers, we spend so much energy trying to avoid writing CSS, when we could be embracing it, and using it to build world-class user interfaces.
So how do you learn the rules of CSS? Well, you can spend countless hours spelunking through MDN documentation and CSSWG specifications, and then spend a few years practicing. That’s what I did. It was undeniably effective—the end result is incredibly worthwhile—but the journey was long and arduous.
I want to help expedite that process for you. Over the past year, I’ve been packaging up all that knowledge and experience into a comprehensive self-paced online course.
I call it…
Table of Contents
Introduction
1 CSS for JavaScript Developers
2 Introduction
3 intro-welcome
4 Course Structure
5 Community
6 Support
Module 0 Fundamentals Recap
7 Introduction
8 Anatomy of a Style Rule
9 Media Queries
10 Selectors
11 Pseudo-classes
12 Pseudo-elements
13 Combinators
14 combinators
15 Exercises
16 selector-exercise-solution
17 Color
18 color-formats
19 Units
20 Typography
21 Debugging in the Browser
22 debugging
Module 1 Rendering Logic I
23 Built-in Declarations and Inheritance
24 inheritance
25 The Cascade
26 Directions
27 The Box Model
28 box-model-devtools
29 box-sizing
30 Padding
31 padding-units
32 Border
33 Margin
34 margin-exercise-1
35 margin-exercise-3
36 Flow Layout
37 Width Algorithms
38 width-algorithm
39 max-width-wrapper-refilm
40 width-exercise-solution
41 Height Algorithms
42 Margin Collapse
43 margin-collapse
44 Rules of Margin Collapse
45 Will It Collapse
46 Using Margin Effectively
47 Workshop Agency page
48 Solution
49 module-1-workshop
Module 10 Bonus Content
50 Intro to Figma
51 bonus-figma
52 Intro to React
53 react-workshop
Module 11 Video Archive
54 flex-basis Quirk
55 video-archive-13
56 Floating Tooltip
57 video-archive-011-floating-tooltip
58 “Subway Track” Table of Contents UI
59 video-archive-11
60 Grid Row “fr” Weirdness
61 video-archive-010
62 Recreating the Mozilla Hiding Header
63 video-archive-009
64 Creating a Slide-in Effect on Hover
65 video-archive-008
66 Benefits of styled-components
67 video-archive-007
68 A Zig-Zag Layout With CSS Grid and Transforms
69 video-archive-006
70 Recreating YouTube’s Surprisingly-Tricky Sidebar
71 video-archive-5-youtube-sidebar
72 Creating a Staggered Grid Layout
73 office-hours-005-matchen
74 “Content” vs. “items” in Flexbox
75 office-hours-004
76 Do I Need A CSS Grid Framework
77 office-hours-03
78 Floating Labels on Form Inputs
79 office-hours-002
Module 2 Rendering Logic II
80 Relative Positioning
81 Absolute Positioning
82 Exercises
83 containing-block-exercise-1
84 tooltip-exercise-reshoot
85 Stacking Contexts
86 stacking-contexts-intro-fixed
87 Managing z-index
88 absolute-sizes
89 Portals
90 portals-revised
91 Fixed Positioning
92 ex-solution
93 Overflow
94 Horizontal Overflow
95 Positioned Layout
96 Sticky Positioning
97 Exercises
98 sticky-exercise-solution-1
99 Centering Trick
100 sticky-exercise-solution-2
101 Troubleshooting
102 Hidden Content
103 hidden-content-accessibility
104 Workshop Character Creator
105 module-2-workshop-brief
106 Solution
107 module-2-workshop-solution-1
108 module-2-workshop-solution-2
109 module-2-workshop-solution-3
110 absolute-centering
111 module-2-workshop-solution-4
112 Mysterious Workshop Scrollburglar
113 video-archive-14-scrollburglar
114 Containing Blocks
115 Containing Puzzle
Module 3 Modern Component Architecture
116 Problems and Solutions
117 exercise-1
118 exercise-2
119 exercise-3
120 Global Styles
121 my-global-styles
122 Dynamic Styles
123 dynamic-styles
124 Exercises (pt. 2)
125 ex1
126 ex2
127 intro
128 Component Libraries
129 css-specialty
130 component-libraries-third-party
131 Breadcrumbs
132 breadcrumbs
133 Button
134 button-brief
135 button-solution
136 Dynamic tags
137 link-button
138 styled-components
139 Escape Hatches
140 Single Source of Styles
141 source-of-styles-brief
142 source-of-styles-solution
143 In Summary
144 Workshop Mini Component Library
145 workshop-brief
146 ProgressBar
147 workshop-progress-solution
148 Select
149 Ecosystem World Tour
150 workshop-select-solution
151 IconInput
152 workshop-IconInput-solution
153 styled-components 101
154 styled-components-worked-example
155 Installation and Setup
156 Performance
157 Exercises
Module 4 Flexbox
158 cardinality
159 ex1-solutions
160 ex2-solution
161 solution-3
162 Alignment Tricks
163 align-center-pseudo-exercise
164 Hello Flexbox!
165 exercise-solution
166 Growing and Shrinking
167 grow-shrink-basis
168 ex1-solution
169 The “flex” shorthand
170 flex-shorthand
171 ex1-solution
172 Constraints
173 ex1-solution
174 constraints-ex2-solution
175 hello-flex
176 Shorthand Gotchas
177 shorthand-gotcha
178 Wrapping
179 wrap-intro
180 wrapping-content-vs-items
181 ex1-solution
182 Groups and Gaps
183 gap
184 ex1-solution
185 ex2-solution
186 Directions and alignment
187 Ordering
188 ex1-solution
189 Flexbox Interactions
190 ex1-solution
191 Recipes
192 holy-grail
193 sticky-troubleshooting
194 overstuffed
195 Workshop Sole Ankle
196 workshop-housekeeping
197 Solution
198 workshop-ex1-solution
199 workshop-ex2-solution
200 workshop-ex3-solution
201 workshop-ex4-solution
202 workshop-ex5-solution
Module 5 Responsive and Behavioural CSS
203 Introduction
204 Working with Mobile Devices
205 Mobile Testing
206 Media Queries
207 Exercises
208 ex1-solution
209 modal-exercise
210 accessible-modals
211 Other Queries
212 Breakpoints
213 CSS Variables
214 css-variables-solution
215 Variable Fragments
216 ex1-solution
217 ex2-solution
218 The Magic of Calc
219 art-project
220 Viewport Units
221 Clamping Values
222 exercise-solution
223 Scrollburglars
224 scrollburglars-01-final
225 scrollburglars-02
226 scrollburglar-03-solution
227 scrollburglars-3-extras
228 Responsive Typography
229 Fluid Typography
230 Fluid Calculator
231 fluid-typography-ex1-solution
232 fluid-gap-ex2-solution
233 Fluid Design
234 fluid-vs-responsive
235 Workshop
236 Solution
237 workshop-part1-solution
238 workshop-part2-solution
239 workshop-03-solution
240 workshop-04-solution
241 workshop-ex5-solution
242 workshop-ex6-solution-fix
Module 6 Typography and Images
243 Introduction
244 Text Rendering
245 Text Overflow
246 ex-solution
247 Print-style Layouts
248 solution
249 Masonry Grid with Columns
250 masonry-layout-intro
251 Text Styling
252 Font Stacks
253 Web Fonts
254 Font Loading UX
255 Font Optimization
256 stealing-google-fonts
257 Variable Fonts
258 google-fonts
259 variable-fonts-ex-solution
260 Icons
261 Images
262 Fit and Position
263 object-fit-demo
264 ex-solution
265 Images and Flexbox
266 flexbox-interactions
267 ex-solution
268 Aspect Ratio
269 Responsive Images
270 Background Images
271 Workshop Unsprinkle
272 Solution
273 workshop-solution-01
274 workshop-solution-02
275 workshop-solution-3
276 workshop-solution-04
Module 7 CSS Grid
277 Introduction
278 Mental Model
279 Browser Support
280 Grid Flow and Layout Modes
281 grid-devtools
282 Grid Construction
283 ex1-solution
284 ex2-solution
285 Alignment
286 when-to-use-each
287 ex1-solution
288 ex2-solution
289 Grid Areas
290 grid-areas
291 ex-solution
292 Tracks and Lines
293 tracks-and-lines
294 Fluid Grids
295 ex-solution
296 Subgrid
297 Grid Dividers
298 Grid Recipes
299 Two-Line Center
300 Sticky Grids
301 sticky-grids
302 Full Bleed Layouts
303 Managing Overflow
304 Grid Quirks
305 Workshop New Grid Times
306 workshop-intro
307 Solution
308 workshop-ex1-solution
309 workshop-ex2-part1
310 workshop-ex2-part2
311 workshop-ex2-part3
312 workshop-ex2-aside
313 workshop-ex3-solution
314 workshop-ex4-solution
315 workshop-ex5-solution
Module 8 Animations
316 Introduction
317 Transforms
318 ex1-solution
319 CSS Transitions
320 doom-flicker
321 ex1-solution
322 ex-2
323 Keyframe Animations
324 Fill Modes
325 Dynamic Updates
326 With styled-components
327 Exercises
328 ex1-solution
329 ex2-solution
330 Animation performance
331 Designing Animations
332 Action-Driven Animation
333 ex-solutioon
334 Orchestration
335 Accessibility
336 solution
337 D Transforms
338 Flippable Card
339 flippable-card
340 ex-solution
341 Transform Style
342 Ecosystem World Tour
343 Workshop
344 Solution
345 mod8-workshop-ex1-solution
346 mod8-workshop-ex1-solution-bonus
347 mod8-workshop-ex2-solution
Module 9 Little Big Details
348 Introduction
349 CSS Filters
350 Color Manipulation
351 Blur Filter
352 blur-glow-trick
353 Backdrop Filters
354 Border Radius
355 Nested Radiuses
356 Circular Radius
357 Shadows
358 Contoured Shadows
359 Single-Sided Shadows
360 Inset Shadows
361 Exercises
362 ex1-solution
363 ex2-solution
364 Designing Shadows
365 Colors
366 Accessibility
367 ex-solution
368 Selection Colors
369 Accent Colors
370 Gradients
371 Linear Gradients
372 Radial Gradients
373 Conic Gradients
374 Easing Gradients
375 Exercises
376 easing-gradient-ex-solution
377 easing-gradient-ex2-real-solution
378 ex3-solution
379 Gradient Dead Zones
380 Mobile UX Improvements
381 Pointer Events
382 Clipping With clip-path
383 clip-path-polygon
384 Animations
385 Rounded Shapes
386 With Shadows
387 Exercises
388 ex1-solution
389 ex2-solution
390 Optical Alignment
391 optical-alignment
392 Scrolling
393 Smooth Scrolling
394 Scroll Snapping
395 scroll-snapping-solution
396 Scrollbar Colors
397 Scroll Optimization
398 Focus Improvements
399 Focus Visible
400 Focus Within
401 Focus Outlines
402 Floats
403 In Conclusion
Resolve the captcha to access the links!