REVIEWED STARTER COLLECTION

Frontend Interview Questions

Ye collection HTML, CSS aur JavaScript ke individual interview sets ko repeat nahi karta. Focus browser behavior aur cross-layer frontend decisions par hai.

1. At a high level, how does a browser turn HTML, CSS and JavaScript into a page?

Short Answer

The browser parses HTML into a DOM, processes CSS into styling information, combines structure and styles for layout/painting, and executes JavaScript that can read or change the document.

Detailed Explanation

HTML provides document structure, CSS controls presentation, and JavaScript adds behavior. Network loading and script/style placement can affect when parsing and rendering can continue, so frontend performance often depends on how these resources are delivered as well as what they contain.

<link rel="stylesheet" href="app.css">
<script src="app.js" defer></script>

Common follow-up: defer lets an external classic script download without blocking HTML parsing and executes it after parsing completes, before DOMContentLoaded.

Review HTML structure →Review DOM manipulation →

2. What is the Same-Origin Policy, and where does CORS fit in?

Short Answer

The Same-Origin Policy restricts how browser scripts interact with resources from another origin. CORS is an HTTP-based mechanism through which a server can allow selected cross-origin browser requests.

Detailed Explanation

An origin is defined by scheme, host and port. When frontend code calls another origin, the browser may require the target server to return appropriate CORS headers. That means a browser CORS error often cannot be fixed only by changing frontend JavaScript.

fetch("https://api.example.com/courses")
  .then(response => response.json())
  .then(data => console.log(data));

Common follow-up: CORS is a browser-enforced access mechanism; it is not a substitute for authentication or authorization.

Review CORS →

3. What is event delegation and when is it useful?

Short Answer

Event delegation attaches a listener to a parent and handles events from matching descendants as they bubble upward.

Detailed Explanation

It can reduce the number of listeners and works well when child elements are added dynamically. The handler should inspect the event target carefully and identify the intended interactive element.

list.addEventListener("click", event => {
  const button = event.target.closest("[data-remove]");
  if (!button || !list.contains(button)) return;

  button.closest("li")?.remove();
});

Common follow-up: Delegation depends on event propagation; not every event bubbles in exactly the same way.

Review event delegation →

4. Why is client-side validation not enough by itself?

Short Answer

Client-side validation improves user experience, but the server must still validate incoming data because browser-side checks can be bypassed or altered.

Detailed Explanation

HTML constraints and JavaScript feedback can catch mistakes early and make forms easier to use. But requests can be sent outside your UI, so security and data-integrity rules must also be enforced on the server.

<input type="email" name="email" required>

// Helpful UX check — not the final trust boundary
if (!form.checkValidity()) {
  form.reportValidity();
}

Common follow-up: Server validation does not make client validation unnecessary; they solve different problems.

Review server validation →Review HTML forms →

5. What is progressive enhancement?

Short Answer

Progressive enhancement starts with a usable core experience and adds styling or richer JavaScript behavior when the browser and environment support it.

Detailed Explanation

The idea is to prefer native HTML behavior and semantic controls where they already solve the problem, then layer CSS and JavaScript on top. This often improves resilience, accessibility and maintainability compared with rebuilding basic browser behavior from scratch.

<form action="/search" method="get">
  <label for="q">Search</label>
  <input id="q" name="q">
  <button>Search</button>
</form>

<!-- JavaScript can enhance this later -->

Common follow-up: Progressive enhancement does not mean “no JavaScript”; it means JavaScript enhances a sensible baseline instead of unnecessarily replacing it.

Review progressive enhancement →Review semantic HTML →