How to Teach CSS
summary
Explains concrete fixes and why they work: why the mysterious 6.33px gap disappears with display:block instead of blind workarounds like line-height:0, how flex’s flex-shrink and min-width:0 come from the flex algorithm, what stacking contexts make z-index comparisons local, and when absolute/fixed positioning anchor to ancestors or the viewport. Shows demos, an eye‑tracker setup and a course platform, built a course called CSS for JavaScript developers with about 18,000 students — and it demonstrably clarifies recurring confusions.
AI-written summary · about
chapters (18)
- 0:00Intro
- 1:02The Problem
- 2:17The Mindset
- 4:40Baseline
- 6:45The CSS Person
- 12:55Layout
- 14:52Inline Elements
- 16:05Inflow Layout
- 17:34Inline vs Block
- 18:53Line Wrapping
- 20:07Flexbox
- 29:25Positioned Layout
- 30:22Relative Position
- 31:29Absolute Position
- 33:45Fixed Position
- 37:49Position Relative
- 40:30Why I Started
- 43:07Questions
related talks
48mI'm Going To Make You Stop Hating CSS
57mI'm Going To Make You Stop Hating CSS
56mI'm Going To Make You Stop Hating CSS
46mCSS Lessons Learned the Hard Way
01h 00mThe CSS You Don’t Know About
04h 48mIntermediate To Advanced CSS For Practical Peoples
45mRefactoring the way we talk about CSS
52mThe Secret Mechanisms of CSS