Interview Q&A

Short answer: Feature Flexbox Grid Layout One-dimensional (row or column) Two-dimensional (rows and columns) Use Case Aligning items in a line Building full-page layouts Alignment Easier for single direction Easier for full layout structure

Example code

/* Flexbox */ display: flex; /* Grid */ Follow me on LinkedIn: display: grid; grid-template-columns: repeat(3, 1fr); Key Takeaway: Use Flexbox for alignment; Grid for complete layouts.

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: Example: <user-card></user-card> <template id="user-template"> <p>Hello, <span id="name"></span></p> </template> <script> class UserCard extends HTMLElement { connectedCallback() { const tmpl = document.getElementById("user-template");

Example code

const content = tmpl.content.cloneNode(true);
content.querySelector("#name").textContent = "Sandeep"; this.appendChild(content); }
} customElements.define("user-card", UserCard); </script> Key Takeaway: Web Components = reusable, encapsulated building blocks for modern web apps.

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: The Shadow DOM is a web component feature that encapsulates a section of the DOM — meaning styles and markup inside it don’t leak out or get affected by the rest of the page. Example: <custom-card></custom-card> <script> class CustomCard extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' });

Example code

shadow.innerHTML = `<style>p { color: blue; }</style><p>Hello Shadow!</p>`; }
} customElements.define('custom-card', CustomCard); </script> Key Takeaway: Shadow DOM = style and structure isolation for reusable, predictable components.

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: The <canvas> element is used to draw graphics, animations, charts, or games using JavaScript. Example: <canvas id="myCanvas" width="200" height="100"></canvas> <script> const canvas = document.getElementById("myCanvas"); ctx.fillStyle = "blue"; ctx.fillRect(10, 10, 180, 80); </script> Follow me on LinkedIn: Key Takeaway: <canvas> gives you a pixel-based drawing area inside HTML — perfect for dynamic graphics.

Example code

