𝗧𝗼𝗽 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀 𝗢𝗳𝗳𝗲𝗿𝗲𝗱 𝗕𝘆 𝗜𝗜𝗧'𝘀 & 𝗜𝗜𝗠 😍 

Placement Assistance With 5000+ companies.

Companies are actively hiring candidates with AI & ML skills.

⏳ Deadline: 28th Feb 2026

𝗔𝗜 & 𝗗𝗮𝘁𝗮 𝗦𝗰𝗶𝗲𝗻𝗰𝗲 :- https://pdlink.in/4kucM7E

𝗔𝗜 & 𝗠𝗮𝗰𝗵𝗶𝗻𝗲 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 :- https://pdlink.in/4rMivIA

𝗗𝗮𝘁𝗮 𝗔𝗻𝗮𝗹𝘆𝘁𝗶𝗰𝘀 𝗪𝗶𝘁𝗵 𝗔𝗜 :- https://pdlink.in/4ay4wPG

𝗕𝘂𝘀𝗶𝗻𝗲𝘀𝘀 𝗔𝗻𝗮𝗹𝘆𝘁𝗶𝗰𝘀 𝗪𝗶𝘁𝗵 𝗔𝗜 :- https://pdlink.in/3ZtIZm9

𝗠𝗟 𝗪𝗶𝘁𝗵 𝗣𝘆𝘁𝗵𝗼𝗻 :- https://pdlink.in/3OD9jI1

✅ Hurry Up...Limited seats only

Now, let's move to the next topic in Web Development Roadmap:

⚛️ React Hooks (useEffect useRef)

👉 Now you learn how React handles side effects and DOM access. These hooks are heavily used in real projects and interviews.

🧠 What are React Hooks
Hooks let you use React features inside functional components.

Before hooks → class components required
After hooks → functional components can do everything

✅ Common hooks
• useState → manage data
• useEffect → handle side effects
• useRef → access DOM or store values

🔄 Hook 1: useEffect (Side Effects)

❓ What is useEffect

useEffect runs code when:
✅ Component loads
✅ State changes
✅ Props change
✅ Component updates

Simple meaning 👉 Perform actions outside UI rendering.

📌 Why useEffect is needed

Used for:
• API calls
• Fetch data from server
• Timer setup
• Event listeners
• Page load logic

✍️ Basic Syntax

import { useEffect } from "react";
useEffect(() => {
  // code to run
}, []);

🚀 Run only once (on page load)

useEffect(() => {
  console.log("Component mounted");
}, []);

👉 Empty dependency array → runs once.

🔄 Run when state changes

useEffect(() => {
  console.log("Count changed");
}, [count]);

👉 Runs whenever count updates.

⏱️ Real Example — Timer

import { useState, useEffect } from "react";
function Timer() {
  const [time, setTime] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setTime(t => t + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  return <h2>{time}</h2>;
}

✔ Runs timer automatically
✔ Cleans memory using return

🎯 Hook 2: useRef (Access DOM / Store Values)

❓ What is useRef

useRef gives direct access to DOM elements. Also stores values without re-rendering.

Simple meaning 👉 Reference to element or value.

📌 Why useRef is used

• Focus input automatically
• Access DOM elements
• Store previous value
• Avoid re-render

✍️ Basic Syntax

import { useRef } from "react";
const inputRef = useRef();

🎯 Example — Focus input automatically

import { useRef } from "react";
function InputFocus() {
  const inputRef = useRef();
  const handleFocus = () => {
    inputRef.current.focus();
  };
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleFocus}>Focus</button>
    </div>
  );
}

✔ Button click focuses input.

⚖️ useState, useEffect, and useRef — What's the difference?

• useState: Stores changing data that triggers re-renders.
• useEffect: Runs side effects (e.g., API calls, timers).
• useRef: Accesses DOM elements or stores values without re-rendering.

⚠️ Common Beginner Mistakes
• Forgetting dependency array in useEffect
• Infinite loops in useEffect
• Using useRef instead of state
• Not cleaning side effects

