Why should I set width and height on img elements?

Setting explicit width and height lets the browser reserve space before images load, eliminating Cumulative Layout Shift (CLS) — a Core Web Vital.

How many H1 tags should a page have?

Use exactly one H1 per page and maintain a logical heading hierarchy (H1 → H2 → H3) for both SEO and accessibility.

Why add rel=noopener noreferrer to external links?

It prevents the linked page from accessing your window object via window.opener and stops referrer leakage, improving security and privacy.

How do autocomplete attributes improve mobile forms?

They allow browsers and password managers to auto-fill fields, reducing friction and improving conversion rates on mobile devices.

What are Open Graph tags and why do they matter?

Open Graph meta tags control how your page appears when shared on social media, improving click-through rates with custom titles, descriptions, and images.

How do I center content with CSS Grid in 2 lines?

Use display:grid and place-items:center on the parent element to perfectly center any child both horizontally and vertically.

What are CSS custom properties and why use them?

CSS custom properties (variables) let you define reusable values in one place, making your design system easier to maintain and theme.

What is clamp() in CSS and when should I use it?

clamp(min, preferred, max) creates fluid typography that scales with the viewport, eliminating the need for media query breakpoints for font sizes.

How do I add smooth scrolling for anchor links?

Add scroll-behavior:smooth to html and use scroll-margin-top on target elements to offset fixed headers when jumping to sections.

What is CSS Grid auto-fill and how does it create responsive layouts?

Using grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) creates a self-healing grid that automatically adjusts columns without media queries.

What is :focus-visible and why is it better than removing outline?

:focus-visible shows focus rings only for keyboard navigation, not mouse clicks, providing accessibility without visual clutter.

How does IntersectionObserver work for lazy loading?

IntersectionObserver fires a callback when elements enter or exit the viewport, allowing efficient lazy loading and scroll animations without scroll event listeners.

Why should I debounce resize and input events?

Resize and input events fire dozens of times per second. Debouncing delays execution until the user stops interacting, preventing performance bottlenecks.

How do I implement a copy-to-clipboard button?

Use navigator.clipboard.writeText() for a promise-based, secure clipboard API that works in all modern browsers without hacks.

How do I safely use localStorage in JavaScript?

Wrap localStorage calls in try-catch blocks since it can throw in private browsing mode or when storage is full, preventing uncaught exceptions.

How do I detect reduced-motion preference in JavaScript?

Use window.matchMedia('(prefers-reduced-motion: reduce)') to detect the user's preference and disable animations for accessibility.

What is font-display: swap and why use it with Google Fonts?

font-display:swap shows a fallback font immediately while the custom font loads, preventing invisible text and improving Largest Contentful Paint (LCP).

How do I serve modern image formats with fallbacks?

Use the picture element with source tags for WebP/AVIF formats and an img fallback, so modern browsers use efficient formats while older ones get JPEG/PNG.

What is the difference between defer and async for scripts?

defer executes scripts in order after HTML parsing. async executes scripts as soon as downloaded, out of order. Use defer for most non-critical scripts.

When should I use will-change in CSS?

Use will-change sparingly on elements you know will animate. It promotes them to their own GPU layer, but overuse wastes memory and can hurt performance.

How do I preload critical assets for better performance?

Use link rel=preload for fonts, hero images, and critical CSS to tell the browser to fetch them at high priority before they are discovered in HTML.

Why do icon-only buttons need aria-label?

Screen readers announce button content as text. An icon with no text label is meaningless to blind users. aria-label provides the accessible name.

Why is the lang attribute on html important for SEO?

It tells browsers and screen readers the page language, enabling correct text-to-speech pronunciation and helping search engines serve the right version to users.

What contrast ratio is required for accessible text?

WCAG 2.1 requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text to ensure readability for users with low vision.

What is the .sr-only CSS class used for?

It visually hides elements while keeping them accessible to screen readers, useful for adding descriptive text that sighted users do not need to see.

How do I trap focus inside a modal dialog?

Listen for Tab and Shift+Tab keypresses inside the modal and manually move focus back to the first or last focusable element to prevent users from tabbing outside.

What is the correct viewport meta tag for responsive design?

Use meta name=viewport content=width=device-width, initial-scale=1 to ensure the browser renders the page at the device's native width.

Why should tap targets be at least 44x44 pixels on mobile?

Apple's HIG and Google's Material Design both specify 44x44px minimum tap targets to ensure users with large fingers or motor impairments can tap accurately.

What are logical CSS properties and why use them for RTL?

Logical properties like margin-inline-start and padding-block adapt automatically to writing direction, so RTL layouts work without overriding physical properties.

