Skip to main content

🧪 Lesson 20: Testing & Validation

Your site is built and polished — but how do you know it actually works? Not just on your laptop, in your favorite browser, at your screen size. What about someone on a phone? On Firefox? Using a screen reader? With slow internet? Testing answers these questions. In this lesson, you'll validate your code, audit performance and accessibility, test across browsers and devices, and fix the issues that testing reveals. This is the step that separates "it works for me" from "it works for everyone."

🎯 Learning Objectives

By the end of this lesson, you will be able to:

  • Validate HTML using the W3C Markup Validation Service
  • Validate CSS using the W3C CSS Validation Service
  • Run a Lighthouse audit and interpret the scores
  • Test your site in multiple browsers and screen sizes
  • Check accessibility with automated tools and manual keyboard testing
  • Identify and fix the most common HTML/CSS errors
  • Create a pre-launch checklist for any future project

Estimated Time: 45–60 minutes

Prerequisites: Lesson 19 (Adding Polish) — all four pages complete with polish features.

📑 In This Lesson

Why Testing Matters

You've been checking your site in the browser as you built it — that's informal testing, and it's a good habit. But it has blind spots. You've only tested in one browser, at one screen size, with your eyes. Formal testing covers the gaps:

  • Validation catches typos and structural errors in your HTML and CSS that browsers silently forgive but that can cause unpredictable behavior.
  • Lighthouse measures performance, accessibility, SEO, and best practices — things you can't evaluate by just looking at a page.
  • Cross-browser testing reveals rendering differences between Chrome, Firefox, Safari, and Edge.
  • Accessibility testing ensures your site works for people who navigate with keyboards, screen readers, or assistive devices.
graph LR A["Your Site"] --> B["HTML Validation"] A --> C["CSS Validation"] A --> D["Lighthouse Audit"] A --> E["Browser Testing"] A --> F["Accessibility Testing"] B --> G["✅ Ready to Publish"] C --> G D --> G E --> G F --> G style A fill:#fef3c7,stroke:#f59e0b,stroke-width:2px,color:#1e293b style G fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,color:#1e293b

Think of testing as a safety net, not a punishment. Every bug you catch now is a bug your visitors never encounter.

HTML Validation

The W3C Markup Validation Service checks your HTML against the official specification. It catches errors that browsers ignore — like unclosed tags, duplicate IDs, or missing required attributes — that can cause subtle layout problems or accessibility issues.

How to Validate

  1. Open validator.w3.org
  2. Choose the "Validate by Direct Input" tab
  3. Copy-paste your entire HTML file into the text box
  4. Click "Check"
  5. Review the results — fix errors (red), consider warnings (yellow)

Repeat for every HTML file in your project. Yes, all four.

Common HTML Errors and Fixes

Frequent HTML Validation Errors
Error What It Means Fix
End tag for "div" omitted A <div> was opened but never closed Find the unclosed <div> and add </div>. Use VS Code's bracket matching (Ctrl+Shift+\) to find the partner.
Duplicate ID "name" Two elements have the same id attribute IDs must be unique per page. Rename one of them.
Element "li" not allowed as child of "div" A <li> is outside a <ul> or <ol> Wrap list items in their proper parent element.
Attribute "alt" required on "img" An image is missing alternative text Add alt="description" to every <img>. Use alt="" (empty) for purely decorative images.
The "for" attribute value must refer to an ID A <label for="x"> doesn't match any element's id Make sure the for and id values match exactly, including case.
Stray end tag "div" An extra closing </div> with no matching opening tag Delete the extra closing tag. Count your opening and closing tags — they should match.

💡 VS Code Helps You Catch Errors Early

Install the HTMLHint or W3C Web Validator VS Code extension to see validation errors in real time as you type, without leaving your editor. Squiggly red underlines in your code mean something needs attention.

CSS Validation

The W3C CSS Validation Service checks your stylesheet for syntax errors, unknown properties, and incorrect values.

How to Validate

  1. Open jigsaw.w3.org/css-validator
  2. Choose "By direct input"
  3. Paste your style.css content
  4. Click "Check"

Common CSS Errors and Fixes

Frequent CSS Validation Errors
Error What It Means Fix
Property "colour" doesn't exist Typo in a property name Check spelling. CSS uses American English: color, not colour.
Value error: "20 px" is not valid Space between number and unit Remove the space: 20px, not 20 px. Exception: 0 needs no unit.
Missing semicolon A declaration is missing its ending ; Add the semicolon. The last declaration in a block doesn't technically need one, but always include it.
Unknown pseudo-element "::placeholder-shown" The validator may not recognize newer CSS features If the feature works in browsers, the warning is safe to ignore. The validator can lag behind the spec.

💡 Warnings vs. Errors

