User Interfaces in the Age of Intrinsic Web Design
summary
Demonstrates that modern CSS is now reliable for real UIs by showing working code: centering with display: grid; place-items: center, responsive holy‑grail layout via grid-template-areas and fractional units, fluid galleries using repeat(auto-fill, minmax(150px, 1fr)) and grid-auto-flow: dense for packing, nested grids, overlap with z-index, animating gap, viewport units (vh/vw), object-fit: cover, and a full‑viewport app with a slide‑out nav. Uses Angular for examples, Firefox devtools for debugging, and cites resources (Jen Simmons, Rachel Andrew) and ~92% global grid support.
AI-written summary · about
chapters (38)
- 0:00Intro
- 2:50Angular Bootcamp
- 7:17Webpack
- 8:36Menu
- 10:36Centering
- 17:19Grid Matters
- 18:43HTML
- 19:46CSS
- 21:19Grids
- 23:40Layout
- 25:14Fixing the Header
- 27:58Fixing the Grid Column
- 29:56The Grid Layout
- 31:55Responsive Grid Layout
- 35:24Grid Anatomy
- 37:17Grid Parts
- 38:01Overlay Grid
- 39:02Grid Terminology
- 39:30Grid Gap
- 40:31Terminology
- 41:02Grid
- 41:47Firefox Dev Tools
- 42:50Display Grid
- 43:27Place Content
- 44:10Place Items
- 45:58Debugging Grid
- 47:30Host Selector
- 48:08Boarder
- 48:35Every Child
- 48:46Border Order
- 49:18Planetary Nebula
- 49:48Image Grid
- 50:29CSS Layout
- 52:12Background Height
- 52:50Image Rule
- 55:27NG Container
- 56:38Pixels
- 56:57Playing Card
