Building a scalable CSS-only slideshow in 1024 Bytes
summary
Claim: a working CSS-only slideshow fits in 1024 bytes by using the padding-bottom hack for a 16:9 aspect ratio, VW/VH units plus root-font REM scaling, visibility+transform transitions and :target navigation with CSS counters for pagination. The build removes whitespace, combines selectors, and hand-minifies JS only for optional keyboard support. Result validates as HTML/CSS/JS, runs in modern browsers, hits Android viewport-height quirks and Opera Mini rendering limits, and the final byte math yields the advertised 1024.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 1:36Why build CSS-only slideshow
- 4:4716:9 aspect ratio with CSS
- 7:41Scaling slides to viewport
- 10:36REM units for responsive content
- 12:26Slideshow structure
- 13:51Navigation with :target
- 16:39Centering with Flexbox
- 18:07Animated transitions
- 19:12Keyboard navigation
- 20:15Slide counters with CSS
- 21:01Minifying to 1024 bytes
- 32:16Live demo and results
- 35:25Browser compatibility
- 36:59Q&A