Developer Tips | Responsive Design & CSS Guide

Category 01

HTML Best Practices

5 tips

Solid HTML is the foundation of every great website. These tips help you write semantic, robust, and future-proof markup that browsers and screen readers love.

HTML · Images

Always use width & height on <img> to prevent layout shift

HTMLPerf

Setting explicit width and height attributes on images lets the browser reserve the correct space before the image loads, eliminating Cumulative Layout Shift (CLS) — one of Google's Core Web Vitals.

<!-- ❌ Bad: browser doesn't know size until image loads -->
<img src="hero.jpg" alt="Hero image">

<!-- ✅ Good: space reserved immediately -->
<img src="hero.jpg"
     alt="Hero image"
     width="1200"
     height="630"
     loading="lazy">

Combine with aspect-ratio: auto in CSS and the browser will calculate the correct ratio automatically, even when CSS resizes the image.

HTML · Semantics

Use one <h1> per page and keep heading hierarchy logical

HTML

A document outline built with properly nested headings helps both search engines understand your content hierarchy and screen reader users navigate the page efficiently.

<h1>Page Title (one per page)</h1>
  <h2>Main Section</h2>
    <h3>Sub-section</h3>
    <h3>Another sub-section</h3>
  <h2>Another Main Section</h2>

HTML · Links

Add rel="noopener noreferrer" to external links

HTML

When opening links in a new tab with target="_blank", the opened page can access your page via window.opener. Adding rel="noopener noreferrer" prevents this security vulnerability and also stops referrer info being sent.

<!-- ❌ Vulnerable -->
<a href="https://example.com" target="_blank">Visit</a>

<!-- ✅ Secure -->
<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">Visit</a>

HTML · Forms

Use autocomplete attributes to improve form UX on mobile

HTMLMobile

The autocomplete attribute tells browsers and password managers how to pre-fill form fields. This dramatically improves mobile form completion rates.

<input type="text"    autocomplete="given-name">
<input type="email"   autocomplete="email">
<input type="tel"     autocomplete="tel">
<input type="password" autocomplete="current-password">
<input type="text"    autocomplete="postal-code">

HTML · Meta

Add Open Graph tags for better social media sharing

HTML

Open Graph meta tags control how your page looks when shared on social media platforms like Facebook, LinkedIn, and Twitter/X. Without them, platforms pick content at random.

<meta property="og:title"       content="Page Title">
<meta property="og:description"  content="Short description">
<meta property="og:image"       content="https://yourdomain.com/og.jpg">
<meta property="og:url"         content="https://yourdomain.com/page">
<meta property="og:type"        content="website">
<!-- Twitter/X -->
<meta name="twitter:card"      content="summary_large_image">

Category 02

CSS Tips & Tricks

6 tips

Modern CSS is incredibly powerful. These tips cover layout, custom properties, and patterns that save you time and keep your stylesheets clean.

CSS · Layout

Center anything perfectly with CSS Grid in 2 lines

CSS

Stop fighting with positioning hacks. CSS Grid's place-items shorthand centers content both horizontally and vertically in two lines — no calc, no transforms.

.center-everything {
  display: grid;
  place-items: center;
}

/* Works for full-page centering too */
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

CSS · Custom Properties

Use CSS custom properties for a maintainable design system

CSS

CSS custom properties (variables) let you define your design tokens once and reuse them everywhere. They also update in real-time, making dark mode and theming trivial.

:root {
  --color-primary: #6366f1;
  --color-bg: #ffffff;
  --radius-md: 12px;
  --spacing-md: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0d1117;
  }
}

.btn {
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

CSS · Typography

Use clamp() for fluid, responsive typography

CSSResponsive

clamp(min, preferred, max) allows font sizes to scale smoothly with the viewport width — no media queries needed. The middle value is usually a vw unit.

/* clamp(minimum, preferred, maximum) */
h1 {
  font-size: clamp(1.8rem, 5vw, 3.5rem);
}

p {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  line-height: 1.7;
  max-width: 65ch; /* optimal reading width */
}

CSS · Scroll

Smooth scrolling and scroll-margin for anchor links

CSSUX

Enable smooth scrolling globally and use scroll-margin-top on anchor targets to ensure sticky headers don't overlap the content being scrolled to.

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Offset for sticky header (e.g. 70px tall) */
[id] {
  scroll-margin-top: 90px;
}

Always wrap scroll-behavior: smooth in a prefers-reduced-motion: no-preference media query — some users experience motion sickness from animated scrolling.

CSS · Layout

Use CSS Grid auto-fill for self-healing card layouts

CSSResponsive

The auto-fill + minmax() pattern creates a grid that automatically adjusts the number of columns based on available space — no media queries needed.

.card-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(280px, 1fr)
  );
  gap: 24px;
}
/* 1 col on mobile → 2 → 3 → 4 automatically */

