Master technical and career interviews with structured answers—short definition, real examples, pitfalls, and how to answer in 60–90 seconds.
Answer: Follow me on LinkedIn: Bootstrap is a popular front-end framework for building responsive, mobile-first web pages using HTML, CSS, and JavaScript components. What interviewers expect A clear definition tied to Ja…
They are part of the browser’s rendering process when the DOM or styles change. Reflow (Layout): Happens when the structure or geometry of the page changes (like changing size, position, or adding elements). → Expensive…
block elements take full width and start on a new line. inline-block behaves like inline (stays in the same line) but allows setting width, height, margin, and padding. Example: .block { display: block; width: 100px; } .…
Answer: JavaScript is a high-level, interpreted, dynamic programming language used to make web pages interactive and dynamic. It runs in browsers and also on servers (using Node.js). What interviewers expect A clear defi…
The event loop manages asynchronous operations in JavaScript. It continuously checks the call stack and callback queue — executing queued tasks once the stack is empty. Example: console.log("A"); setTimeout(() => cons…
Flexbox (Flexible Box Layout) is a one-dimensional layout system for aligning items horizontally or vertically. Example: .container { display: flex; justify-content: center; lign-items: center; } Why use it: Centers elem…
The <!DOCTYPE html> declaration tells the browser which version of HTML the page uses. In modern websites, it triggers HTML5 standards mode, ensuring consistent rendering cross browsers. Example: <!DOCTYPE html&…
lignment Easier for single direction Easier for full layout structure Example: /* Flexbox */ display: flex; /* Grid */ Follow me on LinkedIn: display: grid; grid-template-columns: repeat(3, 1fr); Key Takeaway: Use Flexbo…
Answer: Feature Bootstrap 4 Bootstrap 5 jQuery Required Removed Grid 5 breakpoints 6 (added xxl) Forms Legacy Redesigned Icons None Separate Bootstrap Icons Utility API Limited Expanded and customizable What interviewers…
Garbage collection automatically frees memory that’s no longer referenced. The V8 engine uses the mark-and-sweep algorithm: “Mark” reachable objects from the root. “Sweep” and delete unreachable ones. Example: let user =…
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 str…
Example: <user-card></user-card> <template id="user-template"> <p>Hello, <span id="name"></span></p> </template> <script> class UserCard extends HTMLElement { connect…
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&…
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.get…
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:…
Answer: container wraps page content and provides horizontal padding. &lt;div class="container"&gt;Content&lt;/div&gt; &lt;div class="container-fluid"&gt;Full width&lt;/div&gt; What interv…
A service worker is a background script that runs independently of the web page. It enables offline caching, push notifications, and background sync. Example: navigator.serviceWorker.register('/sw.js'); ✅ Used in Progres…
Metho Purpose Arguments Invokes Immediately? call( Call a function with a specific this Comma-separat ✅ Yes apply Same as call(), but takes array Array ✅ Yes bind( Returns a new function with fixed this Comma-separat ❌ N…
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…
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–…
<div> is a block-level element (creates a full-width container). <span> is an inline element (used for styling small text portions). Example: <div>Block Section</div> <p>This is a <span s…
In JavaScript, every object can inherit properties from another object called its prototype. This enables object reusability. Example: const animal = { eats: true }; const dog = Object.create(animal); Follow me on Linked…
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 Ta…
Every HTML element is a box made of: What interviewers expect A clear definition tied to JavaScript in JavaScript projects Trade-offs (performance, maintainability, security, cost) When you would and would not use it in…
Lazy loading defers loading of non-critical images or iframes until they are visible in the viewport — improving page speed. Example: <img src="photo.jpg" loading="lazy" alt="Nature view"> Key Takeaway: loading="la…
JavaScript JavaScript Tutorial · JavaScript
Answer: Follow me on LinkedIn: Bootstrap is a popular front-end framework for building responsive, mobile-first web pages using HTML, CSS, and JavaScript components.
In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.
Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.
JavaScript JavaScript Tutorial · JavaScript
They are part of the browser’s rendering process when the DOM or styles change.
changing size, position, or adding elements).
→ Expensive operation since it recalculates layout.
Follow me on LinkedIn:
without affecting layout.
Example:
div.style.width = "200px"; /* triggers reflow + repaint */
div.style.background = "red"; /* triggers repaint only */Key Takeaway:
Minimize layout changes; batch DOM updates to improve performance.
JavaScript JavaScript Tutorial · JavaScript
height, margin, and padding.
Example:
.block {
display: block;
width: 100px;
}.inline-block {
display: inline-block;
width: 100px;
}Key Takeaway:
inline-block combines the flow of inline with the flexibility of block.
Follow me on LinkedIn:
JavaScript JavaScript Tutorial · JavaScript
Answer: JavaScript is a high-level, interpreted, dynamic programming language used to make web pages interactive and dynamic. It runs in browsers and also on servers (using Node.js).
In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.
Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.
JavaScript JavaScript Tutorial · JavaScript
The event loop manages asynchronous operations in JavaScript.
It continuously checks the call stack and callback queue — executing queued tasks once
the stack is empty.
Example:
console.log("A");
setTimeout(() => console.log("B"), 0);console.log("C");
// Output: A, C, B
Even though setTimeout is 0ms, it runs after the main thread finishes due to the event
loop.
JavaScript JavaScript Tutorial · JavaScript
Flexbox (Flexible Box Layout) is a one-dimensional layout system for aligning items
horizontally or vertically.
Example:
.container {
display: flex;
justify-content: center;
lign-items: center;
}Why use it:
Key Takeaway:
Flexbox simplifies alignment and space distribution in one direction.
JavaScript JavaScript Tutorial · JavaScript
The <!DOCTYPE html> declaration tells the browser which version of HTML the page
uses.
In modern websites, it triggers HTML5 standards mode, ensuring consistent rendering
cross browsers.
Example:
<!DOCTYPE html>
<html>
...
</html>
Key Takeaway:
lways include <!DOCTYPE html> at the top of every HTML file.
JavaScript JavaScript Tutorial · JavaScript
lignment Easier for single direction Easier for full layout structure
Example:
/* 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.
JavaScript JavaScript Tutorial · JavaScript
Answer: Feature Bootstrap 4 Bootstrap 5 jQuery Required Removed Grid 5 breakpoints 6 (added xxl) Forms Legacy Redesigned Icons None Separate Bootstrap Icons Utility API Limited Expanded and customizable
In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.
Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.
JavaScript JavaScript Tutorial · JavaScript
Garbage collection automatically frees memory that’s no longer referenced.
The V8 engine uses the mark-and-sweep algorithm:
Example:
let user = { name: "John" };
user = null; // eligible for garbage collectionJavaScript JavaScript Tutorial · JavaScript
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:
/* 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.
JavaScript JavaScript Tutorial · JavaScript
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");
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.
JavaScript JavaScript Tutorial · JavaScript
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' });
shadow.innerHTML = `<style>p { color: blue; }</style><p>HelloShadow!</p>`;
}
}customElements.define('custom-card', CustomCard);
</script>
Key Takeaway:
Shadow DOM = style and structure isolation for reusable, predictable components.
JavaScript JavaScript Tutorial · JavaScript
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");
const ctx = canvas.getContext("2d");
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.
JavaScript JavaScript Tutorial · JavaScript
pply
()
Same as call(), but takes array Array ✅ Yes
bind(
Returns a new function with fixedthis
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();
JavaScript JavaScript Tutorial · JavaScript
Answer: container wraps page content and provides horizontal padding. <div class="container">Content</div> <div class="container-fluid">Full width</div>
In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.
Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.
JavaScript JavaScript Tutorial · JavaScript
A service worker is a background script that runs independently of the web page.
It enables offline caching, push notifications, and background sync.
Example:
navigator.serviceWorker.register('/sw.js');
✅ Used in Progressive Web Apps (PWAs).
JavaScript JavaScript Tutorial · JavaScript
Metho
Purpose Arguments Invokes
Immediately?
call(
Call a function with a specific this Comma-separat
✅ Yes
apply
Same as call(), but takes array Array ✅ Yes
bind(
Returns a new function with fixed
this
Comma-separat
❌ 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();
JavaScript JavaScript Tutorial · JavaScript
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:
JavaScript JavaScript Tutorial · JavaScript
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:
localStorage.setItem("username", "Sandeep");
sessionStorage.setItem("theme", "dark");
Key Takeaway:
Use localStorage for long-term data; sessionStorage for temporary, tab-specific data.
JavaScript JavaScript Tutorial · JavaScript
Example:
<div>Block Section</div>
<p>This is a <span style="color: red;">red word</span> in asentence.</p>
Key Takeaway:
Use <div> for layout; <span> for inline styling.
JavaScript JavaScript Tutorial · JavaScript
In JavaScript, every object can inherit properties from another object called its prototype.
This enables object reusability.
Example:
const animal = { eats: true };
const dog = Object.create(animal);Follow me on LinkedIn:
dog.barks = true;console.log(dog.eats); // true (inherited)
JavaScript JavaScript Tutorial · JavaScript
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.
JavaScript JavaScript Tutorial · JavaScript
Every HTML element is a box made of:
In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.
Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.
JavaScript JavaScript Tutorial · JavaScript
Lazy loading defers loading of non-critical images or iframes until they are visible in the
viewport — improving page speed.
Example:
<img src="photo.jpg" loading="lazy" alt="Nature view">
Key Takeaway:
loading="lazy" helps reduce initial load time and saves bandwidth.