Master technical and career interviews with structured answers—short definition, real examples, pitfalls, and how to answer in 60–90 seconds.
These are semantic elements that help structure a webpage meaningfully: <section> — Groups related content (like a chapter or topic). Follow me on LinkedIn: <article> — Represents independent, reusable conten…
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&…
Answer: JavaScript is interpreted, runs mainly in browsers. Java is compiled, runs on JVM. Syntax differs, and Java is strongly typed, JS is dynamically typed. What interviewers expect A clear definition tied to JavaScri…
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 =…
Follow me on LinkedIn: 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 production Rea…
Follow me on LinkedIn: 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 production Rea…
Use the prefers-color-scheme media query or toggle themes via classes. Example (automatic via system theme): Follow me on LinkedIn: @media (prefers-color-scheme: dark) { body { background: #121212; color: #fff; } } Examp…
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…
Element selector: Targets HTML tags. p { color: green; } What interviewers expect A clear definition tied to JavaScript in JavaScript projects Trade-offs (performance, maintainability, security, cost) When you would and…
Use classes for reusable styles, IDs for unique elements. What interviewers expect A clear definition tied to JavaScript in JavaScript projects Trade-offs (performance, maintainability, security, cost) When you would and…
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&…
DOM + CSSOM = Render Tree (a visual structure of elements and styles). What interviewers expect A clear definition tied to JavaScript in JavaScript projects Trade-offs (performance, maintainability, security, cost) When…
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…
Tags define the structure and content (e.g., <p>, <h1>, <div>). Attributes provide additional details about an element (e.g., src, href, alt). Follow me on LinkedIn: Example: <img src="logo.png" alt=…
Answer: Primitive types: string, number, boolean, null, undefined, symbol, bigint Reference types: object, array, function Example: let name = "Sandeep"; let obj = { age: 30 }; What interviewers expect A clear definition…
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…
✅ Result: lightning-fast execution of JS. 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 i…
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…
Preprocessors extend CSS with variables, nesting, mixins, and functions, compiled into plain CSS. Example (SASS): $main-color: #3498db; .button { background: $main-color; &:hover { background: darken($main-color, 10%…
Answer: Use fractional units (fr) and media queries. Example: .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; } Key Takeaway: uto-fit and minmax() automatically adapt t…
JavaScript JavaScript Tutorial · JavaScript
These are semantic elements that help structure a webpage meaningfully:
Follow me on LinkedIn:
Example:
<section>
<article>
<h2>HTML Interview Guide</h2>
<p>Learn important HTML concepts easily.</p>
</article>
<aside>
<p>Check out our CSS guide next!</p>
</aside>
</section>
Key Takeaway:
Use these for clear content hierarchy and SEO-friendly structure.
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
Answer: JavaScript is interpreted, runs mainly in browsers. Java is compiled, runs on JVM. Syntax differs, and Java is strongly typed, JS is dynamically typed.
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
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
Follow me on LinkedIn:
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
Follow me on LinkedIn:
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
Use the prefers-color-scheme media query or toggle themes via classes.
Example (automatic via system theme):
Follow me on LinkedIn:
@media (prefers-color-scheme: dark) {
body {
background: #121212;
color: #fff;
}
}Example (manual toggle):
body.dark-mode {
background: #000;
color: white;
}Key Takeaway:
Dark mode can adapt automatically or via user preference toggles.
JavaScript 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
Element selector: Targets HTML tags. p { color: green; }
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
Use classes for reusable styles, IDs for unique elements.
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
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
DOM + CSSOM = Render Tree (a visual structure of elements and styles).
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 <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
Follow me on LinkedIn:
Example:
<img src="logo.png" alt="Company Logo">
Here, <img> is a tag, and src & alt are attributes.
Key Takeaway:
Tags = structure; Attributes = extra information.JavaScript JavaScript Tutorial · JavaScript
Answer: Primitive types: string, number, boolean, null, undefined, symbol, bigint Reference types: object, array, function Example: let name = "Sandeep"; let obj = { age: 30 };
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
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
✅ Result: lightning-fast execution of 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
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
Preprocessors extend CSS with variables, nesting, mixins, and functions, compiled into
plain CSS.
Example (SASS):
$main-color: #3498db;
.button {
background: $main-color;
&:hover { background: darken($main-color, 10%); }
}Key Takeaway:
Preprocessors make CSS more modular, maintainable, and reusable.
JavaScript JavaScript Tutorial · JavaScript
Answer: Use fractional units (fr) and media queries. Example: .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; } Key Takeaway: uto-fit and minmax() automatically adapt the grid to screen size.
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.