Web Developer Interview Questions & Answers (2026 Guide)

Explain that semantic HTML uses elements that describe their meaning to both the browser and developer (like <article>, <section>, <nav>) versus generic elements like <div>. Discuss how semantic elements improve accessibility for screen reader users, help search engines understand content structure, and make code more maintainable. Provide examples of when you'd use <article> instead of <div>, and mention that semantic HTML often eliminates the need for excessive ARIA attributes since the meaning is already clear.

Describe the box model as concentric rectangles: content in the center, then padding (inside), border, and margin (outside). Explain that padding adds space inside the element around content, margin adds space outside the border between elements, and border is the visible line between them. Mention that by default, width and height only apply to content (box-sizing: content-box), but border-box includes padding and border in the calculation. This changes how you calculate total element size and why many developers reset to border-box.

Explain that Flexbox handles one-dimensional layouts (rows or columns), distributing space along a single axis with excellent alignment control. Grid handles two-dimensional layouts (rows AND columns simultaneously), letting you position items both horizontally and vertically. Use Flexbox for navigation bars, card layouts, or distributing items in a row; use Grid for complex page layouts, dashboard designs, or when you need precise control over both axes. Mention that they're not mutually exclusive—you often use Grid for overall page structure and Flexbox within grid items.

Explain that JavaScript uses a single-threaded event loop: the call stack executes synchronous code, and when asynchronous operations (like setTimeout or fetch) complete, their callbacks move to the task queue. Once the call stack is empty, the event loop pulls from the task queue. Mention microtasks (promises, MutationObserver) which execute before regular tasks, and explain how long-running synchronous code blocks the entire loop, freezing the UI. This is why expensive computations should be chunked, moved to Web Workers, or wrapped in requestAnimationFrame.

Explain that var is function-scoped and hoisted to the top of functions (initialized as undefined), while let and const are block-scoped to their nearest enclosing block. Const prevents reassignment but not mutation of objects, making it ideal for preventing accidental variable overwrites. In modern JavaScript, default to const, use let when you need to reassign, and avoid var. Mention that hoisting is the reason var declarations appear at the top of their function scope even if declared lower, causing unexpected behavior.

Explain that this is determined by how a function is called, not where it's defined. In regular functions, this refers to the calling object; in methods, this refers to the object; in regular functions called without an object, this refers to the global object (or undefined in strict mode). Arrow functions don't have their own this—they inherit it from their enclosing scope. Use call/apply/bind to explicitly set this. This knowledge prevents bugs like storing event handlers that lose their context, which is why many developers bind methods in class constructors or use arrow functions.

Core Web Vitals are three metrics measuring page experience: LCP (how quickly the main content loads—target under 2.5s), FID/INP (responsiveness to user input—target under 100ms), and CLS (visual stability—target under 0.1). Poor Core Web Vitals hurt user experience and SEO rankings. Measure them with Google's tools (Lighthouse, PageSpeed Insights, Web Vitals library). Optimize LCP by reducing server response time and code splitting; improve FID by reducing JavaScript execution; reduce CLS by reserving space for dynamic content and avoiding unsized images.

Start with proper sizing—don't send desktop images to mobile phones. Use responsive images with srcset and picture elements to serve appropriately sized versions. Use modern formats (WebP) with fallbacks to JPEG/PNG. Implement lazy loading with the loading='lazy' attribute for below-the-fold images. Compress images aggressively without quality loss. Consider using image CDNs that automatically optimize. Use aspect-ratio CSS to prevent layout shifts. For LCP images, use fetchpriority='high' to prioritize critical images. Measure actual improvements with browser DevTools and Lighthouse.

Use code splitting to break large bundles into smaller chunks loaded on-demand. Dynamic imports let you lazy-load features when needed. Enable tree-shaking in your bundler to remove unused code. Analyze bundle size with tools like webpack-bundle-analyzer to identify what's actually shipped. Remove unnecessary dependencies and prefer lightweight alternatives. Defer non-critical JavaScript execution with async/defer attributes. Minify and compress all bundles. Consider which third-party scripts are essential and defer tracking/analytics scripts. Monitor with Lighthouse and Web Vitals to catch regressions.

Use STAR format: describe the Situation (what project, what was wrong), Task (your responsibility), Action (step-by-step debugging), Result (improvement). Example: "A page was taking 6 seconds to load. I profiled with Lighthouse discovering 80% of time was a JavaScript bundle. I used webpack-bundle-analyzer to find unused code, removed it, implemented code splitting for routes, and deferred non-critical scripts. Load time dropped to 1.5 seconds." Emphasize your systematic approach, how you measured the problem, hypotheses you tested, and how you validated the fix. Show you used tools and data to guide decisions.

Example: "I deployed responsive CSS assuming mobile-first on a live project without testing older devices. Safari on iOS 10 didn't support CSS Grid, breaking the layout for users in markets using older devices. I immediately implemented Grid fallbacks with @supports queries and learned to test on actual older browsers using BrowserStack before deployment. Now I check caniuse for support and maintain older device testing in my CI/CD process." Show specific mistake, business impact, root cause, and concrete improvements preventing recurrence.

Discuss varied sources: "I follow key blogs like Web.dev and CSS-Tricks, listen to tech podcasts during commutes, and participate in communities like Dev.to and Hacker News. I dedicate time weekly to reading articles about emerging topics. For specific interests (accessibility, performance), I dive deeper. I don't try learning everything—I focus on trends relevant to my work. Recently, I explored modern tooling like Vite and native CSS features like cascade layers. I'm cautious about hype; I evaluate whether new frameworks solve real problems before investing time." Show intentional learning and discernment.