DelightfulDev
The Journal
CSS clamp() for Fluid Typography and Spacing: A Complete Guide
clamp() replaces a stack of font-size media queries with one line that scales smoothly between a minimum and maximum. Here's the formula, worked examples, and common pitfalls.
CSS Viewport Units Explained: vw, vh, dvh, svh, and lvh for Responsive Design
100vh has a famous mobile bug: the address bar resizing the viewport out from under your layout. The newer dvh/svh/lvh units exist specifically to fix it.
WCAG Color Contrast Explained: How to Pass AA and AAA (With Real Examples)
WCAG's contrast rules aren't arbitrary — they're a ratio computed from relative luminance. Here's the actual math, the thresholds that matter, and the failures that show up most.
The CSS aspect-ratio Property: A Practical Guide to Responsive Media Boxes
Before aspect-ratio, holding a box's shape as it resized meant a padding-percentage hack. Here's the modern property, common ratios, and how it prevents layout shift.
Hex vs RGB vs HSL: Choosing the Right CSS Color Format
Hex, RGB, and HSL can all describe the exact same color — the difference is which one is easiest to read, tweak, and reason about for a given job. Here's how to pick.
Px vs Rem vs Em: A Complete Guide to CSS Units (And When to Use Each)
Px, rem, and em all size things on the web, but they behave differently under zoom, nested components, and a user's font-size preference. Here's exactly when to reach for each.
Creative CSS: Building Generative Art and Playful UI With Pure CSS
CSS gradients, transforms, and animation can build genuine visual art with no JavaScript or images at all — and the techniques behind it pay off directly in production UI work.
Portfolio Projects That Prove Front-End Skill: What to Build and How to Show It
A portfolio full of tutorial clones doesn't distinguish one candidate from another. Here's what actually demonstrates front-end skill, and how to present it well.
A Practical CSS Learning Roadmap: From the Box Model to Container Queries
CSS rewards learning in the right order — skipping the box model and cascade to jump straight to grid tends to produce brittle, hard-to-debug layouts later.
The Best VS Code Extensions and Settings for Front-End Developers in 2026
A focused list of VS Code extensions that actually change day-to-day front-end work — linting, formatting, color previews, and accessibility — plus the settings worth changing.
AI Coding Assistants for CSS and Front-End Work: What Copilot Gets Right (and Wrong)
AI assistants are genuinely fast at CSS boilerplate — and genuinely unreliable at the numbers that matter, like contrast ratios. Here's where to trust one and where to verify.
Where to Practice Front-End Skills: CSS Battle, Frontend Mentor, and Other Platforms
Generic algorithm practice sites don't build CSS or layout skill. Here's where to actually practice front-end and visual craft, and how to get the most out of a challenge.