CSS · Visibility

Use :focus-visible instead of removing outline

CSS

Never do outline: none globally — it breaks keyboard navigation. Use :focus-visible to show focus rings only for keyboard users, keeping the design clean for mouse users.

/* ❌ Never do this */
* { outline: none; }

/* ✅ Hide for mouse, show for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 3px;
  border-radius: 4px;
}

Category 03

JavaScript Tips

5 tips

Write cleaner, more performant JavaScript with these modern patterns and browser APIs.

JS · API

Use IntersectionObserver for lazy loading & scroll effects

JSPerf

Instead of listening to the scroll event (which fires hundreds of times per second), use the IntersectionObserver API to react only when elements enter or leave the viewport.

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        observer.unobserve(entry.target); // stop watching
      }
    });
  },
  { rootMargin: '0px 0px -50px 0px' }
);

document.querySelectorAll('.animate-on-scroll')
  .forEach(el => observer.observe(el));

JS · Performance

Debounce resize and input events to avoid performance hits

JSPerf

Events like resize and input fire very rapidly. Debouncing delays execution until the user stops interacting, preventing unnecessary work.

function debounce(fn, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

// Usage
window.addEventListener('resize',
  debounce(() => {
    recalculateLayout();
  }, 200)
);

JS · API

Use the Clipboard API for copy-to-clipboard buttons

JSUX

The modern navigator.clipboard API is promise-based and much cleaner than the old document.execCommand('copy') hack.

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    showToast('Copied!');
  } catch (err) {
    console.error('Copy failed:', err);
  }
}

// Usage
document.querySelector('.copy-btn')
  .addEventListener('click', () =>
    copyToClipboard('Text to copy')
  );

JS · Storage

Safely use localStorage with a helper that handles errors

JS

localStorage can throw in private browsing mode or when storage is full. Always wrap it in a try/catch helper.

const storage = {
  get(key, fallback = null) {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : fallback;
    } catch { return fallback; }
  },
  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
      return true;
    } catch { return false; }
  }
};

storage.set('theme', 'dark');
const theme = storage.get('theme', 'light');

JS · Media

Detect user's reduced-motion preference in JavaScript

JS

For JavaScript-driven animations (e.g. canvas, GSAP), check the user's prefers-reduced-motion setting and simplify or disable animations accordingly.

const prefersReduced = window
  .matchMedia('(prefers-reduced-motion: reduce)')
  .matches;

if (!prefersReduced) {
  startAnimations();
} else {
  showStaticFallback();
}

Category 04

Performance Tips

5 tips

Fast websites rank higher, convert better, and keep users happy. These tips cover the biggest wins for web performance.

Performance · Fonts

Use font-display: swap and preconnect for Google Fonts

Perf

Without font-display: swap, browsers hide text until the custom font loads (FOIT). With it, the system font is shown immediately, then swapped — vastly improving Largest Contentful Paint (LCP).

<!-- Step 1: preconnect -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Step 2: append &display=swap to the URL -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
      rel="stylesheet">

Performance · Images

Serve modern image formats with <picture> fallback

PerfHTML

WebP and AVIF images are significantly smaller than JPEGs and PNGs with equal quality. Use the <picture> element to serve modern formats with a JPEG fallback for older browsers.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg"
       alt="Hero image"
       width="1200" height="630"
       loading="lazy">
</picture>

Performance · Scripts

Load non-critical scripts with defer or async

PerfHTML

Regular <script> tags block HTML parsing. defer runs the script after parsing completes (in order). async runs scripts as soon as they download (order not guaranteed).

<!-- Blocks rendering ❌ -->
<script src="app.js"></script>

<!-- Runs in order, after DOM ✅ (use for most scripts) -->
<script src="app.js" defer></script>

<!-- Runs immediately when ready ✅ (analytics, ads) -->
<script src="analytics.js" async></script>

Performance · CSS

Use will-change sparingly for GPU-accelerated animations

PerfCSS

Stick to animating transform and opacity — they run on the GPU compositor thread without triggering layout or paint. Add will-change only if you profile and see a real benefit.

/* ❌ Triggers layout (expensive) */
.bad { transition: width 0.3s, top 0.3s; }

/* ✅ GPU-composited (cheap) */
.good { transition: transform 0.3s, opacity 0.3s; }

/* Use sparingly, only before complex animations */
.modal-enter { will-change: transform; }
.modal-entered { will-change: auto; } /* reset after */

Performance · Resources

