You've got a shortlist meeting on Monday, a stack of CVs that all list React, JavaScript and APIs, and no consistent way to tell who can build and debug a production web product. That's where most screens fail. They reward memorised definitions and miss reasoning, trade-offs and communication.
A useful set of Web Technologies Interview Questions treats each question as a reusable hiring instrument. It reveals how a candidate reasons, applies security and performance principles, and behaves when requirements are incomplete. The 10 questions below are organised by technical category and include the signals to listen for, a practical scoring approach, and guidance for moving each question from a phone screen into a structured assessment.
That matters more in India now because scale has changed the job. Internet connections grew from 25.15 crore in March 2014 to 96.96 crore in June 2024, a 285.53% rise, while broadband connections rose from 6.1 crore to 94.92 crore, an increase of 1,452%, according to government data on India's internet and broadband expansion. Candidates who only know framework trivia won't handle variable networks, mobile-first interfaces, caching and secure authentication at that scale. Test foundations first, then test judgement.
1. Explain the HTTP Request-Response Cycle, Methods, and Status Codes
Difficulty, foundational. Use this in a phone screen for front-end, back-end and full-stack roles. A candidate who can't trace a request can't debug an API, a cache or a login failure, whatever framework they list on their CV.
Ask them to walk through submitting a login form. The browser sends a request with a method, URL, headers and optional body. The server processes it and returns a status code, headers and optional body. A strong answer uses a concrete example, such as POST /login returning 200 with a Set-Cookie header for success or 401 for invalid credentials.
What a strong answer includes
- Safe and idempotent methods: They distinguish the two and explain why PUT is idempotent while POST isn't, which matters for retries.
- Caching in practice: They know a 304 Not Modified response lets the browser reuse cached assets and save bandwidth, like REST APIs from Stripe that use POST to create charges and GET to retrieve them.
- HTTPS awareness: They name TLS as the secure transport, not a vague mention of encryption.
Score it directly. A weak answer lists methods. A mid-level answer explains request and response accurately. A strong answer adds idempotency, caching and status code choices, and explains consequences for the user. If you need scaffolding for the wider screen, align this with your broader technical round interview questions so every panel scores the same way.
2. What Is the Difference Between REST and GraphQL
GitHub offers both a REST API and a GraphQL API, and Shopify provides GraphQL Admin APIs. That's the right starting point for this question. The two approaches coexist, and a candidate who frames it as a winner-takes-all contest hasn't shipped either under pressure.
REST identifies resources by URLs and manipulates them with HTTP methods. It's simple, cache-friendly and easy for public consumers to understand, which is why Stripe's public API is a widely cited REST design. The cost shows up when clients need different shapes of data. They over-fetch, under-fetch, or make multiple round trips.
GraphQL flips that trade-off. Clients request exactly the fields they need through a single endpoint, which helps complex, multi-client frontends. It also introduces new operational work, including query depth limits, complexity controls and rate limiting, because a flexible query can become an expensive one.
How to score it
Ask when they'd choose each. For a phone screen, REST for a simple public API and GraphQL for varied client needs is enough. For a structured follow-up, require them to discuss caching, versioning, error handling and authorisation in their chosen design. That's where senior candidates separate themselves. They'll talk about who consumes the API, how you'll monitor it, and how you'll stop a bad query from hurting everyone else.
3. Explain the Differences Between Var, Let, and Const in JavaScript
Don't let this become trivia. Used badly, it's a vocabulary test. Used well, it's a fast probe into scope, which is where real bugs live.
var is function-scoped and hoisted with an initial value of undefined. let and const are block-scoped and stay in the temporal dead zone until declaration. const prevents reassignment of the binding, but it doesn't make an object immutable. That last distinction catches a lot of candidates who've only read summaries.
Give them a snippet instead of asking for definitions. A for loop with var inside setTimeout logs the same final value every time, while let creates a new binding per iteration. Ask them to predict the output, then ask how they'd fix it. You'll learn more in a minute than from five definitional answers.
Practical rule: Score the explanation of why the difference matters, not the recital of keywords.
Listen for const by default, let when reassignment is needed, a habit reflected in the Airbnb JavaScript Style Guide and in most React codebases where components and hook results use const. In an AI-led first round, this works as a short code prediction. In a live follow-up, push on hoisting edge cases only if the role genuinely needs deep language knowledge. Otherwise move on.
4. What Is a Closure in JavaScript and Why Is It Useful
Difficulty, intermediate. This is one of the better tests of conceptual understanding beyond syntax, especially for mid-level front-end roles. A closure is a function that retains access to variables from its outer lexical scope even after the outer function has returned.
Ask for code, not a definition. A makeCounter factory that keeps count private and returns a function to increment it tells you immediately whether they understand the mechanism. If they can write a simple once() function as well, they can apply it, not just name it.
Strong candidates connect closures to work you've got in your codebase. Debounce utilities in libraries such as Lodash use closures to store timer IDs. Event handlers, module patterns and data privacy all lean on the same idea. React developers should also be able to explain, in plain terms, why a stale closure can capture an old value in a hook or an interval.
Watch for two red flags. The first is a textbook definition with no use case. The second is confidence without caution. Better answers mention memory implications, because retained references can keep data alive longer than intended. For scoring, award the top mark only when the candidate explains the mechanism, writes working code, and names a trade-off. That's a hireable signal, not a party trick.
5. How Does the JavaScript Event Loop Work
If you're hiring senior or full-stack developers, don't skip this. JavaScript is single-threaded, yet it handles timers, network requests and user events without freezing. Candidates who understand why can reason about responsiveness. Candidates who don't will blame the framework when the UI stutters.
The call stack runs synchronous code. The browser or Node.js runtime handles asynchronous work in the background. Completed callbacks wait in queues, with microtasks such as Promise callbacks handled before the next macrotask, and the event loop moves work onto the stack when it's empty. Node.js uses this model with libuv to serve HTTP requests, and browsers use it to keep the interface responsive while fetch() resolves.
A quick high-signal test
Ask them to predict the order of console.log, setTimeout and Promise.then in one snippet. Weak candidates guess. Strong candidates explain microtasks before macrotasks and then apply it. They'll say heavy computation should be chunked or moved to Web Workers, and they'll mention large React applications splitting work so they don't block the main thread.
Use this question later in the process, after a first screen, because it needs room for follow-up. Teams building consistent preparation and assessment flows often pair it with structured guidance on how to prepare for technical interviews for software engineering and data science roles, so candidates and interviewers work from the same expectations.
6. Promises Versus Async/Await and Handling Asynchronous Code
Start with a refactor, not a definition. Give the candidate a callback-based snippet and ask them to rewrite it with async/await. You'll see whether they understand the model or just prefer the syntax.
A Promise represents the eventual completion or failure of an asynchronous operation. async/await is built on Promises and lets that code read in sequence. The fetch API returns Promises, so this isn't abstract. It's the daily work of loading profiles, orders, dashboards and search results.
The diagram below is useful here because async code only makes sense once a candidate understands how queued work returns to the call stack.
Then probe the mistakes that cost you in production. Ask when they'd use Promise.all to fetch a user profile and order history in parallel instead of awaiting them one by one. Ask what happens on failure. Strong answers cover unhandled rejections, timeouts, cancellation where appropriate, and error middleware in Node.js frameworks such as Express. They don't just describe the happy path.
Score the top band for candidates who choose parallel or sequential execution based on dependencies, and who tell you what the user sees when one request fails. That's maintainable async logic. Syntax alone isn't.
7. What Is the Virtual DOM and Why Do Frameworks Use It
The best answers here puncture a myth. The Virtual DOM isn't a magic speed boost, and it isn't always faster than direct DOM manipulation. It's a lightweight in-memory representation of the actual DOM that lets a framework make updates predictable.
When state changes, the framework builds a new virtual tree, compares it with the previous one through diffing, and applies the minimal changes to the actual DOM through reconciliation. React's reconciliation powers products such as Facebook and Instagram. Vue uses a virtual DOM with compiler optimisations. Svelte and Solid take a different route, compiling away much of the runtime overhead or using fine-grained reactivity.
A Virtual DOM is a means to predictable updates. If a candidate sells it as pure performance, push harder.
Follow up with keys in lists. Candidates who've debugged a reordering bug will explain that stable keys help React identify items during reconciliation, and that array indexes are a poor substitute when items move or get deleted. That answer reveals production experience quickly.
For a recruiter-led screen, accept a clear explanation of diffing and reconciliation. For a senior interview, require trade-offs. Ask when direct DOM work, fine-grained reactivity or virtualisation of a long list would be the better tool, and how they'd measure before optimising.
8. Cookies Versus LocalStorage Versus SessionStorage and When to Use Each
This question is really a security question. Treat it that way, and it becomes one of the most valuable items in your Web Technologies Interview Questions bank for any role touching authentication.
Cookies are sent automatically with HTTP requests and can carry expiry, domain, path and security flags. localStorage persists until explicitly cleared and isn't sent to the server automatically. sessionStorage lasts only for the tab session. A candidate should be able to state those mechanics without hesitation, then make choices from them.
- Login sessions: Session cookies with HttpOnly and Secure flags are a common pattern in frameworks such as Django and Rails.
- Guest preferences: E-commerce sites often keep cart contents for guest users in localStorage, where persistence is useful and sensitivity is low.
- Partial form input: Multi-step forms can use sessionStorage to preserve progress within a tab without keeping it longer than needed.
The signal you're listening for is this. Authentication tokens generally shouldn't be stored in localStorage because of XSS risk. Ask them to set a secure cookie and explain each flag, including SameSite. For a senior follow-up, ask how GDPR and ePrivacy rules affect cookie consent and retention. If they can't connect storage choice to threat model, don't give them auth work.
9. What Is CORS and How Do You Resolve Cross-Origin Request Errors
Every web team hits this. A React app on localhost:3000 calls an Express API on localhost:5000, the browser blocks it, and someone suggests fixing it in client code. That suggestion is the tell.
Cross-Origin Resource Sharing is a browser security mechanism. The same-origin policy blocks cross-origin reads by default, and CORS headers from the server tell the browser which origins, methods and headers are allowed. The fix belongs on the server, in deployment configuration, or in the platform in front of the API. Cloud storage services such as AWS S3 expose CORS configuration for exactly this reason, enabling browser uploads from approved origins.
Ask the candidate to debug a failing preflight request in browser developer tools. They should check the request origin, the OPTIONS response, allowed headers, and whether credentials are involved. Public APIs from providers such as Stripe and Twilio need deliberate origin rules for browser-based integrations, not a blanket allow.
Red flag to record:
Access-Control-Allow-Origin: *offered as the default answer, especially when cookies or credentials are required.
Score highly when the candidate restricts origins to trusted domains, allows only the methods and headers the feature needs, and verifies the fix in the network panel. That's browser security and deployment knowledge in one answer.
10. Flexbox Versus CSS Grid and When to Use Each Layout System
Layout questions expose whether a front-end candidate can build interfaces that survive real devices, real content and real languages. In India, that's not an edge case. The IAMAI and Kantar report recorded 886 million active internet users, including 488 million rural users, and 870 million users accessing content in Indic languages, according to the IAMAI and Kantar Internet in India 2024 report. An English-first, desktop-first layout assumption won't serve that audience.
Flexbox is one-dimensional. It arranges items along a row or a column, so it suits navigation menus, button groups and component internals. CSS Grid is two-dimensional. It controls rows and columns together, so it suits page structures and card layouts. News sites such as The New York Times use Grid for article and section layouts, while Bootstrap built its system on Flexbox. Strong candidates say the two complement each other without prompting.
Make it practical. Ask them to build a header with a logo, navigation and a button using Flexbox, then a three-column card layout using Grid with minmax() and auto-fit. Then ask what breaks when translated text gets longer, fonts load slowly, or the network is weak. Top answers cover responsive behaviour, intrinsic sizing and logical reading order so keyboard and screen reader users aren't left with a visual order that doesn't match the document.
10 Essential Web Technologies Interview Questions Comparison
| Topic | 🔄 Complexity and resources | 📊 Expected outcome | ⭐ Ideal use and key advantage | 💡 Key consideration |
|---|---|---|---|---|
| HTTP request-response cycle | Low; requires a client, server, and understanding of HTTP semantics | Predictable communication through requests, responses, and status codes | Web communication; broadly supported methods and clear response semantics | HTTP is stateless; use cookies, sessions, or tokens when state is needed |
| REST vs GraphQL | REST: low to moderate; GraphQL: moderate, with schema and resolver setup | REST offers resource-based APIs; GraphQL enables tailored data retrieval | REST for simpler, cache-friendly APIs; GraphQL for complex clients needing flexible queries | GraphQL needs query safeguards; REST and GraphQL can coexist |
var, let, and const |
Low; requires understanding scope, hoisting, and reassignment | Clearer variable behavior and fewer scope-related bugs with let and const |
Modern JavaScript; const communicates stable bindings, while let allows reassignment |
const does not make object contents immutable |
| JavaScript closures | Moderate; requires lexical-scope understanding | Enables retained state, encapsulation, and reusable function patterns | Factories, callbacks, event handlers, and memoization | Closures retain references, which can affect memory use |
| JavaScript event loop | Moderate; requires understanding the call stack, queues, and runtime | Supports non-blocking asynchronous work and responsive interfaces | Browser and Node.js applications; handles I/O without blocking on each operation | Microtasks run before the next macrotask; long synchronous work blocks the thread |
Promises vs async/await |
Moderate; requires asynchronous flow and error-handling knowledge | More maintainable asynchronous code; parallel operations can improve ⚡ efficiency | Network requests and other asynchronous tasks; async/await often improves readability |
Use Promise.all for independent tasks and handle rejections |
| Virtual DOM | Moderate; requires understanding diffing and reconciliation | Applies targeted UI updates and supports declarative rendering | Component-based interfaces; predictable state-driven updates | It is not automatically faster than direct DOM updates |
Cookies vs localStorage vs sessionStorage |
Low to moderate; requires browser storage and security knowledge | Stores data with different lifetimes and request-transmission behavior | Cookies for server-managed sessions; local storage for persistent preferences; session storage for tab-specific data | Protect against XSS; use secure, appropriately configured cookies for sensitive sessions |
| CORS | Moderate; requires browser security and HTTP header knowledge | Permits controlled cross-origin access while preserving browser protections | Web apps calling APIs on other origins; enables explicit resource sharing | Configure the server's response headers; credentialed requests cannot use a wildcard origin |
| Flexbox vs CSS Grid | Low to moderate; requires layout and responsive-design knowledge | Creates adaptable layouts without floats or extensive positioning | Flexbox for one-dimensional layouts; Grid for two-dimensional layouts | The systems complement each other; preserve logical reading order |
Turn Questions into Consistent Hiring Decisions
A good question bank only helps if every candidate gets the same instrument. Without that, you're comparing one interviewer's favourite JavaScript puzzle with another interviewer's casual chat about frameworks, and calling the result a hiring decision. It isn't. It's noise, and noise is expensive when you're hiring at volume.
Fix the structure first. Assign each question a difficulty level, a role fit and a purpose. HTTP, storage and CORS work well in a first screen because they produce clear right and wrong signals fast. The event loop, API design and layout trade-offs belong in a structured follow-up where the candidate has room to write code, defend a choice and respond to a changed requirement. Keep the same core question, then change the depth. A recruiter can ask what CORS is. An engineer can ask the candidate to debug a preflight failure with credentials. Both are scoring the same competency at different levels.
Then score against observable evidence, not confidence. A simple 1 to 4 scale works if you anchor it. At 1, the candidate gives an incorrect or unsafe answer, such as storing auth tokens in localStorage without caveats. At 2, the definition is broadly right but there's no application. At 3, they apply the concept to a realistic scenario and handle the main failure case. At 4, they explain trade-offs, name an alternative, and tell you how they'd verify the result in production. Record the evidence in the candidate's own terms. That record is what lets a hiring manager challenge a score later, and it's what stops keyword matching from passing as assessment.
Don't stop at framework syntax, because the market hasn't. India's IT job demand reached approximately 1.8 million roles in 2025, a 16% increase year over year, with more than half of hiring concentrated in emerging capabilities including AI and ML, cloud engineering, DevOps, cybersecurity, data engineering and platform engineering, and legacy technology skills representing less than 10% of demand, according to reporting on India's 2025 IT job demand growth. For web roles, that means your follow-ups should reach into cloud deployment, CI/CD pipelines, containerisation, observability and API security. A candidate who can build a page but can't describe how it ships, how it fails or how you'd roll it back isn't ready for production ownership.
Calibrate for experience too. Professionals with 4 to 10 years of experience represented about 65% of 2025 IT demand, while demand for AI and ML, cloud and cybersecurity capabilities reportedly increased 30 to 42% from 2024, according to foundit's annual hiring trends for 2025. So ask experienced candidates for measurable engineering outcomes. What latency were they targeting. What throughput did they assume. What was the error budget, the test coverage, the rollback strategy. Naming Docker or a framework isn't an answer. Describing a decision and its consequence is.
Run the process in stages. Start with an AI-driven phone screen to collect consistent first-pass evidence from every applicant, using the same questions and the same scoring anchors. Route shortlisted candidates into role-specific technical discussions or coding assessments where the depth increases. Career Central supports that progression through AI-led phone screening, first-round interviews and coding assessments, which is useful when your team needs consistency without adding screening hours. Keep humans on judgement calls, final trade-off discussions and team fit. Let the structured stages do the repetitive evidence gathering they're good at.
Finally, review your bank like you'd review a product. Retire questions that everyone passes or everyone fails for the wrong reason. Check whether scores predict performance after hiring. Add accessibility, localisation, performance under variable networks and secure authentication where your users need them. Your Web Technologies Interview Questions should evolve with your stack and your audience, not sit in a document nobody owns.
If you're screening web developers at volume and need every candidate assessed against the same questions and scoring anchors, Career Central offers AI-driven phone screening, first-round interviews and coding assessments for organisations. Use it to gather consistent first-pass evidence on topics like HTTP, JavaScript and API security before your engineers run deeper technical discussions. Visit Career Central to see how it fits your hiring process.