How to Use This Checklist
The Front-End Checklist works best when you start with the right workflow. Use the paths below to choose whether you are learning, reviewing, launching, or auditing with AI.
Choose your starting path
Junior developer
Start with foundations
Begin with HTML Foundations or Accessibility Essentials when you want a reliable first pass instead of the full corpus.
Senior reviewer
Run a broad audit
Use Comprehensive Web Audit Checklist when you need one cross-discipline pass and a prioritized action list.
Launch workflow
Use the release gate
Start with Launch Checklist when the question is not “what should I learn?” but “what must be true before this ships?”
AI-assisted audit
Bring the corpus into MCP
Use MCP when you want the same rule corpus available inside code review, URL audits, and AI workflows.
Understanding Priority Levels
Each rule is assigned a priority level based on its impact. Use these to decide what to tackle first and what can wait.
Must fix immediately. These issues cause your site to break, block entire user groups, or create security vulnerabilities.
Examples
- Missing DOCTYPE triggers quirks mode
- No viewport meta = mobile unusable
- Missing alt text blocks screen readers
- No HTTPS exposes user data
→ Fix these before launching
Should fix soon. These create significant barriers or degraded experiences for many users, but workarounds may exist.
Examples
- Poor color contrast hurts readability
- Missing meta descriptions hurt SEO
- Render-blocking resources slow load
- No lazy loading wastes bandwidth
→ Fix these in your next sprint
Good to have. These improve quality and follow best practices but won't cause major issues if skipped.
Examples
- Print stylesheet for print users
- Favicon for browser tabs
- CSS organization for maintainability
- Code cleanup for professionalism
→ Address when you have time
Nice to have. These provide incremental improvements or polish. Users are unlikely to notice if missing.
Examples
- Advanced image optimizations
- Progressive JPEG loading
- Enhanced metadata beyond basics
- Developer tooling setup
→ Consider for polish phase
Quick Start Guide
Start with Critical
Filter by Critical priority and fix those first. These are non-negotiable for a production site.
Work through High
Once Critical items are done, move to High priority. These significantly improve user experience.
Polish with Medium & Low
Use Medium and Low priorities for ongoing improvements as you refine your site.
Pro Tips
Use AI prompts
Each rule includes AI prompts to check, fix, and explain the issue. Copy them into your AI assistant for help.
Track your progress
Mark rules as complete to track your progress. Your checklist state is saved locally in your browser.
Filter by category
Working on performance? Filter by that category to focus on related rules without distraction.
Don't do everything
Not every rule applies to every project. Skip what doesn't fit your use case.