Frontend Interview Fundamentals Quiz: Browser, CSS, JavaScript, HTTP

In most interviews, you’ll get a few fundamentals questions. They aren’t trick puzzles — they’re checks to see if you truly understand the everyday tools you use: the browser, CSS, JavaScript, and HTTP.

The questions are usually short and simple, but tripping on them creates a bad impression. Example:

• “What’s the difference between relative and absolute positioning in CSS?”
• “What happens in the browser when you type a URL and hit Enter?”
• “How does this behave in a normal function vs an arrow function?”

The good news: the set of topics is small and predictable. If you can explain them in plain English — not just memorize definitions — you’ll breeze through. Below we cover the must-know areas with quick examples.

1. Browser

Almost every frontend interview will touch on how the browser actually works. You don’t need to recite specs — you just need a clear mental model.

• Rendering pipeline: The browser takes your HTML and CSS and turns it into pixels. The flow is: DOM → CSSOM → Render Tree → Layout → Paint → Composite. If you know this, you can explain why changing transform is cheap but changing width can trigger expensive reflows.
• Event loop: JavaScript runs on a single thread, so timing matters. Microtasks (Promises, queueMicrotask) always run beforeMacrotasks (setTimeout, setInterval). Example question: “Why does a Promise.then run before setTimeout?”
• Storage: Know the trade-offs:
  • localStorage → simple key/value, survives refresh.
  • sessionStorage → same but cleared on tab close.
  • cookies → small, sent with every HTTP request (careful with size/security).
  • IndexedDB → structured storage for larger offline data.
  A quick “when to use which” is often enough to score points.

2. CSS

CSS questions are usually fast-fire. They’re testing if you can explain layout bugs, why something overrides something else, or when to pick the right tool.

• Box model: Every element is content + padding + border + margin. By default, width only includes content. box-sizing: border-box makes width include padding + border — which is why modern resets always set it. 👉 Interviewer trick: “Why is my div wider than expected?” → Box model.
• Specificity: The rule order is: Inline > ID > class/attr/pseudo-class > element. Conflicts? Inline wins unless you use !important. 👉 Quick mnemonic: “IDs beat classes, classes beat tags.”
• Flex vs Grid:Flex = 1D (row OR column), best for navbars, buttons, toolbars. Grid = 2D (rows AND columns), best for layouts, dashboards. 👉 If the question says “align in one direction” → Flex. If it says “place items on both axes” → Grid.

3. JavaScript

JS fundamentals show up in almost every interview. They’re testing if you actually use the language at work, not if you can quote the spec.

• Closures: Functions remember the scope they were created in. Lets you keep private state without classes.

  function counter() {
          let n = 0;
          return () => ++n;
          }
          const c = counter();
          c(); // 1
          c(); // 2

  Copy
  👉 Interviewers might ask: “How would you implement once(), debounce, or memoize?”
• this keyword: It’s not about where the function lives, but how it’s called.
  • obj.method() → this is obj.
  • fn() → this is undefined in strict mode (or global in sloppy mode).
  • fn.call(obj) → forces this = obj.
  • Arrow functions don’t bind this — they inherit from the parent scope.
  👉 Quick test: “Why does setTimeout(this.fn, 0) lose context?” → Because this depends on call site.
• Promises vs async/await: Both handle async work.
  • promise.then() = chaining style.
  • async/await = looks synchronous, easier to read.
  • Error handling → .catch() vs try/catch.
  👉 Be ready for “what’s the difference between microtasks and macrotasks” since promises run as microtasks.

4. HTTP

Almost every front-end interview will slip in HTTP basics — because if you don’t understand the network, you can’t ship reliable UIs. These are the must-knows:

• GET vs POST: GET is for fetching data and should be idempotent (same call, same result). POST is for creating or updating — it can change server state and is not idempotent. 👉 If you ever say “I’d use GET to update,” it’s an instant red flag.
• Status codes: Memorize the common ones: 200 (OK), 301 (redirect), 400 (bad request), 401 (unauthenticated), 403 (forbidden), 404 (not found), 500 (server error). In interviews, you might be asked: “What do you do if an API returns 401?”
• Caching: Browsers decide reuse vs refetch based on headers like Cache-Control, ETag, and Last-Modified. Example: Cache-Control: max-age=3600 means “reuse for an hour.” Knowing this shows you can reason about performance and user experience.

📌 Keep answers crisp: 1–2 sentences per concept, with a quick example. That’s all interviewers expect — clarity over depth.

How to prep

👉 Don’t waste time trying to memorize every detail from MDN. Instead, create a 1-page cheatsheet with the essentials — things you can explain in 30 seconds or less.

• Browser: event loop, rendering pipeline, storage options.
• CSS: box model, specificity, flex vs grid.
• JS: closures, this, promises vs async/await.
• HTTP: GET vs POST, key status codes, caching headers.

Then drill these in the quiz practice area. Short daily reps (5–10 minutes) beat cramming the night before.