🧪 Mini Practice Task
• Print message when component loads using useEffect
• Create timer using useEffect
• Focus input automatically using useRef
• Store previous value using useRef

✅ Double Tap ♥️ For More

Now, let's move to the next topic in Web Development Roadmap:

🌐 Backend Basics — Node.js Express

Now you move from frontend (React) → backend (server side).

Frontend = UI, Backend = Logic + Database + APIs.

🟢 What is Node.js ❓
• Node.js is a JavaScript runtime that runs outside the browser.
• Built on Chrome V8 engine, allows JavaScript to run on server.

🧠 Why Node.js is Popular
• Same language (JS) for frontend + backend
• Fast and lightweight
• Large ecosystem (npm)
• Used in real companies

⚡ How Node.js Works
• Single-threaded, event-driven, non-blocking I/O
• Handles many requests efficiently, good for APIs, real-time apps, chat apps

📦 What is npm
• npm = Node Package Manager
• Used to install libraries, manage dependencies, run noscripts

Example: npm install express

🚀 What is Express.js ❓
• Express is a minimal web framework for Node.js.
• Makes backend development easy, clean routing, easy API creation, middleware support

🧩 Basic Express Server Example
• Install Express: npm init -y, npm install express
• Create server.js:

const express = require("express");
const app = express();
app.get("/", (req, res) => {
  res.send("Hello Backend");
});
app.listen(3000, () => {
  console.log("Server running on port 3000");
});

• Creates server, handles GET request, sends response, listens on port 3000

🔄 What is an API
• API = Application Programming Interface
• Frontend talks to backend using APIs, usually in JSON format

🧠 Common HTTP Methods (Backend)
• GET: Fetch data
• POST: Send data
• PUT: Update data
• DELETE: Remove data

⚠️ Common Beginner Mistakes
• Forgetting to install express
• Not using correct port
• Not sending response
• Confusing frontend and backend

🧪 Mini Practice Task
• Create basic Express server
• Create route /about
• Create route /api/user returning JSON
• Start server and test in browser

✅ Mini Practice Task – Solution 🌐

🟢 Step 1️⃣ Install Express
Open terminal inside project folder:

npm init -y
npm install express

✔ Creates package.json
✔ Installs Express framework

📄 Step 2️⃣ Create server.js

Create a file named server.js and add:

const express = require("express");
const app = express();

// Home route
app.get("/", (req, res) => {
  res.send("Welcome to my server");
});

// About route
app.get("/about", (req, res) => {
  res.send("This is About Page");
});

// API route returning JSON
app.get("/api/user", (req, res) => {
  res.json({ name: "Deepak", role: "Developer", age: 25 });
});

// Start server
app.listen(3000, () => {
  console.log("Server running on http://localhost:3000");
});

▶️ Step 3️⃣ Start the Server
Run in terminal:

node server.js

You should see: Server running on http://localhost:3000

🌍 Step 4️⃣ Test in Browser
Open these URLs:
• http://localhost:3000/ → Welcome message
• http://localhost:3000/about → About page text
• http://localhost:3000/api/user → JSON response

Double Tap ♥️ For More

𝗔𝗜 & 𝗗𝗮𝘁𝗮 𝗦𝗰𝗶𝗲𝗻𝗰𝗲 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝗣𝗿𝗼𝗴𝗿𝗮𝗺 𝗕𝘆 𝗜𝗜𝗧 𝗥𝗼𝗼𝗿𝗸𝗲𝗲 😍

👉Learn from IIT faculty and industry experts
🔥100% Online | 6 Months
🎓Get Prestigious Certificate

 💫Companies are actively hiring candidates with Data Science & AI skills.

 Deadline: 8th March 2026

𝗥𝗲𝗴𝗶𝘀𝘁𝗲𝗿 𝗙𝗼𝗿 𝗦𝗰𝗵𝗼𝗹𝗮𝗿𝘀𝗵𝗶𝗽 𝗧𝗲𝘀𝘁 👇 :- 

