Master technical and career interviews with structured answers—short definition, real examples, pitfalls, and how to answer in 60–90 seconds.
Answer: Property Location Affects Background? Padding Inside border ✅ Yes Margin Outside border ❌ No Example: div { Follow me on LinkedIn: margin: 10px; padding: 20px; } Key Takeaway: Padding = inner spacing, Margin = ou…
<picture> allows serving different image versions depending on device, screen size, or media type. Example: <picture> <source srcset="photo-large.jpg" media="(min-width: 800px)"> <source srcset="phot…
<head> holds metadata (title, styles, scripts). <header> defines the visible top section of the page (logo, navigation, heading). Example: <head> <title>My Portfolio</title> </head> &l…
Entities display reserved characters (like <, >, &) or symbols not on the keyboard. Example: <p>Use &lt;div&gt; for containers and &amp; for ampersands.</p> Key Takeaway: Entities preven…
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 What interviewers expect…
Answer: Reusable UI blocks like buttons, modals, navbars, forms, alerts, etc., that Bootstrap’s design standards. What interviewers expect A clear definition tied to JavaScript in JavaScript projects Trade-offs (performa…
Answer: Static typing: Variable types are known at compile-time (e.g., TypeScript, Java). Dynamic typing: Types are determined at runtime (JavaScript). Example: let x = 10; // number x = "text"; // allowed What interview…
Answer: NaN stands for “Not-a-Number”, representing an invalid numeric operation. Example: console.log("hello" / 2); // NaN What interviewers expect A clear definition tied to JavaScript in JavaScript projects Trade-offs…
✅ Use CSS to improve readability and focus visibility: Follow me on LinkedIn: Maintain sufficient color contrast: body { color: #111; background: #fff; } Use :focus styles for keyboard users: button:focus { outline: 2px…
Answer: Defines how images or videos resize within their container. Follow me on LinkedIn: Example: img { width: 100%; height: 300px; object-fit: cover; } Key Takeaway: cover fills the box; contain fits the whole image i…
Combinators define relationships between selectors. Combinator Description Example Descendant ( ) Any nested element div p Child (>) Direct child only div > djacent sibling (+) Immediately next element h1 + p Gener…
Minimize HTML, CSS, and JS files. Use lazy loading for images. Use defer or async for scripts. Compress images and enable caching. Reduce DOM size. Example: Follow me on LinkedIn: <script src="main.js" defer></s…
Answer: Add the lang attribute in the &lt;html&gt; tag. Example: &lt;html lang="en"&gt; Key Takeaway: Helps screen readers and search engines understand the page’s language. What interviewers expect A cle…
Answer: rrow functions are a shorter syntax for writing functions and do not have their own this. Example: const add = (a, b) =&gt; a + b; console.log(add(2, 3)); // 5 What interviewers expect A clear definition tied…
Performance: Iframes load as separate browsing contexts, adding extra network requests and increasing page load time. SEO: Content inside iframes isn’t fully indexed by search engines. Links and text inside may not count…
Answer: Images that automatically scale with the parent container using .img-fluid: &lt;img src="..." class="img-fluid" alt="Responsive image"&gt; What interviewers expect A clear definition tied to JavaScript in…
Call stack: Where function execution happens (synchronous). Task queue: Holds async callbacks (processed after stack is empty). Example: console.log("1"); setTimeout(() => console.log("2"), 0); console.log("3"); // Ou…
Answer: Used to find the type of a variable. typeof "Hello"; // "string" typeof 10; // "number" typeof null; // "object" (bug) What interviewers expect A clear definition tied to JavaScript in JavaScript projects Trade-o…
It applies visual effects (like blur, brightness, or contrast) to the area behind an element. Example: .blur-bg { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.3); } Key Takeaway: Used for modern UI effe…
Selects elements based on their order within a parent. Examples: li:nth-child(2) { color: red; } /* 2nd item */ li:nth-child(odd) { background: #eee; } /* odd items */ li:nth-child(3n) { font-weight: bold; } /* every 3rd…
Targets elements with a specific class attribute. Example: .card { background-color: lightgray; } <div class="card">Profile</div> Follow me on LinkedIn: Key Takeaway: Classes are reusable; use them for consis…
They allow you to store extra data on HTML elements — useful for scripts or dynamic behavior. Example: <button data-user-id="101" data-role="admin">View Profile</button> <script> const btn = document.qu…
Block-level elements start on a new line and take full width (e.g., <div>, <p>, <section>). Inline elements stay within a line (e.g., <span>, <a>, <strong>). Example: <div>Block&…
Answer: Feature Regular Function Arrow Function this Dynamic Lexical (inherits from parent) Syntax function f(){} (a,b)=&gt;a+b Can be used as constructor ✅ ❌ What interviewers expect A clear definition tied to JavaS…
Answer: Override variables using SCSS. Use Bootstrap’s Theme Customizer or utility API. Or override styles in a custom CSS file. What interviewers expect A clear definition tied to JavaScript in JavaScript projects Trade…
JavaScript JavaScript Tutorial · JavaScript
Answer: Property Location Affects Background? Padding Inside border ✅ Yes Margin Outside border ❌ No Example: div { Follow me on LinkedIn: margin: 10px; padding: 20px; } Key Takeaway: Padding = inner spacing, Margin = outer spacing.
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
<picture> allows serving different image versions depending on device, screen size, or
media type.
Example:
<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.
JavaScript JavaScript Tutorial · JavaScript
Example:
<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.JavaScript JavaScript Tutorial · JavaScript
Entities display reserved characters (like <, >, &) or symbols not on the keyboard.
Example:
<p>Use <div> for containers and & for ampersands.</p>
Key Takeaway:
Entities prevent HTML from confusing symbols with code.
JavaScript JavaScript Tutorial · JavaScript
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
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
Answer: Reusable UI blocks like buttons, modals, navbars, forms, alerts, etc., that Bootstrap’s design standards.
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
Answer: Static typing: Variable types are known at compile-time (e.g., TypeScript, Java). Dynamic typing: Types are determined at runtime (JavaScript). Example: let x = 10; // number x = "text"; // allowed
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
Answer: NaN stands for “Not-a-Number”, representing an invalid numeric operation. Example: console.log("hello" / 2); // NaN
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 CSS to improve readability and focus visibility:
Follow me on LinkedIn:
Maintain sufficient color contrast:
body { color: #111; background: #fff; }
button:focus { outline: 2px solid #005fcc; }
Respect user preferences:
@media (prefers-reduced-motion: reduce) {
* { animation: none; }
}ccessible CSS ensures inclusivity for all users — especially keyboard and screen-reader
users.
JavaScript JavaScript Tutorial · JavaScript
Answer: Defines how images or videos resize within their container. Follow me on LinkedIn: Example: img { width: 100%; height: 300px; object-fit: cover; } Key Takeaway: cover fills the box; contain fits the whole image inside.
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
Combinators define relationships between selectors.
Combinator Description Example
Descendant ( ) Any nested element div p
Child (>) Direct child only div >
djacent sibling (+) Immediately next element h1 + p
General sibling (~) All next siblings h1 ~ p
Key Takeaway:
Combinators refine selector targeting.
JavaScript JavaScript Tutorial · JavaScript
Example:
Follow me on LinkedIn:
<script src="main.js" defer></script>
<img src="hero.jpg" loading="lazy" alt="Hero image">
Key Takeaway:
Speed = smaller files, fewer requests, smarter loading.
JavaScript JavaScript Tutorial · JavaScript
Answer: Add the lang attribute in the <html> tag. Example: <html lang="en"> Key Takeaway: Helps screen readers and search engines understand the page’s language.
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
Answer: rrow functions are a shorter syntax for writing functions and do not have their own this. Example: const add = (a, b) => a + b; console.log(add(2, 3)); // 5
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
Performance:
increasing page load time.
SEO:
Best Practice:
Example:
<iframe src="
title="Location
Map"></iframe>
Key Takeaway:
Iframes isolate content — great for embedding, but can slow pages and weaken SEO.Follow me on LinkedIn:
CSS Interview Questions
JavaScript JavaScript Tutorial · JavaScript
Answer: Images that automatically scale with the parent container using .img-fluid: <img src="..." class="img-fluid" alt="Responsive image">
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:
console.log("1");
setTimeout(() => console.log("2"), 0);console.log("3");
// Output: 1, 3, 2
Follow me on LinkedIn:
JavaScript JavaScript Tutorial · JavaScript
Answer: Used to find the type of a variable. typeof "Hello"; // "string" typeof 10; // "number" typeof null; // "object" (bug)
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
It applies visual effects (like blur, brightness, or contrast) to the area behind an element.
Example:
.blur-bg {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.3);
}Key Takeaway:
Used for modern UI effects (like frosted glass) — supported in modern browsers only.
Follow me on LinkedIn:
JavaScript Interview Questions
JavaScript JavaScript Tutorial · JavaScript
Selects elements based on their order within a parent.
Examples:
li:nth-child(2) { color: red; } /* 2nd item */
li:nth-child(odd) { background: #eee; } /* odd items */
li:nth-child(3n) { font-weight: bold; } /* every 3rd item */
Key Takeaway:
nth-child() gives you precise control over repeating patterns in lists or grids.
dvanced
JavaScript JavaScript Tutorial · JavaScript
Targets elements with a specific class attribute.
Example:
.card { background-color: lightgray; }
<div class="card">Profile</div>
Follow me on LinkedIn:
Key Takeaway:
Classes are reusable; use them for consistent styling across elements.JavaScript JavaScript Tutorial · JavaScript
They allow you to store extra data on HTML elements — useful for scripts or dynamic
behavior.
Example:
<button data-user-id="101" data-role="admin">View Profile</button>
<script>
const btn = document.querySelector("button");console.log(btn.dataset.userId); // 101
console.log(btn.dataset.role); // admin
</script>
Key Takeaway:
data-* attributes are perfect for embedding small pieces of custom data without affecting
layout.
Follow me on LinkedIn:
dvanced
JavaScript JavaScript Tutorial · JavaScript
<section>).
Example:
<div>Block</div>
<span>Inline</span>
Key Takeaway:
Block = structure; Inline = styling or small content.JavaScript JavaScript Tutorial · JavaScript
Answer: Feature Regular Function Arrow Function this Dynamic Lexical (inherits from parent) Syntax function f(){} (a,b)=>a+b Can be used as constructor ✅ ❌
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
Answer: Override variables using SCSS. Use Bootstrap’s Theme Customizer or utility API. Or override styles in a custom CSS file.
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.