Web development guides

Practical, jargon-free guides to the problems developers actually hit — diagnosing why a site isn't ranking, hitting Core Web Vitals, building accessible interfaces, and shipping without surprises.

Why these guides exist

Most web development problems have well-documented solutions — buried in specification drafts, browser engineering blogs and Stack Overflow threads from 2019. These guides pull those scattered answers into a single, opinionated walkthrough for each topic, written for developers who want to fix a real problem today rather than read a textbook.

Every guide on this page follows the same structure: it names the problem, explains the most common causes in the order that finds the fix fastest, and links to the tools that make the work easier. Where a guide references a technical standard — like WCAG contrast ratios or Core Web Vitals thresholds — it explains the number in plain language before telling you what to do about it. Where there's a genuine trade-off between approaches, the guide names the trade-off rather than hiding it.

New guides are added when a question keeps coming up in the developer communities where FrontendHelpers is shared. If there's a topic you'd like covered, get in touch.

8 min read

Fluid Typography with CSS clamp(): A Practical Guide

Build fluid type with CSS clamp(): the slope and intercept maths, a worked example, why rem + vw matters, and how to keep text passing 200% zoom.

Read the guide →
9 min read

WCAG 2.2 Colour Contrast: A Developer's Guide

WCAG 2.2 contrast for developers: the 4.5:1 and 3:1 rules, large text, non-text and focus contrast, the luminance maths, and 17 real colour pairs tested.

Read the guide →
7 min read

robots.txt vs noindex vs canonical: Which to Use When

robots.txt controls crawling, noindex controls indexing, canonical picks one URL. A decision table for staging, PDFs, parameters, moved pages and AI bots.

Read the guide →
5 min read

Why Isn’t My Website Showing Up on Google? A Diagnostic Guide

A step-by-step diagnostic for websites missing from Google search. Check indexing, robots.txt, noindex tags, canonicals and content quality — in the order that finds the problem fastest.

Read the guide →
4 min read

Core Web Vitals: A Practical Guide to LCP, INP and CLS

A practical guide to Core Web Vitals. What LCP, INP and CLS measure, the thresholds Google uses, and the specific fixes that move each metric — with no jargon.

Read the guide →
4 min read

CSS Animation Performance: What to Animate and What to Avoid

Why some CSS animations run at 60fps and others stutter. Learn which properties are composited on the GPU, why transform and opacity are cheap, and how to fix janky animations.

Read the guide →
4 min read

Website Launch Checklist: 20 Checks Before You Go Live

A practical pre-launch checklist for websites: SEO, performance, accessibility, security, analytics and legal pages. Twenty checks that catch the problems people notice first.

Read the guide →
4 min read

How to Implement Dark Mode Properly: A CSS Guide

A practical guide to building dark mode with CSS custom properties. Respect system preference, add a toggle that persists, avoid pure black, and prevent the flash of wrong theme.

Read the guide →
4 min read

How to Make Your Website Accessible: A Practical Guide

A practical web accessibility guide covering semantic HTML, keyboard navigation, focus states, alt text, colour contrast and forms — the changes that fix most real problems.

Read the guide →
CSS recipe · 7 min read

CSS Typewriter Effect: Pure CSS Typing Animation

Build a pure CSS typewriter effect with steps() and ch: blinking caret, type-and-delete loop, multiple lines, monospace caveats and reduced motion.

Read the recipe →
CSS recipe · 7 min read

Skeleton Loading Screens in CSS: Shimmer Done Right

Build CSS skeleton screens that match your layout, shimmer on the compositor, respect reduced motion and announce loading to screen readers.

Read the recipe →
CSS recipe · 7 min read

Animated Gradient Borders in CSS: 3 Techniques

Three ways to build a gradient border in CSS, with live demos: border-image, clipped backgrounds and a conic pseudo-element, animated with @property.

Read the recipe →
CSS recipe · 7 min read

CSS Shake Animation for Errors (Accessible Version)

A CSS shake animation for form errors: decaying translateX keyframes, a clean restart with element.animate(), plus ARIA and reduced-motion support.

Read the recipe →
CSS recipe · 7 min read

CSS Loading Spinners: Light, Smooth and Accessible

Build CSS loading spinners from one element, a conic gradient or three dots. Size them in em, delay them 300ms and make them accessible in buttons.

Read the recipe →
CSS recipe · 7 min read

Animated Gradient Text in CSS (and Keeping It Readable)

Animate gradient text with background-clip and @property, then keep it readable: contrast at every stop, forced colours, selection and reduced motion.

Read the recipe →
CSS recipe · 7 min read

CSS Marquee: An Infinite Scrolling Ticker Done Right

A seamless CSS marquee: two copies and translateX(-50%), masked edge fades, speed in px/s, a real Pause button for WCAG 2.2.2, and reduced-motion support.

Read the recipe →
CSS recipe · 7 min read

Fade In on Scroll with CSS Scroll-Driven Animations

Reveal content on scroll with animation-timeline: view(), add an IntersectionObserver fallback, and never hide content that only JavaScript can show.

Read the recipe →
CSS recipe · 7 min read

CSS Hover Underline Animations That Work With Wrapping

Animate link underlines with ::after and scaleX, a background-size gradient that survives line wraps, or text-decoration transitions, accessibly.

Read the recipe →
CSS recipe · 7 min read

CSS Flip Card: 3D Card Flip on Hover, Focus and Click

Build a CSS flip card with perspective, preserve-3d and backface-visibility. Stack faces with grid, flip on focus or a button, respect reduced motion.

Read the recipe →
CSS recipe · 7 min read

Animate Accordion Height in CSS: interpolate-size & More

Animate accordion height to auto: the grid-rows trick that works everywhere, interpolate-size, ::details-content and exclusive details groups.

Read the recipe →
CSS recipe · 7 min read

Animate a Native Dialog in CSS with @starting-style

Animate a native dialog in and out with @starting-style and allow-discrete, fade its backdrop, close it on a backdrop click and respect reduced motion.

Read the recipe →