Web Developer Interview Prep Guide

Cover HTML parsing, CSSOM construction, render tree, layout, and paint. For optimization: inline critical CSS, defer non-critical CSS, use async/defer for JavaScript, implement resource hints (preconnect, preload, prefetch), optimize fonts with font-display: swap, and serve properly sized images with modern formats like AVIF.

Use grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) for a fluid grid without media queries. Add gap for spacing, aspect-ratio for consistent image sizing, and object-fit: cover for image cropping. Discuss why auto-fill vs auto-fit matters and how to handle grid items of varying heights.

Cover LCP (Largest Contentful Paint), INP (Interaction to Next Paint, which replaced FID in 2024), and CLS (Cumulative Layout Shift). Explain real user monitoring with the web-vitals library, lab testing with Lighthouse, and field data from CrUX. For each metric, provide specific optimization strategies with measurable targets.

Start by testing on a throttled connection (Slow 3G) with a mid-range device simulation. Check bundle size, number of requests, unoptimized images, render-blocking resources, and third-party scripts. Use WebPageTest with a Mumbai server location for real-world data. Prioritize reducing JavaScript payload, implementing lazy loading, and adding a service worker for caching.

Use AbortController to cancel previous fetch requests, a debounce function with setTimeout/clearTimeout, and proper loading/error state management. Show understanding of the event loop by explaining why debounce works. Handle edge cases: empty input clearing results, network errors, and race conditions between responses arriving out of order.

Cover semantic HTML (form labels, fieldsets, headings hierarchy), keyboard navigation (focus management, tab order), ARIA attributes where native HTML is insufficient, color contrast ratios (4.5:1 for text), screen reader testing with NVDA/VoiceOver, and automated testing with axe-core. For checkout specifically, address error messaging, form validation announcements, and progress indication.

Be specific about the before and after metrics: Lighthouse scores, load times, Core Web Vitals, conversion rates, or bounce rates. Describe the technical changes you made and how you measured the impact. Connect performance improvements to business outcomes whenever possible.

HTTPS encrypts data in transit via TLS. CORS controls which origins can make cross-origin requests using Access-Control-Allow-Origin headers. CSP prevents XSS by specifying allowed sources for scripts, styles, images, and connections. Discuss how these layers complement each other and common misconfigurations that create vulnerabilities.