Test and fix

QA checklist

Go through this list for every page. Your ticks are saved in this browser.

• Every page passes the W3C Markup Validator with no errors
• No sideways scrolling at 320, 768, 1024 and 1440 px wide
• Tested on a real phone
• All text passes WCAG AA contrast (4.5:1 for body text)
• Every image has meaningful alt text
• Navigation and lightbox work with the keyboard alone, with a visible focus outline
• Every link and image works, using relative paths
• Unique title and description on every page, and the favicon shows
• Image credits appear on the site
• File and folder names have no spaces, and every name in my code matches the real file exactly, including capitals
• I can explain what each part of my HTML, CSS and JavaScript does

Tools

• W3C Markup Validator

  Upload each HTML file. Fix errors from the top down; one missing closing tag can cause several errors.

• WebAIM Contrast Checker

  Enter your text and background colors from the design tokens.

• WAVE

  Checks a live page for missing alt text, contrast and heading problems. Run it on your draft URL from step 4.3.

Inspect with Chrome DevTools

DevTools lets you see and change any page's HTML and CSS live. Changes are temporary, so you can experiment safely and then copy what works into your files.

Open DevTools in any of three ways:

• Right-click part of the page and choose Inspect
• Press F12
• Press Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac)

Click the device toolbar icon (a phone and tablet) to preview any screen width.

Compare design and build

1. Take screenshots of your live draft pages (step 4.3) at 375, 768 and 1440 px and place them beside your Figma frames.

2. Hunt for differences in spacing, font size and weight, alignment and color. Fix what you can.

3. Write your reflection (150–250 words): what matches, what changed in the build and why, and what you would improve.

© Created by Sara Rosenstock, Marietta College Graphic Design.