Preload critical assets above the fold

PerfHTML

Use <link rel="preload"> to tell the browser to fetch critical resources early — before it discovers them in CSS or JS. Ideal for hero images, critical fonts, and key scripts.

<!-- Preload hero image (LCP element) -->
<link rel="preload" as="image"
      href="hero.webp" fetchpriority="high">

<!-- Preload critical font -->
<link rel="preload" as="font"
      href="font.woff2" type="font/woff2"
      crossorigin>

Category 05

Accessibility Tips

5 tips

Accessibility isn't a checklist — it's good design. These tips help make your sites usable by everyone, including screen reader users and keyboard navigators.

A11y · ARIA

Use aria-label for icon-only buttons

HTML

Buttons that contain only an icon have no visible text for screen readers to announce. Add an aria-label to provide a descriptive label.

<!-- ❌ Screen reader says "button" -->
<button><i class="fa-solid fa-times"></i></button>

<!-- ✅ Screen reader says "Close dialog" -->
<button aria-label="Close dialog">
  <i class="fa-solid fa-times" aria-hidden="true"></i>
</button>

A11y · Language

Always declare the lang attribute on <html>

HTML

The lang attribute tells screen readers which language to use, enables correct hyphenation in CSS, and helps translation tools identify the content language. For RTL languages, also add dir="rtl".

<!-- English -->
<html lang="en">

<!-- Arabic (RTL) -->
<html lang="ar" dir="rtl">

<!-- French -->
<html lang="fr">

A11y · Color

Ensure a minimum 4.5:1 contrast ratio for text

CSS

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). Use a contrast checker before shipping.

Great free tools: WebAIM Contrast Checker at webaim.org/resources/contrastchecker/ or install the Colour Contrast Analyser desktop app. Chrome DevTools also shows contrast ratios in the colour picker.

/* ❌ #6b7280 on #fff = 4.48:1 (fails AA for small text) */
.muted { color: #6b7280; background: #fff; }

/* ✅ #4b5563 on #fff = 7.0:1 (passes AA & AAA) */
.muted { color: #4b5563; background: #fff; }

Category 06

Responsive & Mobile Tips

4 tips

Mobile traffic is dominant. These tips ensure your designs work beautifully across every screen size — from a 320px phone to a 4K monitor.

Responsive · Meta

Use the correct viewport meta tag

MobileHTML

Without the viewport meta tag, mobile browsers render at ~980px desktop width and then zoom out. Allow user scaling — disabling it is a major accessibility barrier and breaks browser zoom.

<!-- ❌ Disables user zoom (accessibility violation) -->
<meta name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no">

<!-- ✅ Correct: allows scaling up to 5× -->
<meta name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5">

Responsive · Touch

Make tap targets at least 44×44px on mobile

MobileCSS

Apple's Human Interface Guidelines and WCAG 2.5.5 recommend a minimum 44×44 CSS pixel tap target. Small targets frustrate users and lead to mis-taps. You can expand the clickable area without changing the visual size using padding or pseudo-elements.

/* Expand tap area without visual change */
.icon-btn {
  position: relative;
  width: 24px; height: 24px;
}
.icon-btn::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px; min-height: 44px;
}

Responsive · RTL

Use logical CSS properties for RTL language support

RTLCSS

CSS logical properties like margin-inline-start instead of margin-left automatically flip direction based on the document's writing mode — making RTL support almost effortless.

/* Physical (doesn't flip for RTL) */
.icon { margin-right: 8px; }

/* Logical (flips automatically in RTL) */
.icon { margin-inline-end: 8px; }

/* More logical property examples */
.card {
  padding-inline: 16px;      /* left + right */
  padding-block: 12px;       /* top + bottom */
  border-start-start-radius: 12px; /* top-left in LTR */
}

Responsive · Units

Use dvh instead of vh for mobile full-screen layouts

MobileCSS

100vh on mobile browsers includes the browser chrome (address bar), causing overflow when the bar appears. The new dvh (dynamic viewport height) unit adjusts as the browser chrome shows or hides.

/* ❌ Overflows on mobile when browser chrome appears */
.hero { height: 100vh; }

/* ✅ With fallback for older browsers */
.hero {
  height: 100vh;          /* fallback */
  height: 100dvh;         /* dynamic viewport height */
}

Supported in all modern browsers since 2023. Also available: svh (small viewport, always excludes chrome) and lvh (large viewport, always includes chrome space).

Developer Tips for Responsive Design & Performance

HTML Best Practices

CSS Tips & Tricks

JavaScript Tips

Performance Tips

Responsive & Mobile Tips

More from ResponsiveCheckTool

Put These Tips Into Practice