Interview Q&A

Short answer: Use <table>, <tr> (row), <th> (header cell), and <td> (data cell).

Example code

<table border="1"> <tr> <th>Name</th> <th>Role</th> </tr> <tr> <td>Sandeep</td> Follow me on LinkedIn: <td>Developer</td> </tr> </table> Key Takeaway: Tables are for data — not for layout.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: A function is a block of reusable code that performs a task or returns a value. Example: function greet(name) { return `Hello, ${name}!`; } console.log(greet("Sandeep"));

Example code

A function is a block of reusable code that performs a task or returns a value. Example: function greet(name) { return `Hello, ${name}!`;
} console.log(greet("Sandeep"));

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Cards are flexible content containers for images, text, and links. <div class="card" style="width:18rem;"> <img src="..." class="card-img-top"> <div class="card-body">...</div> </div> Follow me on LinkedIn:

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Both create objects, but: {} is simpler and faster. new Object() is less common and can be overridden. Example: const a = {}; // Preferred const b = new Object(); // Not preferred

Example code

Both create objects, but: {} is simpler and faster. new Object() is less common and can be overridden. Example: const a = {}; // Preferred
const b = new Object(); // Not preferred

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Functions that execute immediately after being defined.

Example code

(function() { console.log("Runs instantly!"); })(); Used to create private scopes before let and const.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: An event listener waits for user actions (like clicks or keypresses) and runs a function when the event occurs.

Example code

button.addEventListener("click", () => alert("Clicked!"));

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: GPU acceleration is triggered when you use transform, opacity, or will-change. It moves rendering to the GPU, making animations smoother.

Example code

.box { transform: translateZ(0); Follow me on LinkedIn: } Key Takeaway: Use GPU-friendly properties for smoother transitions; avoid triggering layout changes.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Controls what happens when content exceeds the container’s size. Values: visible (default) hidden scroll auto

Example code

div { overflow: auto; } Key Takeaway: overflow: auto adds scrollbars only when needed.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Browsers are forgiving — they use an HTML parser that tries to fix mistakes automatically. For example, missing closing tags are inferred. Example: <p>This is valid Follow me on LinkedIn: <p>This is auto-closed by browser</p> Key Takeaway: Browsers recover from errors, but writing valid HTML ensures consistent rendering.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: YouTube provides an embed link using <iframe>.

Example code

<iframe width="560" height="315" src=" allowfullscreen> </iframe> Key Takeaway: Always use the /embed/ URL format for proper YouTube embedding.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: It collects user input and sends it to a server or script for processing.

Example code

<form action="/submit" method="POST"> <input type="text" name="username"> <button type="submit">Submit</button> </form> Key Takeaway: Forms are the foundation of user interaction on the web.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Variables declared inside a function are accessible only within that function.

Example code

function demo() { let x = 10; console.log(x); // 10 } console.log(x); // ReferenceError

Real-world example (ShopNest)

In ShopNest’s cart UI, a click handler closes over productId. Use let in loops so each button keeps the correct id.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ssigned Follow me on LinkedIn:

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Modals are created using the .modal class and toggled with JS or data attributes. <button data-bs-toggle="modal" data-bs-target="#myModal">Open</button> <div class="modal fade" id="myModal"> <div class="modal-dialog"><div class="modal-content">...</div></div> </div>

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: A polyfill is a piece of code that adds a feature missing in older browsers. Follow me on LinkedIn:

Example code

if (!Array.prototype.includes) { Array.prototype.includes = function(item) { return this.indexOf(item) !== -1; }; }

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Functions that: Return the same output for the same input. Have no side effects. Example: function add(a, b) { return a + b; // pure }

Example code

Functions that: Return the same output for the same input. Have no side effects. Example: function add(a, b) { return a + b; // pure
}

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Type Meaning null Intentional absence of value undefin ed Variable declared but not assigned Follow me on LinkedIn:

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: CSS Houdini is a set of APIs that let developers extend CSS by writing code that hooks directly into the CSS engine.

Explain a bit more

Examples: Paint API → Custom background drawing. Layout API → Define custom layout logic. Properties & Values API → Register custom CSS properties. Example (Paint API): registerPaint('dots', class { paint(ctx, size) { ctx.fillStyle = 'red'; ctx.arc(50, 50, 10, 0, 2 * Math.PI); ctx.fill(); } }); Key Takeaway: Houdini gives developers low-level control over how CSS works under the hood.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Use the following combination: p { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Key Takeaway: Truncates long text with “…” when it exceeds container width.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Property Location Affects Background? Padding Inside border ✅ Yes Margin Outside border ❌ No

Example code

div { Follow me on LinkedIn: margin: 10px; padding: 20px; } Key Takeaway: Padding = inner spacing, Margin = outer spacing.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: <picture> allows serving different image versions depending on device, screen size, or media type.

Example code

<picture> <source srcset="photo-large.jpg" media="(min-width: 800px)"> <source srcset="photo-small.jpg" media="(max-width: 799px)"> <img src="photo-default.jpg" alt="Beautiful landscape"> </picture> Key Takeaway: Use <picture> for art direction — showing different images per device or context.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: <head> holds metadata (title, styles, scripts). <header> defines the visible top section of the page (logo, navigation, heading).

Example code

<head> <title>My Portfolio</title> </head> <header> <h1>Welcome to My Portfolio</h1> </header> Follow me on LinkedIn: Key Takeaway: <head> = document info; <header> = visible header area.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Entities display reserved characters (like <, >, &) or symbols not on the keyboard.

Example code

<p>Use <div> for containers and &amp; for ampersands.</p> Key Takeaway: Entities prevent HTML from confusing symbols with code.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Variables declared with let or const inside curly braces {} are accessible only within that block. Example: if (true) { let y = 20; const z = 30; } // console.log(y, z); // ReferenceError

Example code

Variables declared with let or const inside curly braces {} are accessible only within that block. Example: if (true) {
let y = 20;
const z = 30;
} // console.log(y, z); // ReferenceError

Real-world example (ShopNest)

In ShopNest’s cart UI, a click handler closes over productId. Use let in loops so each button keeps the correct id.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Follow me on LinkedIn: Debouncing: Executes a function after a delay of no activity. Throttling: Executes a function at regular intervals. Example (debounce): function debounce(fn, delay) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); }; }

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.