Guide
WEB INTERVIEW Qs
Technical questions and model answers for interviewing web developers. Covers HTTP/REST, CSS, browser rendering, accessibility, security, and performance.
Last updated: May 2026
Explain the differences between REST API and GraphQL, and when to use each
REST returns resources across multiple endpoints with fixed structures. It's simple, cache-friendly, and follows HTTP semantics. GraphQL uses a single endpoint where clients query only the fields they need, preventing over-fetching and under-fetching. REST suits microservices and CDN-cached APIs; GraphQL fits mobile apps and frontends with complex data dependencies.
Explain CSS specificity and when to use Flexbox vs Grid for modern layouts
Specificity determines selector priority: inline styles > IDs > classes/attributes > elements. Avoid !important and use naming conventions like BEM to keep specificity low. Flexbox is for one-dimensional layouts (row or column), while Grid is for two-dimensional layouts (rows and columns). Use Grid for overall page structure and Flexbox for component-level alignment.
Describe the browser's Critical Rendering Path
The browser parses HTML to build the DOM, and CSS to build the CSSOM. These are combined into the Render Tree, followed by Layout (Reflow) to calculate element sizes and positions. Then Paint draws pixels for each element, and Composite merges multiple layers. JavaScript blocks parsing, so optimize with defer/async and lazy loading.
What are the main WCAG principles and practical implementation examples?
WCAG's four principles are Perceivable, Operable, Understandable, and Robust. Practical examples: add alt text to images, associate labels with form inputs, ensure all features are keyboard-accessible, maintain sufficient contrast ratios (4.5:1+), and supplement with ARIA attributes for screen readers. Audit regularly with Lighthouse and axe DevTools.
Explain how CORS, XSS, and CSRF work and how to mitigate them
CORS relaxes the browser's same-origin policy; the server specifies allowed origins via the Access-Control-Allow-Origin header. XSS injects malicious scripts — mitigate with input sanitization, Content-Security-Policy, and HttpOnly cookies. CSRF sends unintended requests from authenticated users — prevent it with CSRF tokens, SameSite cookies, and Origin header validation.
List the key techniques for web performance optimization
Key techniques: (1) Image optimization — convert to WebP/AVIF, responsive images, lazy loading. (2) Code splitting — route-based or component-based dynamic imports. (3) Caching strategies — service workers, CDNs, and HTTP cache headers. (4) Inline critical CSS and defer non-critical CSS. (5) Font optimization — subset fonts and use font-display: swap. (6) Monitor and improve Core Web Vitals (LCP, INP, CLS).
Contact
Looking for a Web Developer?
I can support your technical interviews, advise on hiring, or join directly as your web engineer.