Errors are things that are definitely wrong — typos, invalid syntax, missing values. Always fix these. Warnings are suggestions or things the validator can't fully check — like custom properties (var(--color-primary)) or newer features. Warnings are usually safe to acknowledge and move on.

Lighthouse Audits

Lighthouse is a free tool built into Chrome DevTools that audits your page across four categories: Performance, Accessibility, Best Practices, and SEO. It gives each category a score from 0–100 and tells you exactly what to fix.

How to Run a Lighthouse Audit

  1. Open your site in Chrome (use Live Server)
  2. Open DevTools (F12 or Ctrl+Shift+I)
  3. Click the Lighthouse tab (you may need to click » to find it)
  4. Select categories: Performance, Accessibility, Best Practices, SEO
  5. Choose Mobile device (the stricter test)
  6. Click "Analyze page load"
  7. Wait about 30 seconds for the results

Understanding the Scores

Lighthouse Score Ranges
Score Rating What It Means
90–100 🟢 Good Your page performs well in this category
50–89 🟠 Needs improvement There are opportunities to improve
0–49 🔴 Poor Significant issues need attention

Common Lighthouse Fixes

  • "Image elements do not have explicit width and height" — add width and height attributes to every <img> tag. This prevents layout shifts as images load.
  • "Links do not have discernible names" — add text content or aria-label to links that only contain icons or images.
  • "Background and foreground colors do not have sufficient contrast" — your text color is too similar to its background. Use a contrast checker to fix.
  • "Document does not have a meta description" — add <meta name="description" content="..."> to the <head> of every page.
  • "Properly size images" — don't serve a 4000px-wide image for a 400px card. Resize images to match their display size.

💡 Don't Chase Perfection

A perfect 100 in every category is nice for bragging rights but not required. For a first project, aim for: Performance 80+, Accessibility 90+, Best Practices 90+, SEO 90+. Accessibility is the most important — a low accessibility score means some visitors literally can't use your site.

Cross-Browser Testing

Different browsers render CSS slightly differently. A layout that looks perfect in Chrome might have spacing issues in Safari or font rendering differences in Firefox. Testing across browsers catches these inconsistencies.

Which Browsers to Test

Browser Testing Priority
Priority Browser Why
🔴 Must test Chrome (Desktop + Mobile) ~65% of global web traffic
🔴 Must test Safari (iOS) ~25% of mobile traffic; unique rendering engine
🟠 Should test Firefox Different engine; great DevTools; ~3% traffic
🟢 Nice to test Edge Chromium-based; usually matches Chrome

How to Test Without Owning Every Device

  • Chrome DevTools Device Mode — Ctrl+Shift+M simulates different screen sizes and devices. Not a true browser test, but catches responsive issues.
  • Firefox — free to install on any OS. Open your site with Live Server and test.
  • Safari (if you have a Mac or iPhone) — test on an actual iOS device if possible. Safari on iOS has the most rendering quirks.
  • BrowserStack — paid service with a free trial. Test on real browsers and devices in the cloud.
  • Ask friends and family — the best testing is real people on real devices. Send them your Netlify link (coming in Lesson 21) and ask them to check it on their phones.

What to Look For

  • Layout — do cards stay in rows? Does the nav collapse correctly? Does the footer sit at the bottom?
  • Typography — do fonts load? Is text readable? Are line lengths comfortable?
  • Interactions — do hover effects work? Does the mobile menu toggle? Does dark mode apply?
  • Images — do they load? Are they the right size? Do rounded corners display correctly?
  • Forms — do inputs focus correctly? Does validation feedback show? Can you submit?

Responsive Testing

Testing at specific breakpoints isn't enough — real devices have unpredictable screen widths. Test by slowly dragging the browser window from wide to narrow and watching for layout breaks.

Key Widths to Check

Common Device Widths
Width Device What to Check
375px iPhone SE / small phones Single-column layout, hamburger menu, readable text
390px iPhone 14 / modern phones Same as above with slightly more space
768px iPad / tablets (portrait) Breakpoint boundary — nav should switch, cards may be 2-across
1024px iPad landscape / small laptops Desktop layout should be active, cards 3-across
1440px Standard desktop Content should be centered with comfortable margins
1920px+ Large/ultrawide monitors Content shouldn't stretch to full width — max-width keeps it readable

The Drag Test

  1. Open your site in the browser
  2. Grab the right edge of the browser window
  3. Slowly drag it narrower, watching for anything that breaks
  4. Note the exact width where issues appear (DevTools shows the width in the top-right of the viewport when resizing)
  5. Fix the issue with a media query or by adjusting your Flexbox/Grid values

💡 Common Responsive Issues

  • Horizontal scrollbar appears — something is wider than the viewport. Check for fixed-width elements, images without max-width: 100%, or padding causing overflow.
  • Text overflows its container — long words or URLs can break out. Fix with overflow-wrap: break-word.
  • Touch targets too small — buttons and links on mobile should be at least 44×44px. Increase padding if needed.