https://pdlink.in/4kucM7E

✅ Limited seats only

🚀 Top 10 Careers in Web Development (2026) 🌐💻

1️⃣ Frontend Developer
▶️ Skills: HTML, CSS, JavaScript, React, Next.js
💰 Avg Salary: ₹6–16 LPA (India) / 95K+ USD (Global)

2️⃣ Backend Developer
▶️ Skills: Node.js, Python, Java, APIs, Databases
💰 Avg Salary: ₹8–20 LPA / 105K+

3️⃣ Full-Stack Developer
▶️ Skills: React/Next.js, Node.js, SQL/NoSQL, REST APIs
💰 Avg Salary: ₹9–22 LPA / 110K+

4️⃣ JavaScript Developer
▶️ Skills: JavaScript, TypeScript, React, Angular, Vue
💰 Avg Salary: ₹8–18 LPA / 100K+

5️⃣ WordPress Developer
▶️ Skills: WordPress, PHP, Themes, Plugins, SEO Basics
💰 Avg Salary: ₹5–12 LPA / 85K+

6️⃣ Web Performance Engineer
▶️ Skills: Core Web Vitals, Lighthouse, Optimization, CDN
💰 Avg Salary: ₹10–22 LPA / 115K+

7️⃣ Web Security Specialist
▶️ Skills: Web Security, OWASP, Pen Testing, Secure Coding
💰 Avg Salary: ₹12–24 LPA / 120K+

8️⃣ UI Developer
▶️ Skills: HTML, CSS, JavaScript, UI Frameworks, Responsive Design
💰 Avg Salary: ₹6–15 LPA / 95K+

9️⃣ Headless CMS Developer
▶️ Skills: Strapi, Contentful, GraphQL, Next.js
💰 Avg Salary: ₹10–20 LPA / 110K+

🔟 Web3 / Blockchain Developer
▶️ Skills: Solidity, Smart Contracts, Web3.js, Ethereum
💰 Avg Salary: ₹12–28 LPA / 130K+

🌐 Web development remains one of the most accessible and high-demand tech careers worldwide.

Double Tap ❤️ if this helped you!

𝗜𝗜𝗧 𝗥𝗼𝗼𝗿𝗸𝗲𝗲 𝗢𝗳𝗳𝗲𝗿𝗶𝗻𝗴 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝗣𝗿𝗼𝗴𝗿𝗮𝗺 𝗶𝗻 𝗗𝗮𝘁𝗮 𝗔𝗻𝗮𝗹𝘆𝘁𝗶𝗰𝘀📊 𝘄𝗶𝘁𝗵 𝗔𝗜 𝗮𝗻𝗱 𝗚𝗲𝗻 𝗔𝗜 😍

Placement Assistance With 5000+ companies.

🔥 Companies are actively hiring candidates with Data Analytics skills.

🎓 Prestigious IIT certificate
🔥 Hands-on industry projects
📈 Career-ready skills for data & AI jobs

𝐑𝐞𝐠𝐢𝐬𝐭𝐞𝐫 𝐍𝐨𝐰👇 :- 

https://pdlink.in/4rwqIAm

Limited seats available. Apply now to secure your spot

Web Development Roadmap

🌐 REST APIs & Routing in Express

Now you move from basic server → real backend API structure.

If you understand this topic properly, you can build production-level APIs.

🧠 What is a REST API?

REST = Representational State Transfer

Simple meaning:
👉 Backend exposes URLs
👉 Frontend sends HTTP requests
👉 Backend returns data (usually JSON)

🔥 REST API Structure

REST follows resources-based URLs.

Example resource: users

Instead of:
- /addUser
- /deleteUser

REST style:
- POST /users
- PUT /users/:id
- DELETE /users/:id

📌 HTTP Methods in REST

- GET -> Read data
- POST -> Create data
- PUT -> Update data
- DELETE -> Remove data

These map directly to CRUD.

🧩 Basic REST API Example

Step 1: Setup Express

const express = require("express");
const app = express();

