Interview Q&A

Master technical and career interviews with structured answers—short definition, real examples, pitfalls, and how to answer in 60–90 seconds.

4608 total questions 4508 technical 100 career & HR 4272 from PDF library

Showing 2326–2350 of 4608

Career & HR topics

By tech stack

Popular tracks

Mid PDF
How do you implement animations in CSS?

Short answer: Use @keyframes and the animation property. Example code @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .box { animation: fadeIn 2s ease-in-out; } Follow me on LinkedIn: Key Takeaway: @keyfram…

JavaScript Read answer
Mid PDF
How do you center a div horizontally and vertically?

Short answer: Using Flexbox: .parent { display: flex; justify-content: center; /* horizontal */ align-items: center; /* vertical */ height: 100vh; } Key Takeaway: flexbox is the easiest and modern way to center elements.…

JavaScript Read answer
Mid PDF
What are the advantages of semantic HTML for accessibility?

Short answer: Semantic HTML elements (like <nav>, <main>, <form>, <button>) provide meaning to content — making it easier for assistive technologies to navigate. Example code <nav aria-label=&q…

JavaScript Read answer
Junior PDF
What is the purpose of the <head> tag?

Short answer: The &lt;head&gt; tag contains metadata — information about the document that isn’t displayed on the page (like title, styles, or scripts). Example code &lt;head&gt; &lt;title&gt;Portfolio&lt;/title&gt; &lt;…

JavaScript Read answer
Mid PDF
What are primitive vs reference types?

Short answer: Primitive types: stored in stack, immutable (number, string, boolean). Reference types: stored in heap, mutable (object, array, function). Real-world example (ShopNest) ShopNest’s browser cart uses modern J…

JavaScript Read answer
Mid PDF
Explain CSS specificity and how conflicts are resolved.

Short answer: Specificity determines which rule wins when multiple styles target the same element. Priority order (lowest → highest): Real-world example (ShopNest) ShopNest’s browser cart uses modern JavaScript: fetch AP…

JavaScript Read answer
Junior PDF
What is the difference between relative, absolute, and fixed positioning?

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: bsol…

JavaScript Read answer
Mid PDF
What are utility classes in Bootstrap?

Short answer: Predefined classes that handle spacing, display, text, alignment, etc. Example code &lt;p class=&quot;text-center m-3 p-2&quot;&gt;Centered text&lt;/p&gt; Real-world example (ShopNest) ShopNest’s browser ca…

JavaScript Read answer
Mid PDF
How does JavaScript handle memory management?

Short answer: JS manages memory via automatic garbage collection. Memory allocation happens when objects are created, and deallocation occurs when they’re no longer reachable. Example: Creating large arrays without clear…

JavaScript Read answer
Junior PDF
What is the rest operator?

Short answer: The rest operator ... collects multiple arguments into an array. Example code function sum(...nums) { return nums.reduce((a, b) =&gt; a + b); Follow me on LinkedIn: } console.log(sum(1, 2, 3)); // 6 Real-wo…

JavaScript Read answer
Mid PDF
What are transitions in CSS?

Short answer: Transitions animate property changes smoothly. Example code button { background: blue; transition: background 0.3s ease; } button:hover { background: red; } Key Takeaway: Transitions are great for hover eff…

JavaScript Read answer
Junior PDF
What is the difference between relative, absolute, and fixed positioning?

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…

JavaScript Read answer
Mid PDF
How do web components work?

Short answer: Web Components are reusable custom elements built with: Real-world example (ShopNest) ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling. Say this…

JavaScript Read answer
Mid PDF
How can you create a responsive image in HTML?

Short answer: Use CSS or the HTML5 srcset and sizes attributes. HTML Example code &lt;img src=&quot;small.jpg&quot; srcset=&quot;medium.jpg 768w, large.jpg 1200w&quot; sizes=&quot;(max-width: 768px) 100vw, 50vw&quot; alt…

JavaScript Read answer
Mid PDF
How can you include an image in HTML?

