Final Revision Guide & Engineering Checkpoints

A rapid, high-yield revision checklist for reviewing critical concepts before technical interviews, architecture reviews, or deploying production web applications.

1. HTML5 Foundations & Accessibility Checklist

[ ] Standards Mode: Always declare <!DOCTYPE html> on line 1.
[ ] Root Language: Specify <html lang="en"> (or appropriate locale) for screen reader synthesizers.
[ ] Mobile Scaling: Include <meta name="viewport" content="width=device-width, initial-scale=1.0">.
[ ] Heading Outline: Only one <h1> per page. Maintain strictly sequential <h2> and <h3> tags without skipping levels.
[ ] Form Labels: Every <input> must be explicitly bound to a <label for="id"> or wrapped inside a <label>.
[ ] Image Alt Rule: Informational images require descriptive alt="..."; purely decorative images must have alt="".
[ ] External Links: Append rel="noopener noreferrer" whenever using target="_blank" to stop reverse tabnabbing.
[ ] Native Dialogs: Use <dialog> with .showModal() for accessible focus-trapped dialogs instead of custom <div> popups.
[ ] Golden Rule of ARIA: "No ARIA is better than bad ARIA." Always prefer native semantic elements.

2. CSS Layouts & Performance Checklist

[ ] Universal Reset: *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[ ] Responsive Typography: Use rem for scalable type and spacing; use px for thin borders.
[ ] Proportional Line Height: Use unitless numbers (e.g., line-height: 1.5;) to prevent text overlap bugs.
[ ] Specificity Ladder: Inline (1-0-0-0) > ID (0-1-0-0) > Class/Pseudo-class (0-0-1-0) > Element (0-0-0-1).
[ ] Cascade Layers: Use @layer to define priority order and eliminate !important escalation wars.
[ ] Zero-Specificity Resets: Use :where() for default styles that must be easily overridden by consumers.
[ ] Flexbox vs Grid: Use Flexbox for one-dimensional linear rows or columns; use CSS Grid for two-dimensional coordinate layouts.
[ ] Responsive Without Breakpoints: grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
[ ] GPU-Accelerated Motion: Only animate transform and opacity. Never animate width, height, margin, or top.
[ ] Vestibular A11y: Always support @media (prefers-reduced-motion: reduce).
[ ] Keyboard Focus: Never set outline: none; without providing an accessible :focus-visible alternative.

3. JavaScript Runtime & Security Checklist

[ ] Variable Declarations: Use const by default; use let only for reassignable values. Never use var.
[ ] Non-blocking Loading: Always load application scripts with <script src="..." defer></script>.
[ ] Strict Equality: Always use === and !== to prevent unintended type coercion bugs.
[ ] Falsy Pitfall: Use Nullish Coalescing (??) instead of Logical OR (||) when 0 or "" are valid values.
[ ] Deep Access: Use Optional Chaining (?.) to navigate potentially nullish objects safely.
[ ] Event Loop Sequence: Call Stack clears → ALL Microtasks (Promises) drain → ONE Macrotask (setTimeout) runs → Screen repaints.
[ ] Form Event Listeners: Always call event.preventDefault() inside submit listeners to stop browser page reloads.
[ ] DOM Performance: Batch dynamic DOM insertions using a DocumentFragment or build template strings before injecting.
[ ] Event Delegation: Attach listeners to common parent elements rather than hundreds of child nodes.
[ ] Debounce vs Throttle: Debounce search input keystrokes (300ms); Throttle scroll and resize events (100ms).
[ ] Fetch Error Handling: Always check if (!response.ok) because Fetch does not reject on HTTP 404 or 500 status codes.
[ ] Client Storage Security: Never store JWT tokens or passwords in localStorage. Store authentication tokens in HttpOnly, Secure cookies.
[ ] XSS Prevention: Never inject untrusted user input using .innerHTML. Use .textContent for text!

Final Revision Guide & Engineering Checkpoints ​

1. HTML5 Foundations & Accessibility Checklist ​

2. CSS Layouts & Performance Checklist ​

3. JavaScript Runtime & Security Checklist ​

Final Revision Guide & Engineering Checkpoints

1. HTML5 Foundations & Accessibility Checklist

2. CSS Layouts & Performance Checklist

3. JavaScript Runtime & Security Checklist