Accessibility Testing

Automated tools catch about 30–50% of accessibility issues. The rest require manual testing. A complete accessibility check includes both.

Automated Testing

Lighthouse's accessibility audit is a good start. For deeper analysis, install the axe DevTools browser extension (free):

  1. Install the axe DevTools extension for Chrome
  2. Open DevTools → find the axe tab
  3. Click "Scan ALL of my page"
  4. Review the results — each issue includes a description, severity, and how to fix it

Manual Keyboard Testing

Put your mouse aside and navigate your entire site using only the keyboard:

Keyboard Navigation Quick Reference
Key Action
Tab Move to the next interactive element
Shift+Tab Move to the previous interactive element
Enter Activate a link or button
Space Activate a button, check a checkbox, scroll down
Escape Close a dialog or dropdown
Arrow keys Navigate within menus, radio groups, selects

Keyboard Testing Checklist

  • Can you see where focus is at all times? (The focus ring should be clearly visible)
  • Does the skip-to-content link appear when you first press Tab?
  • Can you navigate all menu items and links?
  • Can you open and close the mobile menu with the keyboard?
  • Can you fill out and submit the contact form?
  • Does focus ever get "trapped" somewhere you can't escape?
  • Is the tab order logical (top to bottom, left to right)?

Screen Reader Quick Test

Every operating system has a free screen reader built in:

  • Windows: Narrator (press Win+Ctrl+Enter) or download free NVDA
  • macOS: VoiceOver (press Cmd+F5)
  • ChromeOS: ChromeVox (Ctrl+Alt+Z)

You don't need to become a screen reader expert. Just navigate your homepage and listen: does it make sense? Are images described? Are links and buttons labeled? Can you understand the page structure? Five minutes of screen reader testing reveals issues no automated tool can catch.

Common Issues & Fixes

Here are the issues that come up most often when testing a first website project:

Performance Issues

  • Images too large — a 4MB photo from your camera should be resized to the maximum display size (usually 600–1200px wide) and compressed. Use Squoosh (free, browser-based) to compress without visible quality loss. Aim for under 200KB per image.
  • No image dimensions — always set width and height attributes on <img> tags. This reserves space in the layout before the image loads, preventing Cumulative Layout Shift (CLS).
  • Render-blocking CSS — for a small site with one stylesheet, this is fine. On larger sites, critical CSS goes inline and the rest loads asynchronously.

Accessibility Issues

  • Missing alt text — every <img> needs an alt attribute. For informative images, describe what's shown. For decorative images, use alt="" (empty string).
  • Low contrast text — use WebAIM Contrast Checker. Your light-mode text should have at least 4.5:1 contrast; check dark mode separately.
  • Missing form labels — every input needs a <label>. If you can't use a visible label, use aria-label.
  • Missing language attribute — the <html lang="en"> attribute tells screen readers which language to use for pronunciation.

SEO Issues

  • Missing or duplicate titles — every page needs a unique <title> tag. Format: "Page Name - Site Name".
  • Missing meta description — write a unique 150–160 character description for each page.
  • Missing heading hierarchy — one <h1> per page, followed by <h2>s, then <h3>s. Don't skip levels (no <h1> followed directly by <h4>).

Cross-Browser Issues

  • Flexbox gap not supported — gap in Flexbox works in all modern browsers now, but very old browsers don't support it. If you need to support older browsers, use margins instead.
  • Smooth scrolling in Safari — scroll-behavior: smooth works in Safari 15.4+ but not in older versions. This is a progressive enhancement — older browsers just jump instead of scrolling.
  • Custom property fallbacks — if you need to support very old browsers, provide a fallback before the custom property: color: #1e40af; color: var(--color-primary);

Pre-Launch Checklist

Use this checklist before publishing any website. It covers the essentials and is designed to be copied and reused for future projects.

✅ Content

  • All placeholder text replaced with real content
  • No "Lorem ipsum" or "TODO" remaining
  • Spelling and grammar checked
  • All links work (no broken links or href="#" on live links)
  • Contact information is correct
  • Copyright year is current

✅ Technical

  • HTML validates (W3C validator, no errors)
  • CSS validates (no critical errors)
  • All pages have unique <title> tags
  • All pages have <meta name="description">
  • All pages have <meta name="viewport">
  • Favicon displays in the browser tab
  • Open Graph tags set for social sharing
  • All JavaScript works without console errors (check with F12 → Console)

✅ Images

  • All images have alt attributes
  • Images are optimized (compressed, correct dimensions)
  • Images have width and height attributes
  • No broken image links