app.use(express.json()); // middleware for JSON

let users = [
  { id: 1, name: "Amit" },
  { id: 2, name: "Rahul" }
];

🔍 1️⃣ GET – Fetch all users

app.get("/users", (req, res) => {
  res.json(users);
});

➕ 2️⃣ POST – Add new user

app.post("/users", (req, res) => {
  const newUser = {
    id: users.length + 1,
    name: req.body.name
  };

  users.push(newUser);
  res.json(newUser);
});

✏️ 3️⃣ PUT – Update user

app.put("/users/:id", (req, res) => {
  const id = parseInt(req.params.id);
  const user = users.find(u => u.id === id);

  if (!user) {
    return res.status(404).json({ message: "User not found" });
  }

  user.name = req.body.name;
  res.json(user);
});

❌ 4️⃣ DELETE – Remove user

app.delete("/users/:id", (req, res) => {
  const id = parseInt(req.params.id);
  users = users.filter(u => u.id !== id);
  res.json({ message: "User deleted" });
});

▶️ Start Server

app.listen(3000, () => {
  console.log("Server running on port 3000");
});

🧠 What is Routing?

Routing means:
👉 Matching URL
👉 Matching HTTP method
👉 Running correct function

Example:
- GET /users → fetch users
- POST /users → create user

📁 Better Folder Structure (Real Projects)

project/
 ├── routes/
 │     └── userRoutes.js
 ├── controllers/
 ├── server.js

Separation of concerns = scalable backend.

⚠️ Common Beginner Mistakes

- Not using express.json()
- Not parsing req.params correctly
- Not sending status codes
- Not handling missing data

🧪 Mini Practice Task

- Create REST API for products
- GET /products
- POST /products
- PUT /products/:id
- DELETE /products/:id

➡️ Double Tap ♥️ For More

🚀𝗚𝗲𝘁 𝗧𝗼𝗽 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀 𝗜𝗜𝗧's & 𝗜𝗜𝗠 

Dreaming of studying at an IIT and building a career in AI ? This is your chance

✅ Prestigious IIT  Certification
✅ Learn directly from IIT Professors
✅ Placement Assistance with 5000+ Companies

💡 Today’s top companies are actively looking for professionals with AI skills. 

𝗥𝗲𝗴𝗶𝘀𝘁𝗲𝗿 𝗡𝗼𝘄 👇 :- 

𝗔𝗜 & 𝗗𝗮𝘁𝗮 𝗦𝗰𝗶𝗲𝗻𝗰𝗲 :- https://pdlink.in/4kucM7E

𝗔𝗜 & 𝗠𝗮𝗰𝗵𝗶𝗻𝗲 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 :- https://pdlink.in/4rMivIA

𝗗𝗮𝘁𝗮 𝗔𝗻𝗮𝗹𝘆𝘁𝗶𝗰𝘀 𝗪𝗶𝘁𝗵 𝗔𝗜 :- https://pdlink.in/4ay4wPG

⏳ Limited seats – Register before the link expires!

𝗗𝗲𝘃𝗢𝗽𝘀 𝗙𝗥𝗘𝗘 𝗢𝗻𝗹𝗶𝗻𝗲 𝗠𝗮𝘀𝘁𝗲𝗿𝗰𝗹𝗮𝘀𝘀 𝗕𝘆 𝗜𝗻𝗱𝘂𝘀𝘁𝗿𝘆 𝗘𝘅𝗽𝗲𝗿𝘁𝘀😍

- Bridge the Gap Between Your Current Skills and What DevOps Roles Demand
- Know The Roadmap To Become DevOps Engineer In 2026

Eligibility :- Students ,Freshers & Working Professionals

𝗥𝗲𝗴𝗶𝘀𝘁𝗲𝗿 𝗙𝗼𝗿 𝗙𝗥𝗘𝗘👇 :- 

https://pdlink.in/40YmeqV

( Limited Slots ..Hurry Up🏃‍♂️ )

Date & Time :- March 10 , 2026 , 7:00 PM