Short answer: Use the &lt;img&gt; tag with the src and alt attributes. Example code &lt;img src=&quot;images/photo.jpg&quot; alt=&quot;A sunset at the beach&quot;&gt; Key Takeaway: The alt attribute improves accessibilit…

JavaScript Read answer
Mid PDF
What are the falsy values in JavaScript?

Short answer: Values that evaluate to false in Boolean context: false, 0, &quot;&quot;, null, undefined, NaN Example: if (!0) console.log(&quot;Falsy&quot;); // prints &quot;Falsy&quot; Example code Values that evaluate…

JavaScript Read answer
Mid PDF
What are microdata and schema.org?

Short answer: Follow me on LinkedIn: Microdata lets you tag content with structured metadata using schema.org vocabulary, helping search engines understand your content better. Example code &lt;div itemscope itemtype=&qu…

JavaScript Read answer
Junior PDF
What is the purpose of the .row and .col classes?

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: f…

JavaScript Read answer
Mid PDF
What are Proxies in JavaScript?

Short answer: Proxy allows you to intercept and redefine fundamental operations on objects. Example code const user = { name: &quot;Alice&quot; }; const proxy = new Proxy(user, { get: (target, prop) =&gt; `${prop} -&gt;…

JavaScript Read answer
Junior PDF
What is the difference between map() and forEach()?

Short answer: Method Returns Chainable Use Case forEach () undefin ed ❌ No Iteration map() New array ✅ Yes Transformation Example: [1,2,3].map(x =&gt; x*2); // [2,4,6] Example code Method Returns Chainable Use Case forEa…

JavaScript Read answer
Junior PDF
What is an arrow function?

Short answer: Arrow functions are a shorter syntax for writing functions. They don’t have their own this. Example: const sum = (a, b) =&gt; a + b; Follow me on LinkedIn: Example code Arrow functions are a shorter syntax…

JavaScript Read answer
Junior PDF
What is the will-change property?

Short answer: It hints the browser that an element will soon change, so the browser can optimize rendering ahead of time. Example code .box { will-change: transform, opacity; } Key Takeaway: Improves animation performanc…

JavaScript Read answer
Mid PDF
How do you use calc() in CSS?

Short answer: calc() performs dynamic calculations for CSS values. Example code div { width: calc(100% - 50px); padding: calc(1em + 5px); } Follow me on LinkedIn: Key Takeaway: calc() mixes units and adjusts layouts dyna…

JavaScript Read answer
Junior PDF
What is the purpose of z-index?

Short answer: z-index controls stacking order of overlapping elements. Example code .box1 { z-index: 1; } .box2 { z-index: 10; } Higher values appear on top. Key Takeaway: Only works on positioned elements (position ≠ st…

JavaScript Read answer
Junior PDF
What is the use of the <data> tag?

Short answer: It links human-readable text with a machine-readable value — useful for analytics or scripts. Follow me on LinkedIn: Example code &lt;p&gt;Price: &lt;data value=&quot;499&quot;&gt;₹499&lt;/data&gt;&lt;/p&gt…

JavaScript Read answer

JavaScript JavaScript Tutorial · JavaScript

Short answer: Use @keyframes and the animation property.

Example code

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .box { animation: fadeIn 2s ease-in-out; } Follow me on LinkedIn: Key Takeaway: @keyframes define the animation steps; animation applies them.

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Using Flexbox: .parent { display: flex; justify-content: center; /* horizontal */ align-items: center; /* vertical */ height: 100vh; } Key Takeaway: flexbox is the easiest and modern way to center elements.

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Semantic HTML elements (like <nav>, <main>, <form>, <button>) provide meaning to content — making it easier for assistive technologies to navigate.

Example code

<nav aria-label="Main navigation"> <a href="#home">Home</a> <a href="#about">About</a> </nav> Advantages: Better screen reader support Improved SEO Easier code maintenance Key Takeaway: Semantics = communication between developers, browsers, and accessibility tools. 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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Primitive types: stored in stack, immutable (number, string, boolean). Reference types: stored in heap, mutable (object, array, function).

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Specificity determines which rule wins when multiple styles target the same element. Priority order (lowest → highest):

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Predefined classes that handle spacing, display, text, alignment, etc.

Example code

<p class="text-center m-3 p-2">Centered text</p>

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: JS manages memory via automatic garbage collection. Memory allocation happens when objects are created, and deallocation occurs when they’re no longer reachable. Example: Creating large arrays without clearing references may cause memory leaks.

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Transitions animate property changes smoothly.

Example code

button { background: blue; transition: background 0.3s ease; } button:hover { background: red; } Key Takeaway: Transitions are great for hover effects and simple UI feedback.

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Web Components are reusable custom elements built with:

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Use CSS or the HTML5 srcset and sizes attributes. HTML

Example code

<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="Mountain view"> CSS Example: img { max-width: 100%; height: auto; } Key Takeaway: Responsive images adjust to different screen sizes for faster load and better UX.

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Use the <img> tag with the src and alt attributes.

Example code

<img src="images/photo.jpg" alt="A sunset at the beach"> Key Takeaway: The alt attribute improves accessibility and helps SEO.

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Values that evaluate to false in Boolean context: false, 0, "", null, undefined, NaN Example: if (!0) console.log("Falsy"); // prints "Falsy"

Example code

Values that evaluate to false in Boolean context: false, 0, "", null, undefined, NaN Example: if (!0) console.log("Falsy"); // prints "Falsy"

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Follow me on LinkedIn: Microdata lets you tag content with structured metadata using schema.org vocabulary, helping search engines understand your content better.

Example code

<div itemscope itemtype=" <span itemprop="name"></span> <span itemprop="jobTitle">Full Stack Developer</span> </div> Key Takeaway: Microdata improves search engine understanding and enhances search results (rich snippets).

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Proxy allows you to intercept and redefine fundamental operations on objects.

Example code

const user = { name: "Alice" }; const proxy = new Proxy(user, { get: (target, prop) => `${prop} -> ${target[prop]}` }); console.log(proxy.name); // name -> Alice ✅ Used in data validation, reactive frameworks (like Vue.js).

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Method Returns Chainable Use Case forEach () undefin ed ❌ No Iteration map() New array ✅ Yes Transformation Example: [1,2,3].map(x => x*2); // [2,4,6]

Example code

Method Returns Chainable Use Case forEach () undefin ed ❌ No Iteration map() New array ✅ Yes Transformation Example: [1,2,3].map(x => x*2); // [2,4,6]

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: Arrow functions are a shorter syntax for writing functions. They don’t have their own this. Example: const sum = (a, b) => a + b; Follow me on LinkedIn:

Example code

Arrow functions are a shorter syntax for writing functions. They don’t have their own this. Example: const sum = (a, b) => a + b; 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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: It hints the browser that an element will soon change, so the browser can optimize rendering ahead of time.

Example code

.box { will-change: transform, opacity; } Key Takeaway: Improves animation performance but use carefully — too many can waste memory.

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: calc() performs dynamic calculations for CSS values.

Example code

div { width: calc(100% - 50px); padding: calc(1em + 5px); } Follow me on LinkedIn: Key Takeaway: calc() mixes units and adjusts layouts dynamically.

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: z-index controls stacking order of overlapping elements.

Example code

.box1 { z-index: 1; } .box2 { z-index: 10; } Higher values appear on top. Key Takeaway: Only works on positioned elements (position ≠ static).

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

Short answer: It links human-readable text with a machine-readable value — useful for analytics or scripts. Follow me on LinkedIn:

Example code

<p>Price: <data value="499">₹499</data></p> Key Takeaway: <data> helps embed structured data inside readable content.

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.
Permalink & share
Toolliyo Assistant
Ask about tutorials, ebooks, training, pricing, mentor services, and support. I use public site content only—not admin or internal tools.

care@toolliyo.com

Need callback? Share your details