✅ Set Up Your Code Editor & Browser Dev Tools 🛠️🌐

Before building websites, you need a solid environment. Here's how to set up everything as a beginner:

🔹 1. Code Editor: VS Code (Visual Studio Code) 
VS Code is the most beginner-friendly and powerful editor used by most web developers.

➤ Steps to Set Up: 
1️⃣ Download & install from code.visualstudio.com 
2️⃣ Open VS Code → Go to Extensions tab (left sidebar) 
3️⃣ Install these must-have extensions:
⦁  Live Server – Auto-refresh browser when you save
⦁  Prettier – Format your code neatly
⦁  HTML CSS Support – Boosts suggestions & auto-complete
⦁  Auto Rename Tag – Edits both opening and closing tags
⦁  Path Intellisense – Autocomplete file paths

➤ Settings to Tweak (optional):
⦁  Font size, tab spacing
⦁  Theme: Dark+ (default) or install others like Dracula

🔹 2. Browser: Chrome or Firefox 
Use a modern browser with strong developer tools — Google Chrome is highly recommended.

➤ How to Open DevTools: 
Right-click on any webpage → Inspect 
or press Ctrl+Shift+I (Windows) / Cmd+Opt+I (Mac)

➤ Key DevTools Tabs:
⦁  Elements – Inspect & edit HTML/CSS live
⦁  Console – View JavaScript logs & errors
⦁  Network – Monitor page load and API calls
⦁  Responsive View – Test your site on mobile/tablets 
   (Click the phone+tablet icon on the top-left)

💡 Pro Tip: 
Use Live Server in VS Code + DevTools in Chrome side-by-side for real-time preview & debugging. This workflow saves hours!