✅ Responsive

  • Tested at 375px, 768px, 1024px, 1440px widths
  • No horizontal scrollbar at any width
  • Mobile menu opens and closes correctly
  • Text is readable without zooming on mobile
  • Touch targets are at least 44×44px

✅ Accessibility

  • Lighthouse Accessibility score 90+
  • Keyboard navigation works on all pages
  • Focus indicators visible on all interactive elements
  • Skip-to-content link works
  • Color contrast passes WCAG AA (4.5:1 for text)
  • Dark mode doesn't break contrast or readability
  • prefers-reduced-motion disables animations

✅ Performance

  • Lighthouse Performance score 80+
  • Page loads in under 3 seconds on a mobile connection
  • No layout shifts as the page loads

Hands-on Exercise

🏋️ Exercise: Test and Fix Your Website

Objective: Run every type of test on your site and fix the issues you find.

Step 1: Validate HTML (all 4 pages)

  1. Open validator.w3.org
  2. Validate each page by direct input
  3. Fix all errors. Write down how many errors you found and fixed.

Step 2: Validate CSS

  1. Open jigsaw.w3.org/css-validator
  2. Validate your style.css
  3. Fix errors. Note any warnings about custom properties — those are expected.

Step 3: Run Lighthouse

  1. Open each page in Chrome with Live Server
  2. Run a Lighthouse audit (mobile mode, all categories)
  3. Record your scores. Fix any issues that bring Accessibility below 90.

Step 4: Keyboard Test

  1. Start at the top of your homepage
  2. Press Tab repeatedly through the entire page
  3. Verify: skip link appears, focus is visible, all links/buttons reachable, form works
  4. Repeat on the contact page (form testing is critical)

Step 5: Cross-Browser Test

  1. Open your site in Firefox (or another browser you have)
  2. Check layout, typography, hover effects, dark mode
  3. Note any differences from Chrome

Step 6: Responsive Drag Test

  1. Slowly resize from 1440px to 320px
  2. Fix any layout breaks you discover
💡 Hint — Quick Fixes for Common Lighthouse Issues 
<!-- Fix: "Document does not have a meta description" -->
<meta name="description"
      content="Simple recipes made with love — easy weeknight dinners and crowd-pleasing dishes.">

<!-- Fix: "Image elements do not have explicit width and height" -->
<img src="images/hero.jpg" alt="..." width="600" height="400">

<!-- Fix: "Links do not have discernible names" -->
<a href="/" aria-label="Go to homepage">
    <img src="logo.png" alt="">
</a>

🎯 Quick Quiz

Question 1: What does the W3C HTML validator check?

Question 2: What Lighthouse Accessibility score should you aim for?

Question 3: Why should you add width and height attributes to images?

Question 4: What percentage of accessibility issues do automated tools typically catch?

Question 5: What causes a horizontal scrollbar to appear on mobile?

Summary

🎉 Key Takeaways

  • Validate HTML at validator.w3.org — fix all errors, note warnings
  • Validate CSS at jigsaw.w3.org/css-validator — custom property warnings are expected
  • Lighthouse audits four categories — aim for Performance 80+, Accessibility 90+, Best Practices 90+, SEO 90+
  • Add width/height to images, meta descriptions to pages, and alt text to all images
  • Cross-browser test in at least Chrome and one other browser (Firefox or Safari)
  • Responsive drag test — slowly resize and watch for breaks, don't just check specific widths
  • Automated accessibility tools catch 30–50% of issues — manual keyboard and screen reader testing catches the rest
  • Use the pre-launch checklist for every project — content, technical, images, responsive, accessibility, performance
  • Compress images with Squoosh — aim for under 200KB per image
  • Every bug you catch in testing is a bug your visitors never encounter

📁 Your Project After This Lesson

my-website/
├── css/
│   └── style.css      ← validated, errors fixed
├── images/
│   └── (all optimized, all have alt text)
├── js/
│   └── script.js      ← no console errors
├── index.html         ← ✅ validated, meta description, unique title
├── about.html         ← ✅ validated, meta description, unique title
├── recipe.html        ← ✅ validated, meta description, unique title
└── contact.html       ← ✅ validated, meta description, unique title

Testing Results:
✅ HTML validates (0 errors on all pages)
✅ CSS validates (0 errors, some expected warnings)
✅ Lighthouse: Performance 80+ / Accessibility 90+ / Best Practices 90+ / SEO 90+
✅ Keyboard navigation works on all pages
✅ Tested in Chrome + one other browser
✅ Responsive from 375px to 1920px
✅ Pre-launch checklist complete

🚀 What's Next?

Your site is tested, validated, and ready for the world. In the final lesson — Lesson 21: Publishing to Netlify — you'll deploy your site to the internet for free. You'll learn about hosting, domain names, continuous deployment, and how to share your creation with anyone, anywhere. This is the finish line.