Lesson playgrounds teach concepts; production pages need extra checks. Run this list before calling a page “done.”
Content and HTML
- One clear
h1; logical heading order. - Every image has appropriate
alt. - Forms have labels, errors, and submit buttons.
- Links describe destinations; external tabs use
rel="noopener noreferrer".
CSS and layout
- Works at 320px and 1280px widths.
- No horizontal scroll from overflowing elements.
- Focus states visible on keyboard tab.
- Color contrast meets WCAG targets for text.
Performance and delivery
- External CSS minified/cached in real deploys.
- Images sized for display dimensions; modern formats where helpful.
- Critical content visible without waiting for heavy assets.
SEO basics
- Unique
titleand meta description per page. - Meaningful link text (not “click here”).
- Canonical URL when duplicates exist.
Important interview questions and answers
- Q: What is your pre-merge checklist for UI?
A: Responsive breakpoints, keyboard pass, contrast spot-check, HTML validator on templates, and visual diff if available. - Q: How do you catch accessibility regressions?
A: Automated axe/lighthouse in CI plus manual keyboard and screen reader smoke tests on critical flows. - Q: Why validate HTML if browsers “fix” it?
A: Parser repairs differ across tools; valid HTML reduces surprises in email, search, and assistive tech.