Frictionless Frontends for Backend Developers
summary
Builds a small admin-like page using semantic HTML, CSS Grid for a three-column layout and responsive card rows with repeat(autofill) + minmax, Flexbox for inline alignment, viewport units for full-height, and position: sticky for pinned nav. Shows using HTML elements for accessibility, image width/height to preserve aspect ratio (new intrinsic sizing), CSS custom properties for spacing and colors, and ends with a working stylesheet of 174 lines of CSS that stays under 200.
AI-written summary · about
chapters (11)
- 0:00Start
- 8:34SECTIONING ELEMENTS.
- 9:23CLEAR STRUCTURE AND HEIRARCHY.
- 10:26MAKE THE MOST OF HTML'S BUILT IN FUNCTIONALITY.
- 13:25Understanding CSS, SCSS, CSS in JS
- 15:44Simple tricks for LAYOUTS WITH CSS GRID
- 33:04Margins & Padding Colours Fonts
- 33:18Setting up CONSISTENT SPACING
- 35:22Adding in COLOURS & FONT SIZE
- 44:57Aside.. STICKING THINGS
- 49:08START WITH A STRONG FOUNDATION BUILD UPON IT.
