CSS is Awesome!
summary
Demonstrates building interactive UI widgets—collapsibles, accordions, popovers, modals, tabs, and animated icons—using only CSS without JavaScript. Shows concrete techniques: CSS variables and calc() for theming, viewport units and steps() for discrete text animations, SVG stroke-dasharray/stroke-dashoffset for icon animation, flexbox and grid for layouts, and interaction patterns like checkbox-based tabs and :target modals while noting accessibility caveats and browser gaps (old Android, early Edge).
AI-written summary · about
chapters (15)
- 0:00Introduction
- 3:11CSS preprocessors pros/cons
- 5:59CSS post-processing & variables
- 8:07CSS units vh vw vmin vmax
- 10:14Holy grail layout
- 13:23Flexbox alignment
- 16:34CSS Grid power
- 21:38Pseudo-elements & dynamic
- 23:48CSS shapes only
- 26:59Animations & SVG
- 31:35State selectors & accessibility
- 33:17Custom checkboxes
- 35:26Tabs & components
- 36:28Semantic HTML styling
- 38:56Conclusion
