🚀 Web Development Interview Questions with Answers — Part 1: HTML
🧠 1. What is HTML?
HTML stands for HyperText Markup Language.
It is the standard language used to create and structure web pages.
HTML is used to:
• Create headings
• Add paragraphs
• Insert images
• Create links
• Build forms
• Structure web content
Example:
🧠 2. Difference Between HTML4 and HTML5
HTML4 : Older version
HTML5 : Latest version
HTML4 : No semantic tags
HTML5 : Semantic tags added
HTML4 : No direct multimedia support
HTML5 : Supports audio/video
HTML4 : Less mobile friendly
HTML5 : Mobile optimized
HTML5 Features:
•
•
•
• Local Storage
• Semantic Tags
🧠 3. What are Semantic Tags in HTML5?
Semantic tags describe the meaning of content clearly.
Common Semantic Tags:
•
•
•
•
•
Benefits:
✅ Better SEO
✅ Better readability
✅ Accessibility improvement
Example:
🧠 4. Difference Between
Example:
🧠 5. What is the Purpose of DOCTYPE?
Example:
Benefits:
✅ Proper rendering
✅ Avoids browser compatibility issues
🧠 6. What are Meta Tags?
Meta tags provide information about the webpage.
Example:
Uses:
• SEO
• Responsive design
• Character encoding
🧠 7. Difference Between ID and Class
ID : Unique
Class : Reusable
ID : Uses
Class : Uses
Example:
🧠 8. What are Inline and Block Elements?
Block Elements
Start on new line
Take full width
Examples:
•
•
•
Inline Elements
Do not start on new line
Take only required space
Examples:
•
•
•
🧠 9. Explain Forms in HTML
Forms collect user input.
Example:
Common Form Elements:
• input
• textarea
• select
• checkbox
• radio button
🧠 10. Difference Between GET and POST
GET : Data visible in URL
POST : Data hidden
GET : Less secure
POST : More secure
GET : Used for fetching
POST : Used for sending
Example:
🧠 11. What is localStorage and sessionStorage?
Both store data in browser.
localStorage : Permanent
sessionStorage : Temporary
localStorage : Remains after closing browser
sessionStorage : Removed after tab closes
Example:
🧠 12. What are Data Attributes?
Custom attributes used to store extra information.
Example:
Access in JavaScript:
🧠 13. What is iframe?
iframe embeds another webpage inside a webpage.
Example:
Uses:
• YouTube videos
• Google Maps
• External websites
🧠 14. Difference Between Cookies and localStorage
Cookies : Small storage
localStorage : Large storage
Cookies : Sent to server
localStorage : Not sent automatically
Example:
document.cookie = "username=Deepak";
🧠 1. What is HTML?
HTML stands for HyperText Markup Language.
It is the standard language used to create and structure web pages.
HTML is used to:
• Create headings
• Add paragraphs
• Insert images
• Create links
• Build forms
• Structure web content
Example:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
🧠 2. Difference Between HTML4 and HTML5
HTML4 : Older version
HTML5 : Latest version
HTML4 : No semantic tags
HTML5 : Semantic tags added
HTML4 : No direct multimedia support
HTML5 : Supports audio/video
HTML4 : Less mobile friendly
HTML5 : Mobile optimized
HTML5 Features:
•
<video>•
<audio>•
<canvas>• Local Storage
• Semantic Tags
🧠 3. What are Semantic Tags in HTML5?
Semantic tags describe the meaning of content clearly.
Common Semantic Tags:
•
<header>•
<nav>•
<section>•
<article>•
<footer>Benefits:
✅ Better SEO
✅ Better readability
✅ Accessibility improvement
Example:
<article>
<h2>Blog Title</h2>
<p>Content here...</p>
</article>
🧠 4. Difference Between
<div> and <span> <div> : Block element <span> : Inline element <div> : Takes full width <span> : Takes required width <div> : Used for sections <span> : Used for small styling Example:
<div>Hello</div>
<span>Hello</span>
🧠 5. What is the Purpose of DOCTYPE?
<!DOCTYPE html> tells the browser which HTML version is being used. Example:
<!DOCTYPE html>
Benefits:
✅ Proper rendering
✅ Avoids browser compatibility issues
🧠 6. What are Meta Tags?
Meta tags provide information about the webpage.
Example:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML Tutorial">
Uses:
• SEO
• Responsive design
• Character encoding
🧠 7. Difference Between ID and Class
ID : Unique
Class : Reusable
ID : Uses
# in CSS Class : Uses
. in CSS Example:
<div id="header"></div>
<div class="card"></div>
<div class="card"></div>
🧠 8. What are Inline and Block Elements?
Block Elements
Start on new line
Take full width
Examples:
•
<div>•
<p>•
<h1>Inline Elements
Do not start on new line
Take only required space
Examples:
•
<span>•
<a>•
<img>🧠 9. Explain Forms in HTML
Forms collect user input.
Example:
<form>
<input type="text" placeholder="Enter Name">
<input type="email" placeholder="Enter Email">
<button>Submit</button>
</form>
Common Form Elements:
• input
• textarea
• select
• checkbox
• radio button
🧠 10. Difference Between GET and POST
GET : Data visible in URL
POST : Data hidden
GET : Less secure
POST : More secure
GET : Used for fetching
POST : Used for sending
Example:
<form method="GET"></form>
<form method="POST"></form>
🧠 11. What is localStorage and sessionStorage?
Both store data in browser.
localStorage : Permanent
sessionStorage : Temporary
localStorage : Remains after closing browser
sessionStorage : Removed after tab closes
Example:
localStorage.setItem("name", "Deepak");
sessionStorage.setItem("theme", "dark");🧠 12. What are Data Attributes?
Custom attributes used to store extra information.
Example:
<div data-userid="101">User</div>
Access in JavaScript:
element.dataset.userid
🧠 13. What is iframe?
iframe embeds another webpage inside a webpage.
Example:
<iframe src="https://example.com"></iframe>
Uses:
• YouTube videos
• Google Maps
• External websites
🧠 14. Difference Between Cookies and localStorage
Cookies : Small storage
localStorage : Large storage
Cookies : Sent to server
localStorage : Not sent automatically
Example:
document.cookie = "username=Deepak";
❤8👍1
🧠 15. What are Void Elements?
Void elements do not require closing tags.
Examples:
- <br>
- <hr>
- <img>
- <input>
🧠 16. What is the Purpose of alt Attribute?
alt provides alternative text for images.
Example:
<img src="cat.jpg" alt="Cute Cat">
Benefits:
✅ Accessibility
✅ SEO
✅ Backup text if image fails
🧠 17. Explain Audio and Video Tags
HTML5 provides multimedia support.
Audio Example:
<audio controls>
<source src="song.mp3">
</audio>
Video Example:
<video controls width="400">
<source src="movie.mp4">
</video>
🧠 18. What is Accessibility in HTML?
Accessibility means making websites usable for everyone.
Best Practices:
- Semantic HTML
- Alt text
- Proper headings
- Keyboard support
🧠 19. What are ARIA Attributes?
ARIA improves accessibility for screen readers.
Example:
<button aria-label="Search">
Common ARIA Attributes:
- aria-label
- aria-hidden
- aria-expanded
🧠 20. Difference Between <strong> and <b>
<strong> : Semantic importance
<b> : Only bold styling
<strong> : Used for important text
<b> : Used for design
Example:
<strong>Important</strong>
<b>Bold Text</b>
Double Tap ❤️ For Part-2
Void elements do not require closing tags.
Examples:
- <br>
- <hr>
- <img>
- <input>
🧠 16. What is the Purpose of alt Attribute?
alt provides alternative text for images.
Example:
<img src="cat.jpg" alt="Cute Cat">
Benefits:
✅ Accessibility
✅ SEO
✅ Backup text if image fails
🧠 17. Explain Audio and Video Tags
HTML5 provides multimedia support.
Audio Example:
<audio controls>
<source src="song.mp3">
</audio>
Video Example:
<video controls width="400">
<source src="movie.mp4">
</video>
🧠 18. What is Accessibility in HTML?
Accessibility means making websites usable for everyone.
Best Practices:
- Semantic HTML
- Alt text
- Proper headings
- Keyboard support
🧠 19. What are ARIA Attributes?
ARIA improves accessibility for screen readers.
Example:
<button aria-label="Search">
Common ARIA Attributes:
- aria-label
- aria-hidden
- aria-expanded
🧠 20. Difference Between <strong> and <b>
<strong> : Semantic importance
<b> : Only bold styling
<strong> : Used for important text
<b> : Used for design
Example:
<strong>Important</strong>
<b>Bold Text</b>
Double Tap ❤️ For Part-2
❤23
𝗧𝗼𝗽 𝟱 𝗙𝗥𝗘𝗘 𝗔𝗜 & 𝗠𝗟 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 🚀
These FREE courses can help you develop industry-relevant skills and create a strong foundation in ML & AI. 📈
✅ 100% Free Learning Resources
✅ Beginner-Friendly Content
✅ Hands-On Projects
✅ Build an ML Portfolio
✅ Boost Your Resume & Career Opportunities
🔗 𝗘𝗻𝗿𝗼𝗹𝗹 𝗙𝗼𝗿 𝗙𝗥𝗘𝗘👇:
https://pdlink.in/4dXk9Sc
📌 Save this post and start your AI journey today!
These FREE courses can help you develop industry-relevant skills and create a strong foundation in ML & AI. 📈
✅ 100% Free Learning Resources
✅ Beginner-Friendly Content
✅ Hands-On Projects
✅ Build an ML Portfolio
✅ Boost Your Resume & Career Opportunities
🔗 𝗘𝗻𝗿𝗼𝗹𝗹 𝗙𝗼𝗿 𝗙𝗥𝗘𝗘👇:
https://pdlink.in/4dXk9Sc
📌 Save this post and start your AI journey today!
🥰2❤1
🚀 Web Development Interview Questions with Answers — Part 2: CSS
🧠 21. What is CSS?
CSS stands for Cascading Style Sheets.
It is used to style and design HTML elements.
CSS helps to:
• Add colors
• Set fonts
• Create layouts
• Add animations
• Make websites responsive
Example:
🧠 22. Difference Between Inline, Internal, and External CSS
Type : Description
Inline CSS : Written inside HTML element
Internal CSS : Written inside
External CSS : Written in separate .css file
Inline CSS:
Internal CSS:
External CSS:
🧠 23. What is Specificity in CSS?
Specificity determines which CSS rule is applied when multiple rules target the same element.
Priority Order:
1. Inline CSS
2. ID Selector
3. Class Selector
4. Element Selector
Example:
ID selector has higher priority.
🧠 24. Explain CSS Box Model
Every HTML element is treated as a box.
The box model contains:
• Content
• Padding
• Border
• Margin
Structure:
Example:
🧠 25. Difference Between Margin and Padding
Margin : Space outside border
Creates gap between elements
Padding : Space inside border
Creates inner spacing
Example:
🧠 26. What is Flexbox?
Flexbox is a one-dimensional layout system used for alignment and spacing.
Benefits:
✅ Easy alignment
✅ Responsive layouts
✅ Flexible spacing
Example:
🧠 27. What is CSS Grid?
CSS Grid is a two-dimensional layout system.
It handles:
• Rows
• Columns
Example:
🧠 28. Difference Between Relative, Absolute, Fixed, and Sticky Positioning
Position : Description
relative : Positioned relative to itself
absolute : Positioned relative to parent
fixed : Fixed on screen
sticky : Sticks during scrolling
Example:
🧠 29. What is z-index?
z-index controls stack order of elements.
Higher z-index appears on top.
Example:
🧠 30. Difference Between em, rem, %, px, vh, and vw
Unit : Meaning
px : Fixed pixels
% : Relative percentage
em : Relative to parent
rem : Relative to root
vh : Viewport height
vw : Viewport width
Example:
🧠 31. What are Pseudo-Classes?
Pseudo-classes define special states of elements.
Examples:
Common Pseudo-Classes:
• :hover
• :focus
• :first-child
• :last-child
🧠 32. What are Pseudo-Elements?
Pseudo-elements style specific parts of elements.
Example:
Common Pseudo-Elements:
• ::before
• ::after
• ::first-letter
🧠 33. Difference Between visibility:hidden and display:none
visibility:hidden : Element hidden but space remains
display:none : Element removed completely
Example:
🧠 34. What is Media Query?
Media queries make websites responsive.
Example:
🧠 35. Explain Responsive Design
Responsive design ensures websites work on:
• Mobile
• Tablet
• Desktop
Techniques:
✅ Media Queries
✅ Flexible layouts
✅ Responsive images
🧠 36. What is Mobile-First Design?
Mobile-first design means designing for smaller screens first and then scaling upward.
Benefits:
✅ Better performance
✅ Better UX on mobile devices
🧠 21. What is CSS?
CSS stands for Cascading Style Sheets.
It is used to style and design HTML elements.
CSS helps to:
• Add colors
• Set fonts
• Create layouts
• Add animations
• Make websites responsive
Example:
h1 {
color: blue;
font-size: 40px;
}🧠 22. Difference Between Inline, Internal, and External CSS
Type : Description
Inline CSS : Written inside HTML element
Internal CSS : Written inside
<style> tag External CSS : Written in separate .css file
Inline CSS:
<h1 style="color:red;">Hello</h1>
Internal CSS:
<style>
h1 {
color: blue;
}
</style>
External CSS:
<link rel="stylesheet" href="style.css">
🧠 23. What is Specificity in CSS?
Specificity determines which CSS rule is applied when multiple rules target the same element.
Priority Order:
1. Inline CSS
2. ID Selector
3. Class Selector
4. Element Selector
Example:
#title {
color: red;
}
.heading {
color: blue;
}ID selector has higher priority.
🧠 24. Explain CSS Box Model
Every HTML element is treated as a box.
The box model contains:
• Content
• Padding
• Border
• Margin
Structure:
Margin
└ Border
└ Padding
└ Content
Example:
div {
padding: 20px;
border: 2px solid black;
margin: 10px;
}🧠 25. Difference Between Margin and Padding
Margin : Space outside border
Creates gap between elements
Padding : Space inside border
Creates inner spacing
Example:
div {
margin: 20px;
padding: 20px;
}🧠 26. What is Flexbox?
Flexbox is a one-dimensional layout system used for alignment and spacing.
Benefits:
✅ Easy alignment
✅ Responsive layouts
✅ Flexible spacing
Example:
.container {
display: flex;
justify-content: center;
align-items: center;
}🧠 27. What is CSS Grid?
CSS Grid is a two-dimensional layout system.
It handles:
• Rows
• Columns
Example:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}🧠 28. Difference Between Relative, Absolute, Fixed, and Sticky Positioning
Position : Description
relative : Positioned relative to itself
absolute : Positioned relative to parent
fixed : Fixed on screen
sticky : Sticks during scrolling
Example:
div {
position: absolute;
top: 20px;
}🧠 29. What is z-index?
z-index controls stack order of elements.
Higher z-index appears on top.
Example:
.box {
z-index: 10;
}🧠 30. Difference Between em, rem, %, px, vh, and vw
Unit : Meaning
px : Fixed pixels
% : Relative percentage
em : Relative to parent
rem : Relative to root
vh : Viewport height
vw : Viewport width
Example:
h1 {
font-size: 2rem;
}🧠 31. What are Pseudo-Classes?
Pseudo-classes define special states of elements.
Examples:
a:hover {
color: red;
}Common Pseudo-Classes:
• :hover
• :focus
• :first-child
• :last-child
🧠 32. What are Pseudo-Elements?
Pseudo-elements style specific parts of elements.
Example:
p::first-letter {
font-size: 40px;
}Common Pseudo-Elements:
• ::before
• ::after
• ::first-letter
🧠 33. Difference Between visibility:hidden and display:none
visibility:hidden : Element hidden but space remains
display:none : Element removed completely
Example:
.box {
display: none;
}🧠 34. What is Media Query?
Media queries make websites responsive.
Example:
@media (max-width: 768px) {
body {
background: lightblue;
}
}🧠 35. Explain Responsive Design
Responsive design ensures websites work on:
• Mobile
• Tablet
• Desktop
Techniques:
✅ Media Queries
✅ Flexible layouts
✅ Responsive images
🧠 36. What is Mobile-First Design?
Mobile-first design means designing for smaller screens first and then scaling upward.
Benefits:
✅ Better performance
✅ Better UX on mobile devices
❤3
🧠 37. What are CSS Transitions?
Transitions create smooth changes between property values.
Example:
Transition : Triggered by event
Simple effects
Animation : Can run automatically
Complex effects
Example:
transform changes element shape or position.
Example:
- rotate()
- scale()
- translate()
🧠 40. What is overflow Property?
Controls content overflow behavior.
Values:
- visible
- hidden
- scroll
- auto
Example:
Some CSS properties automatically pass from parent to child.
Example:
🧠 42. What is !important?
!important gives highest priority to a CSS rule.
Example:
Preprocessors extend CSS functionality.
Popular Preprocessors:
- SASS
- SCSS
- LESS
Features:
✅ Variables
✅ Nesting
✅ Functions
🧠 44. Difference Between SCSS and SASS
SCSS : Uses braces
CSS-like syntax
SASS : No braces
Indentation syntax
SCSS Example:
Bootstrap is a popular CSS framework used for responsive web development.
Features:
✅ Responsive grid system
✅ Prebuilt components
✅ Faster development
Example:
Transitions create smooth changes between property values.
Example:
button {
transition: background 0.3s ease;
}
🧠 38. Difference Between Transition and Animation Transition : Triggered by event
Simple effects
Animation : Can run automatically
Complex effects
Example:
@keyframes move {
from { left:0; }
to { left:100px; }
}
🧠 39. What is transform Property? transform changes element shape or position.
Example:
div {
transform: rotate(45deg);
}
Common Functions: - rotate()
- scale()
- translate()
🧠 40. What is overflow Property?
Controls content overflow behavior.
Values:
- visible
- hidden
- scroll
- auto
Example:
div {
overflow: scroll;
}
🧠 41. Explain CSS Inheritance Some CSS properties automatically pass from parent to child.
Example:
body {
color: blue;
}
Child elements inherit text color. 🧠 42. What is !important?
!important gives highest priority to a CSS rule.
Example:
p {
color: red !important;
}
🧠 43. What are CSS Preprocessors? Preprocessors extend CSS functionality.
Popular Preprocessors:
- SASS
- SCSS
- LESS
Features:
✅ Variables
✅ Nesting
✅ Functions
🧠 44. Difference Between SCSS and SASS
SCSS : Uses braces
CSS-like syntax
SASS : No braces
Indentation syntax
SCSS Example:
$color: blue;🧠 45. What is Bootstrap?
h1 {
color: $color;
}
Bootstrap is a popular CSS framework used for responsive web development.
Features:
✅ Responsive grid system
✅ Prebuilt components
✅ Faster development
Example:
<button class="btn btn-primary">Double Tap ❤️ For Part-3
Click Me
</button>
❤13😁2
𝗗𝗮𝘁𝗮 𝗦𝗰𝗶𝗲𝗻𝗰𝗲 & 𝗔𝗜 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝘄𝗶𝘁𝗵 𝗣𝗹𝗮𝗰𝗲𝗺𝗲𝗻𝘁 𝗦𝘂𝗽𝗽𝗼𝗿𝘁😍
Build a Career in Data Science & AI with a job-focused curriculum designed by industry experts.
✅ Learn from IIT Alumni & Top Industry Professionals
✅ 500+ Hiring Partners
✅ 100% Job Assistance
✅ Real-World Projects & Case Studies
✅ Mock Interviews & Career Support
Whether you're a student, fresher, or working professional, this program can help you transition into high-growth Data & AI roles.
🎯 Don't wait for opportunities — create them!
𝐑𝐞𝐠𝐢𝐬𝐭𝐞𝐫 𝐍𝐨𝐰 👇:-
https://pdlink.in/4fdWxJB
⚡ Limited Seats Available – Apply Fast!
Build a Career in Data Science & AI with a job-focused curriculum designed by industry experts.
✅ Learn from IIT Alumni & Top Industry Professionals
✅ 500+ Hiring Partners
✅ 100% Job Assistance
✅ Real-World Projects & Case Studies
✅ Mock Interviews & Career Support
Whether you're a student, fresher, or working professional, this program can help you transition into high-growth Data & AI roles.
🎯 Don't wait for opportunities — create them!
𝐑𝐞𝐠𝐢𝐬𝐭𝐞𝐫 𝐍𝐨𝐰 👇:-
https://pdlink.in/4fdWxJB
⚡ Limited Seats Available – Apply Fast!
🚀 Web Development Interview Questions with Answers — Part 3: JavaScript
🧠 46. What is JavaScript?
JavaScript is a programming language used to make web pages interactive.
It is used for:
• Form validation
• Dynamic content
• API calls
• Animations
• Interactive UI
Example:
console.log("Hello World");
🧠 47. Difference Between var, let, and const
var : Function scoped
Can redeclare
Can reassign
let : Block scoped
Cannot redeclare
Can reassign
const : Block scoped
Cannot redeclare
Cannot reassign
Example:
var a = 10;
let b = 20;
const c = 30;
🧠 48. What are Data Types in JavaScript?
Primitive Data Types:
• String
• Number
• Boolean
• Null
• Undefined
• Symbol
• BigInt
Non-Primitive:
• Object
• Array
• Function
Example:
let name = "Sanyam";
let age = 26;
let isActive = true;
🧠 49. Difference Between null and undefined
null : Intentional empty value
undefined : Variable declared but not assigned
Example:
let a = null;
let b;
console.log(b);
🧠 50. What is Hoisting?
Hoisting means JavaScript moves declarations to the top before execution.
Example:
console.log(a);
var a = 10;
Output:
undefined
🧠 51. Explain Scope in JavaScript
Scope determines where variables are accessible.
Types:
• Global Scope
• Function Scope
• Block Scope
Example:
{
let age = 26;
}
age cannot be accessed outside block.
🧠 52. What is Closure?
A closure allows a function to access variables from its outer function even after execution.
Example:
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
};
}
const fn = outer();
fn();
🧠 53. What is Callback Function?
A callback is a function passed into another function.
Example:
function greet(name, callback) {
console.log(name);
callback();
}
greet("Deepak", function() {
console.log("Welcome");
});
🧠 54. What is Arrow Function?
Arrow functions provide shorter syntax.
Example:
const add = (a, b) => a + b;
Benefits:
✅ Cleaner syntax
✅ Lexical this
🧠 55. Difference Between == and ===
== : Checks value only
=== : Checks value and type
Example:
5 == "5" // true
5 === "5" // false
🧠 56. What is Event Bubbling?
Event bubbling means events move from child to parent.
Example:
button.addEventListener("click", () => {
console.log("Button clicked");
});
🧠 57. What is Event Capturing?
Event capturing is opposite of bubbling.
Event moves: Parent → Child
Example:
element.addEventListener("click", fn, true);
🧠 58. What is Event Delegation?
Using parent element to handle child events.
Benefits:
✅ Better performance
✅ Dynamic elements support
Example:
parent.addEventListener("click", (e) => {
console.log(e.target);
});
🧠 59. What is DOM?
DOM stands for: 👉 Document Object Model
It represents HTML as objects.
Example:
document.getElementById("title");
🧠 46. What is JavaScript?
JavaScript is a programming language used to make web pages interactive.
It is used for:
• Form validation
• Dynamic content
• API calls
• Animations
• Interactive UI
Example:
console.log("Hello World");
🧠 47. Difference Between var, let, and const
var : Function scoped
Can redeclare
Can reassign
let : Block scoped
Cannot redeclare
Can reassign
const : Block scoped
Cannot redeclare
Cannot reassign
Example:
var a = 10;
let b = 20;
const c = 30;
🧠 48. What are Data Types in JavaScript?
Primitive Data Types:
• String
• Number
• Boolean
• Null
• Undefined
• Symbol
• BigInt
Non-Primitive:
• Object
• Array
• Function
Example:
let name = "Sanyam";
let age = 26;
let isActive = true;
🧠 49. Difference Between null and undefined
null : Intentional empty value
undefined : Variable declared but not assigned
Example:
let a = null;
let b;
console.log(b);
🧠 50. What is Hoisting?
Hoisting means JavaScript moves declarations to the top before execution.
Example:
console.log(a);
var a = 10;
Output:
undefined
🧠 51. Explain Scope in JavaScript
Scope determines where variables are accessible.
Types:
• Global Scope
• Function Scope
• Block Scope
Example:
{
let age = 26;
}
age cannot be accessed outside block.
🧠 52. What is Closure?
A closure allows a function to access variables from its outer function even after execution.
Example:
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
};
}
const fn = outer();
fn();
🧠 53. What is Callback Function?
A callback is a function passed into another function.
Example:
function greet(name, callback) {
console.log(name);
callback();
}
greet("Deepak", function() {
console.log("Welcome");
});
🧠 54. What is Arrow Function?
Arrow functions provide shorter syntax.
Example:
const add = (a, b) => a + b;
Benefits:
✅ Cleaner syntax
✅ Lexical this
🧠 55. Difference Between == and ===
== : Checks value only
=== : Checks value and type
Example:
5 == "5" // true
5 === "5" // false
🧠 56. What is Event Bubbling?
Event bubbling means events move from child to parent.
Example:
button.addEventListener("click", () => {
console.log("Button clicked");
});
🧠 57. What is Event Capturing?
Event capturing is opposite of bubbling.
Event moves: Parent → Child
Example:
element.addEventListener("click", fn, true);
🧠 58. What is Event Delegation?
Using parent element to handle child events.
Benefits:
✅ Better performance
✅ Dynamic elements support
Example:
parent.addEventListener("click", (e) => {
console.log(e.target);
});
🧠 59. What is DOM?
DOM stands for: 👉 Document Object Model
It represents HTML as objects.
Example:
document.getElementById("title");
❤4
60. Difference Between Synchronous and Asynchronous Programming
Synchronous : Executes line by line
Asynchronous : Executes independently
Example:
setTimeout(() => {
console.log("Hello");
}, 2000);
🧠 61. What is Promise in JavaScript?
Promise handles asynchronous operations.
States:
• Pending
• Resolved
• Rejected
Example:
const promise = new Promise((resolve, reject) => {
resolve("Success");
});
🧠 62. What are async and await?
Used to simplify asynchronous code.
Example:
async function getData() {
const response = await fetch(url);
}
🧠 63. What is setTimeout?
Runs code after specific delay.
Example:
setTimeout(() => {
console.log("Hello");
}, 3000);
🧠 64. Difference Between map(), filter(), and reduce()
Method : Purpose
map() : Transform array
filter() : Filter array
reduce() : Reduce array to single value
Example:
const nums = [1,2,3];
nums.map(n => n * 2);
🧠 65. What is Destructuring?
Extract values from arrays or objects.
Example:
const person = {
name: "Deepak"
};
const { name } = person;
🧠 66. What is Spread Operator?
Spread operator expands elements.
Example:
const arr1 = [1,2];
const arr2 = [...arr1, 3];
🧠 67. What is Rest Operator?
Collects multiple values into array.
Example:
function sum(...nums) {
console.log(nums);
}
🧠 68. What is Template Literal?
Template literals allow embedded expressions.
Example:
let name = "Narayan";
console.log(Hello ${name});
🧠 69. What is Optional Chaining?
Safely accesses nested properties.
Example:
user?.address?.city
🧠 70. Explain this Keyword
this refers to current object.
Example:
const user = {
name: "Radhe",
greet() {
console.log(this.name);
}
};
🧠 71. Difference Between Function Declaration and Function Expression
Declaration : Hoisted
Expression : Not fully hoisted
Example:
function test() {}
const demo = function() {};
🧠 72. What is Prototype?
Prototype allows inheritance in JavaScript.
Example:
function Person() {}
Person.prototype.age = 25;
🧠 73. What is Prototypal Inheritance?
Objects inherit properties from other objects.
Example:
child.proto = parent;
🧠 74. What is JSON?
JSON stands for: 👉 JavaScript Object Notation
Used for data exchange.
Example:
{
"name": "Sanyam",
"age": 26
}
🧠 75. Difference Between localStorage and sessionStorage
localStorage : Permanent
Shared across tabs
sessionStorage : Temporary
Limited to tab
🧠 76. What is NaN?
NaN means: 👉 Not a Number
Example:
console.log("abc" / 2);
🧠 77. What are Truthy and Falsy Values?
Falsy Values:
• false
• 0
• ""
• null
• undefined
• NaN
Everything else is truthy.
🧠 78. What is Debounce?
Debounce limits repeated function calls.
Used in:
• Search bars
• Resize events
Example:
function debounce(fn, delay) {}
🧠 79. What is Throttle?
Throttle limits execution rate.
Example:
function throttle(fn, limit) {}
**🧠 80.
What is Currying?**
Currying converts function with multiple arguments into nested functions.
Example:
function add(a) {
return function(b) {
return a + b;
};
}
Double Tap ❤️ For Part-4
Synchronous : Executes line by line
Asynchronous : Executes independently
Example:
setTimeout(() => {
console.log("Hello");
}, 2000);
🧠 61. What is Promise in JavaScript?
Promise handles asynchronous operations.
States:
• Pending
• Resolved
• Rejected
Example:
const promise = new Promise((resolve, reject) => {
resolve("Success");
});
🧠 62. What are async and await?
Used to simplify asynchronous code.
Example:
async function getData() {
const response = await fetch(url);
}
🧠 63. What is setTimeout?
Runs code after specific delay.
Example:
setTimeout(() => {
console.log("Hello");
}, 3000);
🧠 64. Difference Between map(), filter(), and reduce()
Method : Purpose
map() : Transform array
filter() : Filter array
reduce() : Reduce array to single value
Example:
const nums = [1,2,3];
nums.map(n => n * 2);
🧠 65. What is Destructuring?
Extract values from arrays or objects.
Example:
const person = {
name: "Deepak"
};
const { name } = person;
🧠 66. What is Spread Operator?
Spread operator expands elements.
Example:
const arr1 = [1,2];
const arr2 = [...arr1, 3];
🧠 67. What is Rest Operator?
Collects multiple values into array.
Example:
function sum(...nums) {
console.log(nums);
}
🧠 68. What is Template Literal?
Template literals allow embedded expressions.
Example:
let name = "Narayan";
console.log(Hello ${name});
🧠 69. What is Optional Chaining?
Safely accesses nested properties.
Example:
user?.address?.city
🧠 70. Explain this Keyword
this refers to current object.
Example:
const user = {
name: "Radhe",
greet() {
console.log(this.name);
}
};
🧠 71. Difference Between Function Declaration and Function Expression
Declaration : Hoisted
Expression : Not fully hoisted
Example:
function test() {}
const demo = function() {};
🧠 72. What is Prototype?
Prototype allows inheritance in JavaScript.
Example:
function Person() {}
Person.prototype.age = 25;
🧠 73. What is Prototypal Inheritance?
Objects inherit properties from other objects.
Example:
child.proto = parent;
🧠 74. What is JSON?
JSON stands for: 👉 JavaScript Object Notation
Used for data exchange.
Example:
{
"name": "Sanyam",
"age": 26
}
🧠 75. Difference Between localStorage and sessionStorage
localStorage : Permanent
Shared across tabs
sessionStorage : Temporary
Limited to tab
🧠 76. What is NaN?
NaN means: 👉 Not a Number
Example:
console.log("abc" / 2);
🧠 77. What are Truthy and Falsy Values?
Falsy Values:
• false
• 0
• ""
• null
• undefined
• NaN
Everything else is truthy.
🧠 78. What is Debounce?
Debounce limits repeated function calls.
Used in:
• Search bars
• Resize events
Example:
function debounce(fn, delay) {}
🧠 79. What is Throttle?
Throttle limits execution rate.
Example:
function throttle(fn, limit) {}
**🧠 80.
What is Currying?**
Currying converts function with multiple arguments into nested functions.
Example:
function add(a) {
return function(b) {
return a + b;
};
}
Double Tap ❤️ For Part-4
❤10
🎓 𝗙𝗥𝗘𝗘 𝗢𝗻𝗹𝗶𝗻𝗲 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 𝗪𝗶𝘁𝗵 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗲𝘀 🚀
Here are some amazing FREE online courses that can help you learn in-demand skills and earn valuable certificates. 📚✨
✅ 100% Free Learning Resources
✅ Industry-Recognized Certifications
✅ Self-Paced Learning
✅ Beginner-Friendly Courses
✅ Boost Your Resume & LinkedIn Profile
🔗 𝗘𝗻𝗿𝗼𝗹𝗹 𝗙𝗼𝗿 𝗙𝗥𝗘𝗘👇:
https://pdlink.in/4uZQAXC
📌 Save this post and share it with friends who are looking to learn new skills for free!
Here are some amazing FREE online courses that can help you learn in-demand skills and earn valuable certificates. 📚✨
✅ 100% Free Learning Resources
✅ Industry-Recognized Certifications
✅ Self-Paced Learning
✅ Beginner-Friendly Courses
✅ Boost Your Resume & LinkedIn Profile
🔗 𝗘𝗻𝗿𝗼𝗹𝗹 𝗙𝗼𝗿 𝗙𝗥𝗘𝗘👇:
https://pdlink.in/4uZQAXC
📌 Save this post and share it with friends who are looking to learn new skills for free!
❤1
🚀 Web Development Interview Questions with Answers — Part 4: ReactJS
🧠 81. What is React?
React is a JavaScript library used to build user interfaces.
It was developed by Meta.
Features:
✅ Component-based architecture
✅ Virtual DOM
✅ Reusable UI components
✅ Fast rendering
Example:
function App() {
return
Hello React
;
}
🧠 82. What are Components in React?
Components are reusable building blocks of UI.
Types:
• Functional Components
• Class Components
Example:
function Welcome() {
return
Welcome
;
}
🧠 83. Difference Between Functional and Class Components
Functional Component : Simpler syntax : Uses hooks : Preferred nowadays
Class Component : More complex : Uses lifecycle methods : Older approach
Functional Example:
function App() {
return
Hello
;
}
🧠 84. What is JSX?
JSX stands for: 👉 JavaScript XML
It allows writing HTML inside JavaScript.
Example:
const element =
Hello
;
Benefits:
✅ Cleaner syntax
✅ Easier UI development
🧠 85. What are Props?
Props are used to pass data between components.
Example:
function User(props) {
return
{props.name}
;
}
Usage:
🧠 86. What is State?
State stores dynamic data inside components.
Example:
const [count, setCount] = useState(0);
Uses:
• Form handling
• Counters
• Dynamic UI updates
🧠 87. Difference Between State and Props
State : Managed inside component : Mutable
Props : Passed from parent : Immutable
🧠 88. What is useState Hook?
useState manages state in functional components.
Example:
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
setCount(count + 1)}>
{count}
);
}
🧠 89. What is useEffect Hook?
useEffect handles side effects.
Example:
useEffect(() => {
console.log("Component Loaded");
}, []);
Uses:
• API calls
• Timers
• Event listeners
🧠 90. What is Virtual DOM?
Virtual DOM is a lightweight copy of real DOM.
React updates only changed parts instead of entire page.
Benefits:
✅ Faster updates
✅ Better performance
🧠 91. What is Reconciliation?
Reconciliation is React’s process of comparing:
• Old Virtual DOM
• New Virtual DOM
Then updating only changed elements.
🧠 92. What are Keys in React?
Keys uniquely identify list items.
Example:
items.map(item => (
• {item.name}
));
Benefits:
✅ Better rendering
✅ Efficient updates
🧠 93. What is Prop Drilling?
Passing props through multiple nested components unnecessarily.
Problem:
App → Parent → Child → GrandChild
Solution:
• Context API
• Redux
🧠 94. What is Context API?
Context API shares data globally without prop drilling.
Example:
const UserContext = createContext();
Uses:
• Theme management
• Authentication
• Global settings
🧠 95. What is Redux?
Redux is a state management library used in React applications.
Concepts:
• Store
• Actions
• Reducers
Benefits:
✅ Centralized state
✅ Predictable state updates
.
🧠 81. What is React?
React is a JavaScript library used to build user interfaces.
It was developed by Meta.
Features:
✅ Component-based architecture
✅ Virtual DOM
✅ Reusable UI components
✅ Fast rendering
Example:
function App() {
return
Hello React
;
}
🧠 82. What are Components in React?
Components are reusable building blocks of UI.
Types:
• Functional Components
• Class Components
Example:
function Welcome() {
return
Welcome
;
}
🧠 83. Difference Between Functional and Class Components
Functional Component : Simpler syntax : Uses hooks : Preferred nowadays
Class Component : More complex : Uses lifecycle methods : Older approach
Functional Example:
function App() {
return
Hello
;
}
🧠 84. What is JSX?
JSX stands for: 👉 JavaScript XML
It allows writing HTML inside JavaScript.
Example:
const element =
Hello
;
Benefits:
✅ Cleaner syntax
✅ Easier UI development
🧠 85. What are Props?
Props are used to pass data between components.
Example:
function User(props) {
return
{props.name}
;
}
Usage:
🧠 86. What is State?
State stores dynamic data inside components.
Example:
const [count, setCount] = useState(0);
Uses:
• Form handling
• Counters
• Dynamic UI updates
🧠 87. Difference Between State and Props
State : Managed inside component : Mutable
Props : Passed from parent : Immutable
🧠 88. What is useState Hook?
useState manages state in functional components.
Example:
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
setCount(count + 1)}>
{count}
);
}
🧠 89. What is useEffect Hook?
useEffect handles side effects.
Example:
useEffect(() => {
console.log("Component Loaded");
}, []);
Uses:
• API calls
• Timers
• Event listeners
🧠 90. What is Virtual DOM?
Virtual DOM is a lightweight copy of real DOM.
React updates only changed parts instead of entire page.
Benefits:
✅ Faster updates
✅ Better performance
🧠 91. What is Reconciliation?
Reconciliation is React’s process of comparing:
• Old Virtual DOM
• New Virtual DOM
Then updating only changed elements.
🧠 92. What are Keys in React?
Keys uniquely identify list items.
Example:
items.map(item => (
• {item.name}
));
Benefits:
✅ Better rendering
✅ Efficient updates
🧠 93. What is Prop Drilling?
Passing props through multiple nested components unnecessarily.
Problem:
App → Parent → Child → GrandChild
Solution:
• Context API
• Redux
🧠 94. What is Context API?
Context API shares data globally without prop drilling.
Example:
const UserContext = createContext();
Uses:
• Theme management
• Authentication
• Global settings
🧠 95. What is Redux?
Redux is a state management library used in React applications.
Concepts:
• Store
• Actions
• Reducers
Benefits:
✅ Centralized state
✅ Predictable state updates
.
❤6
🧠 96 Difference Between Redux and Context API
Redux : Advanced state management : Better for large apps
Context API : Simple global state : Better for smaller apps
🧠 97. What are React Hooks?
Hooks allow functional components to use:
• State
• Lifecycle features
Common Hooks:
• useState
• useEffect
• useRef
• useMemo
• useCallback
🧠 98. What is useRef?
useRef stores mutable values without re-rendering.
Example:
const inputRef = useRef();
Uses:
• Access DOM elements
• Store previous values
🧠 99. What is useMemo?
useMemo optimizes expensive calculations.
Example:
const result = useMemo(() => {
return calculate(data);
}, [data]);
🧠 100. What is useCallback?
useCallback memoizes functions.
Example:
const memoFn = useCallback(() => {
console.log("Hello");
}, []);
🧠 101. What is Lazy Loading in React?
Lazy loading loads components only when needed.
Example:
const Home = React.lazy(() => import("./Home"));
Benefits:
✅ Faster loading
✅ Better performance
🧠 102. What is React Router?
React Router handles navigation in React applications.
Example:
} />
🧠 103. What are Controlled Components?
Form elements controlled by React state.
Example:
setName(e.target.value)}
/>
🧠 104. What are Uncontrolled Components?
Form elements managed by DOM itself.
Example:
🧠 105. What is Lifting State Up?
Moving shared state to common parent component.
Benefits:
✅ Better state sharing
✅ Improved synchronization
🧠 106. What is Higher Order Component HOC?
HOC is a function that takes component and returns enhanced component.
Example:
const Enhanced = withAuth(Component);
🧠 107. What are Custom Hooks?
Custom hooks reuse logic across components.
Example:
function useFetch() {
// logic
}
🧠 108. What is Strict Mode?
React Strict Mode helps identify potential issues.
Example:
🧠 109. What is Server-Side Rendering SSR?
SSR renders React components on server before sending to browser.
Benefits:
✅ Better SEO
✅ Faster initial load
🧠 110. Difference Between CSR and SSR
CSR : Rendered in browser : Slower initial load : SEO less optimized
SSR : Rendered on server : Faster initial load : Better SEO
Double Tap ❤️ For Part-5
Redux : Advanced state management : Better for large apps
Context API : Simple global state : Better for smaller apps
🧠 97. What are React Hooks?
Hooks allow functional components to use:
• State
• Lifecycle features
Common Hooks:
• useState
• useEffect
• useRef
• useMemo
• useCallback
🧠 98. What is useRef?
useRef stores mutable values without re-rendering.
Example:
const inputRef = useRef();
Uses:
• Access DOM elements
• Store previous values
🧠 99. What is useMemo?
useMemo optimizes expensive calculations.
Example:
const result = useMemo(() => {
return calculate(data);
}, [data]);
🧠 100. What is useCallback?
useCallback memoizes functions.
Example:
const memoFn = useCallback(() => {
console.log("Hello");
}, []);
🧠 101. What is Lazy Loading in React?
Lazy loading loads components only when needed.
Example:
const Home = React.lazy(() => import("./Home"));
Benefits:
✅ Faster loading
✅ Better performance
🧠 102. What is React Router?
React Router handles navigation in React applications.
Example:
} />
🧠 103. What are Controlled Components?
Form elements controlled by React state.
Example:
setName(e.target.value)}
/>
🧠 104. What are Uncontrolled Components?
Form elements managed by DOM itself.
Example:
🧠 105. What is Lifting State Up?
Moving shared state to common parent component.
Benefits:
✅ Better state sharing
✅ Improved synchronization
🧠 106. What is Higher Order Component HOC?
HOC is a function that takes component and returns enhanced component.
Example:
const Enhanced = withAuth(Component);
🧠 107. What are Custom Hooks?
Custom hooks reuse logic across components.
Example:
function useFetch() {
// logic
}
🧠 108. What is Strict Mode?
React Strict Mode helps identify potential issues.
Example:
🧠 109. What is Server-Side Rendering SSR?
SSR renders React components on server before sending to browser.
Benefits:
✅ Better SEO
✅ Faster initial load
🧠 110. Difference Between CSR and SSR
CSR : Rendered in browser : Slower initial load : SEO less optimized
SSR : Rendered on server : Faster initial load : Better SEO
Double Tap ❤️ For Part-5
❤14
𝗔𝗜 &𝗠𝗟 𝗙𝗥𝗘𝗘 𝗢𝗻𝗹𝗶𝗻𝗲 𝗠𝗮𝘀𝘁𝗲𝗿𝗰𝗹𝗮𝘀𝘀 😍
💫 Future-Proof Your AI & Machine Learning Career in 2026 with Generative AI Skills
💫Kickstart Your AI & Machine Learning Career
Eligibility :- Students ,Freshers & Working Professionals
𝗥𝗲𝗴𝗶𝘀𝘁𝗲𝗿 𝗙𝗼𝗿 𝗙𝗥𝗘𝗘👇 :-
https://pdlink.in/43oLYOA
( Limited Slots ..Hurry Up )
Date & Time :- 10th June 2026 , 7:00 PM
💫 Future-Proof Your AI & Machine Learning Career in 2026 with Generative AI Skills
💫Kickstart Your AI & Machine Learning Career
Eligibility :- Students ,Freshers & Working Professionals
𝗥𝗲𝗴𝗶𝘀𝘁𝗲𝗿 𝗙𝗼𝗿 𝗙𝗥𝗘𝗘👇 :-
https://pdlink.in/43oLYOA
( Limited Slots ..Hurry Up )
Date & Time :- 10th June 2026 , 7:00 PM
🥰1
🚀 Web Development Interview Questions with Answers — Part 5: Node.js
🧠 111. What is Node.js?
Node.js is a JavaScript runtime built on Chrome’s V8 engine.
It allows JavaScript to run outside the browser.
Features:
✅ Fast execution
✅ Event-driven
✅ Non-blocking I/O
✅ Scalable applications
Example:
console.log("Hello Node.js");
🧠 112. Why Use Node.js?
Advantages:
✅ Fast performance
✅ Single programming language for frontend & backend
✅ Handles multiple requests efficiently
✅ Huge npm ecosystem
Best Use Cases:
• APIs
• Real-time apps
• Chat applications
• Streaming services
🧠 113. What is npm?
npm stands for: 👉 Node Package Manager
Used to install libraries/packages.
Example:
npm install express
Uses:
• Install packages
• Manage dependencies
• Run scripts
🧠 114. Difference Between CommonJS and ES Modules
CommonJS : Uses require() : Uses module.exports
ES Modules : Uses import : Uses export
CommonJS:
const fs = require("fs");
ES Modules:
import fs from "fs";
🧠 115. What is Express.js?
Express.js is a minimal backend framework for Node.js.
Features:
✅ Routing
✅ Middleware support
✅ API development
Example:
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.send("Hello");
});
🧠 116. What is Middleware?
Middleware functions execute between: Request → Response
Uses:
• Authentication
• Logging
• Validation
Example:
app.use((req, res, next) => {
console.log("Middleware");
next();
});
🧠 117. What is REST API?
REST API follows REST architecture principles.
Common Methods:
• GET
• POST
• PUT
• DELETE
Example:
app.get("/users", (req, res) => {
res.json(users);
});
🧠 118. Difference Between PUT and PATCH
PUT : Updates entire resource
PATCH : Updates partial resource
Example:
PUT /user/1
PATCH /user/1
🧠 119. What is JWT?
JWT stands for: 👉 JSON Web Token
Used for authentication.
Structure:
Header.Payload.Signature
Benefits:
✅ Secure authentication
✅ Stateless sessions
🧠 120. What is Authentication vs Authorization?
Authentication : Verifies identity
Authorization : Verifies permissions
Example:
• Login → Authentication
• Admin access → Authorization
🧠 121. What is CORS?
CORS stands for: 👉 Cross-Origin Resource Sharing
It controls resource sharing between different domains.
Example:
app.use(cors());
🧠 122. What is dotenv?
dotenv loads environment variables from .env file.
Example:
require("dotenv").config();
.env
PORT=5000
🧠 123. What is Event Loop?
Event loop handles asynchronous operations in Node.js.
Process:
1. Executes synchronous code
2. Handles callbacks
3. Processes async tasks
Benefits:
✅ Non-blocking execution
✅ Efficient concurrency
🧠 124. What is Non-Blocking I/O?
Node.js can process multiple requests without waiting.
Benefits:
✅ Faster performance
✅ Better scalability
🧠 125. What is package.json?
package.json stores project metadata and dependencies.
🧠 111. What is Node.js?
Node.js is a JavaScript runtime built on Chrome’s V8 engine.
It allows JavaScript to run outside the browser.
Features:
✅ Fast execution
✅ Event-driven
✅ Non-blocking I/O
✅ Scalable applications
Example:
console.log("Hello Node.js");
🧠 112. Why Use Node.js?
Advantages:
✅ Fast performance
✅ Single programming language for frontend & backend
✅ Handles multiple requests efficiently
✅ Huge npm ecosystem
Best Use Cases:
• APIs
• Real-time apps
• Chat applications
• Streaming services
🧠 113. What is npm?
npm stands for: 👉 Node Package Manager
Used to install libraries/packages.
Example:
npm install express
Uses:
• Install packages
• Manage dependencies
• Run scripts
🧠 114. Difference Between CommonJS and ES Modules
CommonJS : Uses require() : Uses module.exports
ES Modules : Uses import : Uses export
CommonJS:
const fs = require("fs");
ES Modules:
import fs from "fs";
🧠 115. What is Express.js?
Express.js is a minimal backend framework for Node.js.
Features:
✅ Routing
✅ Middleware support
✅ API development
Example:
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.send("Hello");
});
🧠 116. What is Middleware?
Middleware functions execute between: Request → Response
Uses:
• Authentication
• Logging
• Validation
Example:
app.use((req, res, next) => {
console.log("Middleware");
next();
});
🧠 117. What is REST API?
REST API follows REST architecture principles.
Common Methods:
• GET
• POST
• PUT
• DELETE
Example:
app.get("/users", (req, res) => {
res.json(users);
});
🧠 118. Difference Between PUT and PATCH
PUT : Updates entire resource
PATCH : Updates partial resource
Example:
PUT /user/1
PATCH /user/1
🧠 119. What is JWT?
JWT stands for: 👉 JSON Web Token
Used for authentication.
Structure:
Header.Payload.Signature
Benefits:
✅ Secure authentication
✅ Stateless sessions
🧠 120. What is Authentication vs Authorization?
Authentication : Verifies identity
Authorization : Verifies permissions
Example:
• Login → Authentication
• Admin access → Authorization
🧠 121. What is CORS?
CORS stands for: 👉 Cross-Origin Resource Sharing
It controls resource sharing between different domains.
Example:
app.use(cors());
🧠 122. What is dotenv?
dotenv loads environment variables from .env file.
Example:
require("dotenv").config();
.env
PORT=5000
🧠 123. What is Event Loop?
Event loop handles asynchronous operations in Node.js.
Process:
1. Executes synchronous code
2. Handles callbacks
3. Processes async tasks
Benefits:
✅ Non-blocking execution
✅ Efficient concurrency
🧠 124. What is Non-Blocking I/O?
Node.js can process multiple requests without waiting.
Benefits:
✅ Faster performance
✅ Better scalability
🧠 125. What is package.json?
package.json stores project metadata and dependencies.
❤4
Example:
{
"name": "myapp",
"version": "1.0.0"
}
🧠 126. What is nodemon?
nodemon automatically restarts server after code changes.
Install:
npm install -g nodemon
🧠 127. What are Streams in Node.js?
Streams process data piece by piece instead of loading all at once.
Types:
• Readable
• Writable
• Duplex
• Transform
Benefits:
✅ Memory efficient
✅ Faster processing
🧠 128. What is Buffering?
Buffer temporarily stores binary data in memory.
Example:
const buffer = Buffer.from("Hello");
🧠 129. What is Async Middleware?
Middleware using async/await.
Example:
app.get("/", async (req, res) => {
const data = await fetchData();
res.json(data);
});
🧠 130. What is Rate Limiting?
Rate limiting restricts number of requests from users.
Benefits:
✅ Prevents abuse
✅ Protects APIs
✅ Improves security
Example:
const rateLimit = require("express-rate-limit");
Double Tap ❤️ For Part-6
{
"name": "myapp",
"version": "1.0.0"
}
🧠 126. What is nodemon?
nodemon automatically restarts server after code changes.
Install:
npm install -g nodemon
🧠 127. What are Streams in Node.js?
Streams process data piece by piece instead of loading all at once.
Types:
• Readable
• Writable
• Duplex
• Transform
Benefits:
✅ Memory efficient
✅ Faster processing
🧠 128. What is Buffering?
Buffer temporarily stores binary data in memory.
Example:
const buffer = Buffer.from("Hello");
🧠 129. What is Async Middleware?
Middleware using async/await.
Example:
app.get("/", async (req, res) => {
const data = await fetchData();
res.json(data);
});
🧠 130. What is Rate Limiting?
Rate limiting restricts number of requests from users.
Benefits:
✅ Prevents abuse
✅ Protects APIs
✅ Improves security
Example:
const rateLimit = require("express-rate-limit");
Double Tap ❤️ For Part-6
❤11
📊 𝗗𝗲𝗹𝗼𝗶𝘁𝘁𝗲 𝗙𝗿𝗲𝗲 𝗗𝗮𝘁𝗮 𝗔𝗻𝗮𝗹𝘆𝘁𝗶𝗰𝘀 𝗩𝗶𝗿𝘁𝘂𝗮𝗹 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 | 𝗔𝗽𝗽𝗹𝘆 𝗡𝗼𝘄!🚀
🔥 Program Highlights:
✅ Free Certificate from Deloitte
✅ Real-World Data Analytics Tasks
✅ Self-Paced Learning
✅ Industry-Relevant Projects
✅ Resume & LinkedIn Booster
✅ Perfect for Students & Freshers
No prior experience required! Build in-demand skills and stand out to recruiters. 💼
🔗 𝗘𝗻𝗿𝗼𝗹𝗹 𝗙𝗼𝗿 𝗙𝗥𝗘𝗘👇:
https://pdlink.in/3RVHcFU
📢 Share with friends who want to start a career in Data Analytics!
🔥 Program Highlights:
✅ Free Certificate from Deloitte
✅ Real-World Data Analytics Tasks
✅ Self-Paced Learning
✅ Industry-Relevant Projects
✅ Resume & LinkedIn Booster
✅ Perfect for Students & Freshers
No prior experience required! Build in-demand skills and stand out to recruiters. 💼
🔗 𝗘𝗻𝗿𝗼𝗹𝗹 𝗙𝗼𝗿 𝗙𝗥𝗘𝗘👇:
https://pdlink.in/3RVHcFU
📢 Share with friends who want to start a career in Data Analytics!
❤2
🚀 Web Development Interview Questions with Answers — Part 6: Database
🧠 131. What is SQL?
SQL stands for: 👉 Structured Query Language
It is used to manage and manipulate relational databases.
Uses:
• Store data
• Retrieve data
• Update records
• Delete records
Example:
SELECT * FROM users;
🧠 132. Difference Between SQL and NoSQL
SQL : Relational database : Uses tables : Structured schema
NoSQL : Non-relational database : Uses collections/documents : Flexible schema
Examples:
• SQL → MySQL
• NoSQL → MongoDB
🧠 133. What is Primary Key?
Primary key uniquely identifies each record in a table.
Features:
✅ Unique
✅ Cannot be NULL
Example:
CREATE TABLE users (
id INT PRIMARY KEY,
name VARCHAR(50)
);
🧠 134. What is Foreign Key?
Foreign key creates relationship between two tables.
Example:
CREATE TABLE orders (
order_id INT,
user_id INT,
FOREIGN KEY (user_id) REFERENCES users(id)
);
🧠 135. What is Normalization?
Normalization organizes database to reduce redundancy.
Normal Forms:
• 1NF
• 2NF
• 3NF
Benefits:
✅ Reduced duplication
✅ Better consistency
✅ Improved integrity
🧠 136. What are Joins in SQL?
Joins combine data from multiple tables.
Types:
• INNER JOIN
• LEFT JOIN
• RIGHT JOIN
• FULL JOIN
Example:
SELECT users.name, orders.amount
FROM users
INNER JOIN orders
ON users.id = orders.user_id;
🧠 137. Difference Between INNER JOIN and LEFT JOIN
INNER JOIN : Returns matching rows only
LEFT JOIN : Returns all left table rows
Example:
SELECT * FROM users
LEFT JOIN orders
ON users.id = orders.user_id;
🧠 138. What is Indexing?
Index improves database query performance.
Benefits:
✅ Faster searches
✅ Faster filtering
Example:
CREATE INDEX idx_name
ON users(name);
🧠 139. What is Aggregate Function?
Aggregate functions perform calculations on multiple rows.
Common Functions:
• COUNT()
• SUM()
• AVG()
• MIN()
• MAX()
Example:
SELECT COUNT(*) FROM users;
🧠 140. Difference Between DELETE, DROP, and TRUNCATE
DELETE : Removes rows : Can use WHERE
DROP : Removes table : Deletes structure
TRUNCATE : Removes all rows : Faster than DELETE
Example:
DELETE FROM users WHERE id = 1;
🧠 141. What is MongoDB?
MongoDB is a NoSQL database that stores data in JSON-like documents.
Features:
✅ Flexible schema
✅ High scalability
✅ Fast performance
Example Document:
{
"name": "Deepak",
"age": 25
}
🧠 142. Difference Between MongoDB and MySQL
MongoDB : NoSQL : Flexible schema : Document-based
MySQL : SQL : Fixed schema : Table-based
🧠 143. What is Schema?
Schema defines structure of database.
Example:
CREATE TABLE users (
id INT,
name VARCHAR(50)
);
🧠 144. What is ORM?
ORM stands for: 👉 Object Relational Mapping
ORM allows interaction with database using programming language objects.
Benefits:
✅ Easier queries
✅ Cleaner code
✅ Faster development
🧠 145. What is Sequelize?
Sequelize is an ORM for Node.js.
Example:
User.findAll();
🧠 131. What is SQL?
SQL stands for: 👉 Structured Query Language
It is used to manage and manipulate relational databases.
Uses:
• Store data
• Retrieve data
• Update records
• Delete records
Example:
SELECT * FROM users;
🧠 132. Difference Between SQL and NoSQL
SQL : Relational database : Uses tables : Structured schema
NoSQL : Non-relational database : Uses collections/documents : Flexible schema
Examples:
• SQL → MySQL
• NoSQL → MongoDB
🧠 133. What is Primary Key?
Primary key uniquely identifies each record in a table.
Features:
✅ Unique
✅ Cannot be NULL
Example:
CREATE TABLE users (
id INT PRIMARY KEY,
name VARCHAR(50)
);
🧠 134. What is Foreign Key?
Foreign key creates relationship between two tables.
Example:
CREATE TABLE orders (
order_id INT,
user_id INT,
FOREIGN KEY (user_id) REFERENCES users(id)
);
🧠 135. What is Normalization?
Normalization organizes database to reduce redundancy.
Normal Forms:
• 1NF
• 2NF
• 3NF
Benefits:
✅ Reduced duplication
✅ Better consistency
✅ Improved integrity
🧠 136. What are Joins in SQL?
Joins combine data from multiple tables.
Types:
• INNER JOIN
• LEFT JOIN
• RIGHT JOIN
• FULL JOIN
Example:
SELECT users.name, orders.amount
FROM users
INNER JOIN orders
ON users.id = orders.user_id;
🧠 137. Difference Between INNER JOIN and LEFT JOIN
INNER JOIN : Returns matching rows only
LEFT JOIN : Returns all left table rows
Example:
SELECT * FROM users
LEFT JOIN orders
ON users.id = orders.user_id;
🧠 138. What is Indexing?
Index improves database query performance.
Benefits:
✅ Faster searches
✅ Faster filtering
Example:
CREATE INDEX idx_name
ON users(name);
🧠 139. What is Aggregate Function?
Aggregate functions perform calculations on multiple rows.
Common Functions:
• COUNT()
• SUM()
• AVG()
• MIN()
• MAX()
Example:
SELECT COUNT(*) FROM users;
🧠 140. Difference Between DELETE, DROP, and TRUNCATE
DELETE : Removes rows : Can use WHERE
DROP : Removes table : Deletes structure
TRUNCATE : Removes all rows : Faster than DELETE
Example:
DELETE FROM users WHERE id = 1;
🧠 141. What is MongoDB?
MongoDB is a NoSQL database that stores data in JSON-like documents.
Features:
✅ Flexible schema
✅ High scalability
✅ Fast performance
Example Document:
{
"name": "Deepak",
"age": 25
}
🧠 142. Difference Between MongoDB and MySQL
MongoDB : NoSQL : Flexible schema : Document-based
MySQL : SQL : Fixed schema : Table-based
🧠 143. What is Schema?
Schema defines structure of database.
Example:
CREATE TABLE users (
id INT,
name VARCHAR(50)
);
🧠 144. What is ORM?
ORM stands for: 👉 Object Relational Mapping
ORM allows interaction with database using programming language objects.
Benefits:
✅ Easier queries
✅ Cleaner code
✅ Faster development
🧠 145. What is Sequelize?
Sequelize is an ORM for Node.js.
Example:
User.findAll();
❤3
Benefits:
✅ Easy database interaction
✅ Supports SQL databases
🧠 146. What is Mongoose?
Mongoose is an ODM library for MongoDB.
Example:
const User = mongoose.model("User", userSchema);
🧠 147. What are ACID Properties?
ACID ensures reliable database transactions.
Properties:
• Atomicity
• Consistency
• Isolation
• Durability
Benefits:
✅ Data reliability
✅ Transaction safety
🧠 148. What is Transaction?
Transaction is a group of database operations executed together.
Example:
BEGIN;
UPDATE accounts
SET balance = balance - 500
WHERE id = 1;
COMMIT;
🧠 149. What is Database Sharding?
Sharding splits database into smaller parts.
Benefits:
✅ Better scalability
✅ Faster performance
🧠 150. What is Replication?
Replication copies database data across multiple servers.
Benefits:
✅ High availability
✅ Backup support
✅ Fault tolerance
Double Tap ❤️ For Part-7
✅ Easy database interaction
✅ Supports SQL databases
🧠 146. What is Mongoose?
Mongoose is an ODM library for MongoDB.
Example:
const User = mongoose.model("User", userSchema);
🧠 147. What are ACID Properties?
ACID ensures reliable database transactions.
Properties:
• Atomicity
• Consistency
• Isolation
• Durability
Benefits:
✅ Data reliability
✅ Transaction safety
🧠 148. What is Transaction?
Transaction is a group of database operations executed together.
Example:
BEGIN;
UPDATE accounts
SET balance = balance - 500
WHERE id = 1;
COMMIT;
🧠 149. What is Database Sharding?
Sharding splits database into smaller parts.
Benefits:
✅ Better scalability
✅ Faster performance
🧠 150. What is Replication?
Replication copies database data across multiple servers.
Benefits:
✅ High availability
✅ Backup support
✅ Fault tolerance
Double Tap ❤️ For Part-7
❤13
💫 𝗔𝗧𝗧𝗘𝗡𝗧𝗜𝗢𝗡 𝗦𝗧𝗨𝗗𝗘𝗡𝗧𝗦 & 𝗙𝗥𝗘𝗦𝗛𝗘𝗥𝗦 🔥
This could be the biggest opportunity you join in 2026!
🏆 Win from ₹50 Lakh+ Prize Pool
🎓 Open to All Students
🤖 Explore AI & Innovation
📜 Earn Recognition
💯 Registration is FREE
Imagine adding a national innovation challenge to your resume before graduation.
⚡ Registration Closes Soon
𝗥𝗲𝗴𝗶𝘀𝘁𝗲𝗿 𝗙𝗼𝗿 𝗙𝗥𝗘𝗘 👇:-
https://pdlink.in/4fFWOqX
Share with your friends, classmates, teammates & colleagues who shouldn't miss this opportunity.
This could be the biggest opportunity you join in 2026!
🏆 Win from ₹50 Lakh+ Prize Pool
🎓 Open to All Students
🤖 Explore AI & Innovation
📜 Earn Recognition
💯 Registration is FREE
Imagine adding a national innovation challenge to your resume before graduation.
⚡ Registration Closes Soon
𝗥𝗲𝗴𝗶𝘀𝘁𝗲𝗿 𝗙𝗼𝗿 𝗙𝗥𝗘𝗘 👇:-
https://pdlink.in/4fFWOqX
Share with your friends, classmates, teammates & colleagues who shouldn't miss this opportunity.
❤4
🚀 Web Development Interview Questions with Answers — Part 7: Web Security
🧠 151. What is HTTPS?
HTTPS stands for: 👉 HyperText Transfer Protocol Secure
It is the secure version of HTTP that encrypts data exchanged between browser and server.
Benefits:
✅ Secure communication
✅ Protects sensitive data
✅ Prevents eavesdropping
Example: https://example.com
🧠 152. Difference Between HTTP and HTTPS
Feature : HTTP : HTTPS
Security : Not secure : Secure
Data : Sent as plain text : Data encrypted
Port : Uses Port 80 : Uses Port 443
SSL/TLS : No SSL/TLS : Requires SSL/TLS
🧠 153. What is SSL/TLS?
SSL (Secure Sockets Layer) and TLS (Transport Layer Security) are protocols that encrypt data transmission.
Benefits:
✅ Data encryption
✅ Authentication
✅ Data integrity
Example: When you see a padlock icon in the browser, SSL/TLS is being used.
🧠 154. What is XSS Attack?
XSS stands for: 👉 Cross-Site Scripting
It occurs when attackers inject malicious JavaScript into webpages.
Example:
Prevention:
✅ Validate input
✅ Escape output
✅ Use Content Security Policy (CSP)
🧠 155. What is CSRF Attack?
CSRF stands for: 👉 Cross-Site Request Forgery
It tricks authenticated users into performing unwanted actions.
Example: A logged-in user unknowingly submits a bank transfer request.
Prevention:
✅ CSRF Tokens
✅ SameSite Cookies
✅ Authentication checks
🧠 156. What is SQL Injection?
SQL Injection occurs when malicious SQL code is inserted into queries.
Vulnerable Query:
Prevention:
✅ Prepared Statements
✅ Parameterized Queries
✅ Input Validation
🧠 157. How to Secure APIs?
Best Practices:
✅ Use HTTPS
✅ Authentication & Authorization
✅ Rate Limiting
✅ Input Validation
✅ API Keys
✅ JWT Tokens
Example:
🧠 158. What is Hashing?
Hashing converts data into a fixed-length value.
Example:
Uses: Password storage, Data verification
🧠 159. Difference Between Encryption and Hashing
Feature : Encryption : Hashing
Reversibility : Reversible : Irreversible
Key : Uses key : No key required
Purpose : Protects data : Verifies integrity
Example:
Encryption → Credit card data
Hashing → Passwords
🧠 160. What is bcrypt?
bcrypt is a password hashing algorithm.
Features:
✅ Salt generation
✅ Secure password storage
✅ Resistant to brute-force attacks
Example:
🧠 161. What is OAuth?
OAuth is an authorization framework that allows third-party applications to access resources without sharing passwords.
Examples: Login with Google, Login with GitHub, Login with Facebook
Benefits:
✅ Secure authentication
✅ No password sharing
🧠 162. What is JWT Token Security?
JWT (JSON Web Token) securely transmits user information.
Structure: Header.Payload.Signature
Security Tips:
✅ Short expiration time
✅ Use HTTPS
✅ Store securely
🧠 163. What is Content Security Policy (CSP)?
CSP is a browser security feature that helps prevent XSS attacks.
Example:
🧠 151. What is HTTPS?
HTTPS stands for: 👉 HyperText Transfer Protocol Secure
It is the secure version of HTTP that encrypts data exchanged between browser and server.
Benefits:
✅ Secure communication
✅ Protects sensitive data
✅ Prevents eavesdropping
Example: https://example.com
🧠 152. Difference Between HTTP and HTTPS
Feature : HTTP : HTTPS
Security : Not secure : Secure
Data : Sent as plain text : Data encrypted
Port : Uses Port 80 : Uses Port 443
SSL/TLS : No SSL/TLS : Requires SSL/TLS
🧠 153. What is SSL/TLS?
SSL (Secure Sockets Layer) and TLS (Transport Layer Security) are protocols that encrypt data transmission.
Benefits:
✅ Data encryption
✅ Authentication
✅ Data integrity
Example: When you see a padlock icon in the browser, SSL/TLS is being used.
🧠 154. What is XSS Attack?
XSS stands for: 👉 Cross-Site Scripting
It occurs when attackers inject malicious JavaScript into webpages.
Example:
<script>
alert("Hacked");
</script>
Prevention:
✅ Validate input
✅ Escape output
✅ Use Content Security Policy (CSP)
🧠 155. What is CSRF Attack?
CSRF stands for: 👉 Cross-Site Request Forgery
It tricks authenticated users into performing unwanted actions.
Example: A logged-in user unknowingly submits a bank transfer request.
Prevention:
✅ CSRF Tokens
✅ SameSite Cookies
✅ Authentication checks
🧠 156. What is SQL Injection?
SQL Injection occurs when malicious SQL code is inserted into queries.
Vulnerable Query:
SELECT * FROM users
WHERE username = 'admin'
AND password = '123';
Prevention:
✅ Prepared Statements
✅ Parameterized Queries
✅ Input Validation
🧠 157. How to Secure APIs?
Best Practices:
✅ Use HTTPS
✅ Authentication & Authorization
✅ Rate Limiting
✅ Input Validation
✅ API Keys
✅ JWT Tokens
Example:
Authorization: Bearer <token> 🧠 158. What is Hashing?
Hashing converts data into a fixed-length value.
Example:
password123
↓
5e884898da...
Uses: Password storage, Data verification
🧠 159. Difference Between Encryption and Hashing
Feature : Encryption : Hashing
Reversibility : Reversible : Irreversible
Key : Uses key : No key required
Purpose : Protects data : Verifies integrity
Example:
Encryption → Credit card data
Hashing → Passwords
🧠 160. What is bcrypt?
bcrypt is a password hashing algorithm.
Features:
✅ Salt generation
✅ Secure password storage
✅ Resistant to brute-force attacks
Example:
const hash = await bcrypt.hash(password, 10);
🧠 161. What is OAuth?
OAuth is an authorization framework that allows third-party applications to access resources without sharing passwords.
Examples: Login with Google, Login with GitHub, Login with Facebook
Benefits:
✅ Secure authentication
✅ No password sharing
🧠 162. What is JWT Token Security?
JWT (JSON Web Token) securely transmits user information.
Structure: Header.Payload.Signature
Security Tips:
✅ Short expiration time
✅ Use HTTPS
✅ Store securely
🧠 163. What is Content Security Policy (CSP)?
CSP is a browser security feature that helps prevent XSS attacks.
Example:
Content-Security-Policy: default-src 'self';
❤4
Benefits:
✅ Prevents malicious scripts
✅ Improves website security
🧠 164. What is Brute Force Attack?
A brute force attack tries many password combinations until the correct one is found.
Prevention:
✅ Strong passwords
✅ Account lockout
✅ Rate limiting
✅ Multi-factor authentication
🧠 165. What is Two-Factor Authentication (2FA)?
2FA requires two forms of verification before granting access.
Example:
1. Password
2. OTP sent to phone
Benefits:
✅ Enhanced security
✅ Reduced account compromise risk
Double Tap ❤️ For Part-8
✅ Prevents malicious scripts
✅ Improves website security
🧠 164. What is Brute Force Attack?
A brute force attack tries many password combinations until the correct one is found.
Prevention:
✅ Strong passwords
✅ Account lockout
✅ Rate limiting
✅ Multi-factor authentication
🧠 165. What is Two-Factor Authentication (2FA)?
2FA requires two forms of verification before granting access.
Example:
1. Password
2. OTP sent to phone
Benefits:
✅ Enhanced security
✅ Reduced account compromise risk
Double Tap ❤️ For Part-8
❤9
𝗜𝗻𝗳𝗼𝘀𝘆𝘀 𝗦𝗽𝗿𝗶𝗻𝗴𝗯𝗼𝗮𝗿𝗱 – 𝗙𝗥𝗘𝗘 𝗢𝗻𝗹𝗶𝗻𝗲 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 & 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀🎓
Upgrade your skills without spending a single rupee
The platform provides digital, technical, soft-skill, and career-focused learning opportunities.
💡 Why Join?
✔️ Free Learning Platform
✔️ Industry-Relevant Courses
✔️ Skill Development Programs
✔️ Certificates on Completion
✔️ Learn Anytime, Anywhere
𝗥𝗲𝗴𝗶𝘀𝘁𝗲𝗿 𝗙𝗼𝗿 𝗙𝗥𝗘𝗘 👇:-
https://pdlink.in/4eBH3Aa
🔥 Start learning today and build skills that top companies are looking for!
Upgrade your skills without spending a single rupee
The platform provides digital, technical, soft-skill, and career-focused learning opportunities.
💡 Why Join?
✔️ Free Learning Platform
✔️ Industry-Relevant Courses
✔️ Skill Development Programs
✔️ Certificates on Completion
✔️ Learn Anytime, Anywhere
𝗥𝗲𝗴𝗶𝘀𝘁𝗲𝗿 𝗙𝗼𝗿 𝗙𝗥𝗘𝗘 👇:-
https://pdlink.in/4eBH3Aa
🔥 Start learning today and build skills that top companies are looking for!
❤6