const ctx = canvas.getContext("2d");

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: pply () Same as call(), but takes array Array ✅ Yes bind( Returns a new function with fixed this Comma-separat ed ❌ No function greet(greeting) { console.log(`${greeting}, ${this.name}`); } const user = { name: "John" }; greet.call(user, "Hi"); greet.apply(user, ["Hello"]); const bound = greet.bind(user, "Hey"); bound(); … pply () Same as call(),… but takes array Array ✅ Yes bind( Returns a new function with fixed…

Example code

function greet(greeting) { console.log(`${greeting}, ${this.name}`); } const user = { name: "John" }; greet.call(user, "Hi"); greet.apply(user, ["Hello"]); const bound = greet.bind(user, "Hey"); bound(); pply () Same as call(), but takes array Array ✅ Yes bind( Returns a new function with fixed this Comma-separat ed ❌ No Example: function greet(greeting) { console.log(`${greeting}, ${this.name}`); } const user = { name: "John" }; greet.call(user, "Hi"); greet.apply(user, ["Hello"]); const bound = greet.bind(user, "Hey"); bound(); … pply () Same as call(), but takes array Array ✅ Yes bind( Returns a new function with fixed this Comma-separat ed ❌ No Example: function greet(greeting) { console.log(`${greeting}, ${this.name}`); } const user = { name: "John" }; greet.call(user, "Hi"); greet.apply(user, ["Hello"]); const bound = greet.bind(user, "Hey"); bound();

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 container wraps page content and provides horizontal padding. <div class="container">Content</div> <div class="container-fluid">Full width</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 service worker is a background script that runs independently of the web page. It enables offline caching, push notifications, and background sync.

Example code

navigator.serviceWorker.register('/sw.js'); ✅ Used in Progressive Web Apps (PWAs).

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: Metho Purpose Arguments Invokes Immediately? call( Call a function with a specific this Comma-separat ed ✅ Yes apply () Same as call(), but takes array Array ✅ Yes bind( Returns a new function with fixed this Comma-separat ed ❌ No Example: function greet(greeting) { console.log(`${greeting}, ${this.name}`); }

Example code

const user = { name: "John" }; greet.call(user, "Hi"); greet.apply(user, ["Hello"]); const bound = greet.bind(user, "Hey"); bound();

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 Scope Example Priority Inline Single element style="color:re d;" Highest Internal One page <style> inside <head> Medium External Multiple pages Linked .css file Lowest Key Takeaway: Use external CSS for maintainable, large-scale projects. 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 store data in the browser, but they differ in duration and scope. Feature localStorage sessionStorage Lifetime Until manually cleared Until the tab is closed Scope Shared across tabs Specific to one tab Capacity ~5–10MB ~5MB

Example code

localStorage.setItem("username", "Sandeep"); sessionStorage.setItem("theme", "dark"); Key Takeaway: Use localStorage for long-term data; sessionStorage for temporary, tab-specific data.

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: <div> is a block-level element (creates a full-width container). <span> is an inline element (used for styling small text portions).

Example code

<div>Block Section</div> <p>This is a <span style="color: red;">red word</span> in a sentence.</p> Key Takeaway: Use <div> for layout; <span> for inline styling.

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: In JavaScript, every object can inherit properties from another object called its prototype. This enables object reusability. Example: const animal = { eats: true };

Example code

const dog = Object.create(animal); Follow me on LinkedIn: dog.barks = true; console.log(dog.eats); // true (inherited)

Real-world example (ShopNest)

Prefer arrow functions for React/event callbacks in ShopNest so this is not accidentally rebound.

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: Aspect @import <link> Loaded Inside CSS Inside HTML <head> Performance Slower (sequential) Faster (parallel) Media Queries Can include Can include Recommended ❌ Avoid ✅ Preferred Key Takeaway: Use <link> — it loads faster and supports preloading and caching better.

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: Every HTML element is a box made of:

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: Lazy loading defers loading of non-critical images or iframes until they are visible in the viewport — improving page speed.

Example code

<img src="photo.jpg" loading="lazy" alt="Nature view"> Key Takeaway: loading="lazy" helps reduce initial load time and saves bandwidth.

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: var: function-scoped, can be redeclared. let: block-scoped, cannot redeclare in the same scope. const: block-scoped, cannot be reassigned. Example: var x = 10; let y = 20; const z = 30;

Example code

var: function-scoped, can be redeclared. let: block-scoped, cannot redeclare in the same scope. const: block-scoped, cannot be reassigned. Example: var x = 10;
let y = 20;
const z = 30;

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: Property Description min-wid th Element won’t shrink below this width max-wid th Element won’t grow beyond this width

Example code

div { min-width: 200px; max-width: 600px; } Key Takeaway: Use both for responsive, constrained resizing.

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: Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope. Example: console.log(a); // undefined var a = 5;

Example code

Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope. Example: console.log(a); // undefined var a = 5;

Real-world example (ShopNest)

Prefer arrow functions for React/event callbacks in ShopNest so this is not accidentally rebound.

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: Shallow equality: Compares only top-level properties. Deep equality: Compares nested values recursively.

Example code

{a:1} === {a:1} // false (different refs) Use libraries like Lodash’s _.isEqual() for deep comparison. 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: BEM is a naming convention for writing scalable and reusable CSS. Structure: .block__element--modifier

Example code

<div class="card card--featured"> <h2 class="card__title">Profile</h2> </div> Key Takeaway: BEM enforces clarity: Block = independent component Element = part of a block Modifier = variation/state

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: The <head> tag contains metadata — information about the document that isn’t displayed on the page (like title, styles, or scripts).

Example code

<head> <title>Portfolio</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> Follow me on LinkedIn: Key Takeaway: Think of <head> as your page’s control room.

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: bsolut Nearest positioned ncestor ✅ Yes Fixed Viewport ❌ No div { position: absolute; top: 10px; left: 20px; } Key Takeaway: bsolute is relative to parent; fixed stays on screen. Follow me on LinkedIn: bsolut Nearest positioned ncestor ✅ Yes Fixed Viewport ❌ No

Example code

div { position: absolute; top: 10px; left: 20px; } Key Takeaway: bsolute is relative to parent; fixed stays on screen. Follow me on LinkedIn: bsolut Nearest positioned ncestor ✅ Yes Fixed Viewport ❌ No Example: div { position: absolute; top: 10px; left: 20px; } Key Takeaway: bsolute is relative to parent; fixed stays on screen. Follow me on LinkedIn: bsolut Nearest positioned ncestor ✅ Yes Fixed Viewport ❌ No Example: div { position: absolute; top: 10px; left: 20px; } Key Takeaway: bsolute is relative to parent; fixed stays on screen. 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: The rest operator ... collects multiple arguments into an array.

Example code

function sum(...nums) { return nums.reduce((a, b) => a + b); Follow me on LinkedIn: } console.log(sum(1, 2, 3)); // 6

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: Position Based On Moves with Page Scroll? Relative Its normal position ✅ Yes Absolut Nearest positioned ancestor ✅ Yes Fixed Viewport ❌ No

Example code

div { position: absolute; top: 10px; left: 20px; } Key Takeaway: Absolute is relative to parent; fixed stays on screen. 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: Follow me on LinkedIn: .row → Groups columns and manages horizontal alignment .col → Defines how many columns an element spans

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.