Front-End: Fun, Not Frustration
summary
Twelve concrete tips and low‑hanging fixes: use box-sizing: border-box so padding doesn’t blow up percentage layouts, make nav items display:inline-block and collapse inter-item whitespace with font-size:0, center forms with display:table-cell; vertical-align:middle instead of tables or fragile absolute offsets, highlight fragments with the :target selector, animate a sliding sidebar with CSS transitions, enforce a min-width:320px; max-width:1280px fluid container, prefer Sass %placeholders over repeated mixins, and use SVG (IE9+) for crisp icons.
AI-written summary · about
chapters (8)
- 0:00Start
- 3:50great for percentage based layouts
- 8:43positioning is hard
- 16:43semantic markup, behaving like tables
- 27:46a spec worth reading
- 31:01hardware acceleration
- 32:45low hanging fruit
- 35:16retina friendly, compresses well
related talks
54mFlexbox
57mSolving Layout Challenges With Pure Sass
01h 12mPractical Tips for Building More Accessible Front-Ends by Sara Soueidan
42mDirty little front-end tricks
30mWriting CSS with Accessibility in Mind
05mCSS Tricks You Gotta Love
43mBe the Browser's Mentor, not its Micromanager
51mWeb Design Engineering With the New CSS