Intermediate To Advanced CSS For Practical Peoples
summary
Training focuses on why CSS behaves the way it does and how to fix it: live demos show Grid for large two‑dimensional layouts and Flexbox for one‑dimensional, with grid + flexbox used together; debugging is done in DevTools and with computed values, and fallbacks use @supports. Shows a working CSS hamburger built with the checkbox‑hack hamburger (no-JS fallback), demos transforms/transitions, and cites adoption: Grid ~85% global, client ~87%, CMU ~97%, Lullabot ~98%. Recommends MDN, CSS‑Tricks and Autoprefixer.
AI-written summary · about
chapters (29)
- 0:00Introduction
- 0:30CSS basics and resources
- 2:35Debugging browser tools
- 6:27CSS units and lengths
- 9:12Text-based units
- 12:17Ex and Ch units
- 15:52Viewport units
- 19:33Unit best practices
- 21:05Media queries
- 23:45Mobile-first development
- 31:15Document flow
- 36:45Breaking document flow
- 39:14Legacy layout methods
- 40:41CSS Grid
- 52:39Flexbox
- 1:12:25Block layout and box model
- 1:27:53Box sizing
- 1:35:07Positioning elements
- 1:45:48Z-index and layout strategy
- 1:50:06CSS organization
- 1:55:26Transforms and transitions
- 2:05:32Animations and timing
- 2:10:45Pseudo-elements and hacks
- 2:20:35CSS accessibility
- 2:29:41Specificity and best practices
- 2:42:53Advanced selectors
- 2:52:24Maintainability and tooling
- 2:56:22Practical implementation
- 3:00:39Final tips and Q&A
