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!