Quality: Responsive, Fast & Accessible

This is the lesson that separates professionals from people who just prompted a page. AI-made sites often look finished and are quietly broken. They are slow, hard to use for some people, fragile on odd screen sizes, or wrong in a browser you did not test. Clients and search engines both notice. You will learn a short process you can repeat. It covers responsiveness, speed, accessibility and correctness.

Testing on different screens

• Design and test mobile first. Start at 375 pixels, then 768, 1024 and 1440.
• Test in the device modes of real browsers, and on at least one real phone.
• Look for sideways scrolling, overlapping text, tiny tap targets (aim for at least 44 pixels), stretched images and menus that do not close.
• Test long and short content: a 60-character headline, a missing image and an empty list.
• Test in landscape, and with the browser text size made larger.

Speed: the numbers that matter

Google's Core Web Vitals measure what real users experience. Good targets are these. Largest Contentful Paint (LCP) at or under 2.5 seconds. Interaction to Next Paint (INP) at or under 200 milliseconds. Cumulative Layout Shift (CLS) at or under 0.1. Run Lighthouse with mobile settings, and treat its report as a to-do list. Remember that scores vary between runs. Judge trends and real fixes, not one number.

• Images are usually the biggest win. Use modern formats (WebP or AVIF), the right sizes with srcset, lazy loading below the fold, and an explicit width and height to prevent layout shift. Preload the hero image.
• Fonts: limit the families and weights, host them yourself or preconnect, and use font-display: swap.
• JavaScript: ship less. Remove unused libraries, avoid heavy animation libraries for simple effects and defer scripts that are not critical.
• CSS: avoid huge unused frameworks in production builds. Inline the critical CSS where your tools support it.
• Use a CDN and caching headers, and compress text files.

Accessibility essentials (WCAG 2.2 AA)

• Color contrast meets AA, and information is never shown by color alone.
• Everything works with a keyboard alone, in a logical order, with a visible focus marker.
• Meaningful structure: landmarks, one h1, headings in order, lists as lists, buttons as buttons and links as links.
• Every image has suitable alt text. Decorative images get an empty alt.
• Form fields have visible labels and clear errors, and they are linked to their inputs in the code.
• Motion respects prefers-reduced-motion. Nothing flashes. Videos have captions.
• Text can be enlarged to 200 percent without losing content, and touch targets are big enough.

Correctness and robustness

• Click every link and button. Test every form with valid, invalid and empty input.
• Check 404 pages, redirects, the favicon, social-share (Open Graph) previews and print styles if they matter.
• Test in current Chrome, Safari and Firefox. Safari on iPhone catches many layout bugs.
• Check the copy against the client's facts: prices, hours, addresses and phone numbers.
• Check the site without JavaScript for the critical content, and with a slow network.

Use AI as a reviewer, not as the test

Review this page's HTML/CSS as an accessibility and performance auditor.
List concrete problems with the exact element and a fix, grouped as: Blocker / Should fix / Nice to have.
Check: heading order, landmarks, alt text, form labels, button vs div usage, focus styles, contrast
issues visible in the CSS, tap target sizes, missing width/height on images, render-blocking resources,
and anything that could cause layout shift. Do not say "looks good" for items you cannot verify from
the code; say "needs manual testing".

<code>
{{paste_code}}
</code>