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

💻 Tools Setup 🔥

This is your first practical step into web development 🚀

From here → you’ll start actually touching code

🧠 1. VS Code (Your Coding Editor)

👉 VS Code = Where you write code

✅ Steps to Install:

1. Go to Google → Search “VS Code download”
2. Install it
3. Open VS Code

⚙️ Must-Have Extensions:

• Live Server → Run website instantly
• Prettier → Auto format code
• Auto Rename Tag → Saves time

💡 What You’ll Do in VS Code:

• Create .html files
• Write code
• Run your website

🌐 2. Browser (Google Chrome)

👉 This is where your website runs

• Open your file in browser
• See output live

🔍 3. DevTools (Secret Weapon 💣)

👉 Right-click → Inspect

This opens DevTools

🔥 Important Tabs:

1. Elements Tab

• Shows HTML + CSS
• You can edit live

💡 Try:

• Change text
• Change colors

2. Console Tab

• Shows errors
• Run JavaScript

3. Network Tab

Shows requests responses

Helps understand:

• APIs
• Performance

🎯 Mini Practical Task

🟢 Task 1:

• Open any website
• Right-click → Inspect
• Change heading text

🟢 Task 2:

• Change background color using DevTools

🟢 Task 3:

• Open Network tab → Refresh page
• Observe requests

⚡ First Code (Your First Step 👇)

Open VS Code → create index.html

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World 🚀</h1>
</body>
</html>

👉 Right click → Open with Live Server

💡 Pro Tips

• Don’t try to memorize → experiment
• Break things → that’s how you learn 😄
• Use DevTools daily

🔥 Outcome

After this topic, you can: ✔ Set up environment
✔ Run your first website
✔ Debug using DevTools

Double Tap ❤️ For More