Master technical and career interviews with structured answers—short definition, real examples, pitfalls, and how to answer in 60–90 seconds.
Answer: Example: div { width: 100px; padding: 10px; border: 5px solid black; margin: 20px; Key Takeaway: Total width = content + padding + border + margin. What interviewers expect A clear definition tied to JavaScript i…
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…
SEO optimization starts with clean, structured, and semantic HTML. Best practices: Follow me on LinkedIn: Use meaningful tags (<header>, <article>, <footer>). Add <title>, <meta name="descripti…
Answer: The browser calculates positions (layout) and then paints pixels on the screen. Key Takeaway: The DOM is built first, then styles are applied, and finally pixels are rendered — optimizing this pipeline improves p…
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…
Variables are containers to store data. Example: let age = 25; What interviewers expect A clear definition tied to JavaScript in JavaScript projects Trade-offs (performance, maintainability, security, cost) When you woul…
A Promise represents a value that may be available now, later, or never. It helps handle asynchronous operations in a cleaner way. Follow me on LinkedIn: Example: fetch('/data') .then(res => res.json()) .then(data =&g…
Bootstrap uses a 12-column grid based on flexbox. You divide your layout using .row and .col-* classes. Follow me on LinkedIn: <div class="row"> <div class="col-6">Half</div> <div class="col-6">Ha…
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…
Answer: Functions are blocks of reusable code that perform a specific task. Example: function greet(name) { return `Hello, ${name}`; } What interviewers expect A clear definition tied to JavaScript in JavaScript projects…
Answer: Example: p { color: black; } /* low */ #intro { color: blue; } /* higher */ &lt;p id="intro" style="color:red;"&gt;text&lt;/p&gt; &lt;!-- highest --&gt; Key Takeaway: Use balanced specific…
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…
Makes an element toggle between relative and fixed based on scroll position. Example: header { position: sticky; top: 0; background: white; } Follow me on LinkedIn: Key Takeaway: sticky elements stay visible within their…
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…
They let you embed audio and video files directly in HTML without plugins like Flash. Example: <audio controls> <source src="music.mp3" type="audio/mpeg"> </audio> <video controls width="320"> <…
Use the <a> tag with the href attribute. Example: <a href=" target="_blank">Visit Google</a> Explanation: Follow me on LinkedIn: href specifies the link URL. target="_blank" opens it in a new tab. Key T…
Keyword Scope Re-declar Re-assig Hoisted? var Functio ✅ Yes ✅ Yes ✅ Yes (undefined) let Block ❌ No ✅ Yes 🚫 Temporarily dead zone const Block ❌ No ❌ No 🚫 Temporarily dead zone Example: Follow me on LinkedIn: let x = 10;…
They help browsers pick the best image for the user’s device and screen size. Follow me on LinkedIn: Example: <img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" lt="L…
Answer: Breakpoints define responsive screen widths: Breakpoint Prefix Size Extra small none &lt;576px Small sm ≥576px Medium md ≥768px Large lg ≥992px Extra large xl ≥1200px XXL xxl ≥1400px What interviewers expect…
Answer: Web Workers allow JavaScript to run code in background threads, keeping the UI responsive. Example: // main.js const worker = new Worker('worker.js'); worker.postMessage('Start'); // worker.js onmessage = e =&…
Answer: ES6 introduced modules for code reusability and organization. They use export and import keywords. Example: // math.js export function add(a, b) { return a + b; } // main.js import { add } from './math.js'; What…
✅ Common techniques: Use Autoprefixer for vendor prefixes. Use feature queries: @supports (display: grid) { .container { display: grid; } } Provide fallbacks for older browsers: background: #000; background: linear-gradi…
Answer: Property Description min-wid th Element won’t shrink below this width max-wid th Element won’t grow beyond this width Example: div { min-width: 200px; max-width: 600px; } Key Takeaway: Use both for responsive, co…
JavaScript JavaScript Tutorial · JavaScript
Answer: Example: div { width: 100px; padding: 10px; border: 5px solid black; margin: 20px; Key Takeaway: Total width = content + padding + border + margin.
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
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
SEO optimization starts with clean, structured, and semantic HTML.
Best practices:
Follow me on LinkedIn:
(<h1> → <h6>).
Example:
<meta name="description" content="Learn web development step-by-step
with examples.">
<h1>HTML Interview Questions</h1>
Key Takeaway:
SEO-friendly HTML = clear structure + accurate metadata + accessible content.
JavaScript JavaScript Tutorial · JavaScript
Answer: The browser calculates positions (layout) and then paints pixels on the screen. Key Takeaway: The DOM is built first, then styles are applied, and finally pixels are rendered — optimizing this pipeline improves page performance.
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
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
Variables are containers to store data. Example: let age = 25;
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 Promise represents a value that may be available now, later, or never.
It helps handle asynchronous operations in a cleaner way.
Follow me on LinkedIn:
Example:
fetch('/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));✅ async/await simplifies promise syntax.
JavaScript JavaScript Tutorial · JavaScript
Bootstrap uses a 12-column grid based on flexbox.
You divide your layout using .row and .col-* classes.
Follow me on LinkedIn:
<div class="row">
<div class="col-6">Half</div>
<div class="col-6">Half</div>
</div>
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
Answer: Functions are blocks of reusable code that perform a specific task. Example: function greet(name) { return `Hello, ${name}`; }
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: Example: p { color: black; } /* low */ #intro { color: blue; } /* higher */ <p id="intro" style="color:red;">text</p> <!-- highest --> Key Takeaway: Use balanced specificity; avoid overuse of !important.
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:
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
Makes an element toggle between relative and fixed based on scroll position.
Example:
header {
position: sticky;
top: 0;
background: white;
}Follow me on LinkedIn:
Key Takeaway:
sticky elements stay visible within their parent container while scrolling.
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.
JavaScript JavaScript Tutorial · JavaScript
They let you embed audio and video files directly in HTML without plugins like Flash.
Example:
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
<video controls width="320">
<source src="movie.mp4" type="video/mp4">
</video>
Follow me on LinkedIn:
Key Takeaway:
HTML5 makes multimedia playback native, fast, and accessible.
JavaScript JavaScript Tutorial · JavaScript
Use the <a> tag with the href attribute.
Example:
<a href="
target="_blank">Visit Google</a>
Explanation:
Follow me on LinkedIn:
Key Takeaway:
lways add descriptive link text for accessibility.
JavaScript JavaScript Tutorial · JavaScript
Keyword Scope Re-declar
Re-assig
Hoisted?
var Functio✅ Yes ✅ Yes ✅ Yes (undefined)
let Block ❌ No ✅ Yes 🚫 Temporarily dead
zone
const Block ❌ No ❌ No 🚫 Temporarily dead
zone
Example:
Follow me on LinkedIn:
let x = 10; const y = 20; var z = 30;JavaScript JavaScript Tutorial · JavaScript
They help browsers pick the best image for the user’s device and screen size.
Follow me on LinkedIn:
Example:
<img
src="small.jpg"
srcset="medium.jpg 768w, large.jpg 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
lt="Landscape">
Key Takeaway:
srcset + sizes = responsive images that load efficiently across devices.
JavaScript JavaScript Tutorial · JavaScript
Answer: Breakpoints define responsive screen widths: Breakpoint Prefix Size Extra small none <576px Small sm ≥576px Medium md ≥768px Large lg ≥992px Extra large xl ≥1200px XXL xxl ≥1400px
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: Web Workers allow JavaScript to run code in background threads, keeping the UI responsive. Example: // main.js const worker = new Worker('worker.js'); worker.postMessage('Start'); // worker.js onmessage = e => postMessage('Task done');
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: ES6 introduced modules for code reusability and organization. They use export and import keywords. Example: // math.js export function add(a, b) { return a + b; } // main.js import { add } from './math.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
✅ Common techniques:
Use feature queries:
@supports (display: grid) {
.container { display: grid; }
}background: #000;
background: linear-gradient(to right, #000, #333);
Key Takeaway:
Graceful degradation and progressive enhancement keep CSS cross-browser safe.
Follow me on LinkedIn:
JavaScript JavaScript Tutorial · JavaScript
Answer: Property Description min-wid th Element won’t shrink below this width max-wid th Element won’t grow beyond this width Example: div { min-width: 200px; max-width: 600px; } Key Takeaway: Use both for responsive, constrained resizing.
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.