Tools You'll Need
What You Will Learn
🎯 By the end of this lesson, you'll know: ➺ What tools every web developer uses daily ➺ How to set up VS Code — your coding home ➺ How to use your browser's secret developer tools ➺ How AI assistants can make you learn and code faster
3.1 • Your Web Developer Toolkit
> Think of It Like a Carpenter's Toolbox
A carpenter doesn't build a house with bare hands. They use the right tools — a hammer, a saw, a measuring tape. Web developers are the same. You need the right tools before you start building.
The 3 Essential Tools Every Web Developer Needs 🖊️ Tool 1 — Code Editor Where you write your code. Like Microsoft Word — but for writing HTML, CSS, and JavaScript instead of essays. ――――――――――――――――――――――――――――― 🌐 Tool 2 — Web Browser + DevTools Where you see and test your work. Chrome or Firefox — but with a hidden panel that lets you inspect and debug everything on any webpage. ――――――――――――――――――――――――――――― 🤖 Tool 3 — AI Assistant Your always-available coding helper. In 2026, every professional developer uses AI daily. You'll start using it from day one too.
All three tools are completely free. You don't need to buy anything to become a web developer.
3.2 • Tool 1 — VS Code
> The Home Where You Write Code
Visual Studio Code — VS Code for short — is the most popular code editor in the world. Used by beginners and professionals at Google, Microsoft, and Meta alike.
Download it free at: https://code.visualstudio.com Available for Windows, Mac, and Linux.
> Why VS Code and Not Notepad?
You could write code in Notepad. But it would be like driving without a steering wheel. Here's what VS Code gives you that Notepad doesn't:
🎨 Syntax Highlighting Colors different parts of your code. Easy to read at a glance — fewer mistakes, less eye strain.
💡 Autocomplete Suggests what to type next as you write. Faster coding, fewer typos, less time spent looking things up.
❌ Error Highlighting Underlines mistakes in red before you run the code. Catch problems early — before they break your whole page.
📁 File Explorer See all your project files in one sidebar. Stay organised as your projects grow from 1 file to 20.
🔌 Extensions Add extra features like plugins. Thousands of free extensions — you'll install two in the next step.
🤖 AI Integration GitHub Copilot works directly inside VS Code. AI writes code as you type — you'll set this up later in the course.
> Setting Up VS Code — Step by Step
First-Time Setup — Do This Once Step 1 — Download Go to https://code.visualstudio.com → click the big Download button → install it like any other app. ――――――――――――――――――――――――――――― Step 2 — Install Live Server Open VS Code → click the Extensions icon on the left sidebar (looks like 4 squares) → search "Live Server" → click Install.
Live Server automatically refreshes your browser every time you save your code. You save — the page updates instantly. It's one of those small things that makes a huge difference.
Step 3 — Install Prettier In Extensions → search "Prettier" → Install. This automatically formats and tidies your code every time you save. ――――――――――――――――――――――――――――― Step 4 — Choose a Theme (Optional) Extensions → search "One Dark Pro" or "GitHub Theme" → Install. Makes your code look great and easier to read during long sessions.
> Your First File in VS Code
Let's make sure everything works. Here's how to create your very first webpage:
In VS Code: 1. File → New File 2. Save it as: index.html 3. Type the following code:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>I am learning web development!</p>
</body>
</html>4. Right-click the file → click "Open with Live Server" 5. Your browser opens and shows your page 🎉
You just created your first webpage. This is the exact same starting point every web developer uses — from complete beginners to engineers at major tech companies.
3.3 • Tool 2 — Browser DevTools
> The Hidden Panel Inside Every Browser
Every browser has a built-in tool that lets you look inside any webpage. It's called DevTools — and it's already on your computer right now, completely free.
How to Open DevTools Option 1: Press F12 on your keyboard. ――――――――――――――――――――――――――――― Option 2: Press Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac). ――――――――――――――――――――――――――――― Option 3: Right-click anywhere on a webpage → click "Inspect".
Try it right now — open any website in your browser and press F12. You'll see the hidden layer underneath every page on the internet.
> What Can You Do With DevTools?
📄 Elements Tab See the HTML and CSS of any webpage. Hover over code — it highlights that part on the page. You can even edit it live. Changes appear instantly on your screen, but nothing on the real site changes. Great for: understanding how websites are built, testing CSS changes before writing them.
🖥️ Console Tab See JavaScript messages, errors, and run code live. When something breaks, the error message appears here in red. You can also type JavaScript directly into the console and run it immediately. Great for: debugging, quickly testing a JavaScript idea without creating a file.
📱 Device Toolbar Preview your website on different screen sizes. Click the phone icon at the top of DevTools. Your browser now pretends to be a phone or tablet — see exactly how your site looks on an iPhone or Android device. Great for: testing responsive design without needing a real device.
🌐 Network Tab See every file your browser downloads to load the page. HTML, CSS, images, fonts — all listed here with loading times. Great for: understanding page speed and what files a website actually uses.
Professional web developers have DevTools open almost all the time. It's like having X-ray vision for any website on the internet.
> Try It Now — Inspect Any Website
Try this right now: 1. Open https://www.wikipedia.org in Chrome 2. Press F12 to open DevTools 3. Click the Elements tab 4. Hover your mouse over the HTML code on the left side 5. Watch how different parts of the page get highlighted 🎯
You're now reading the actual code that builds Wikipedia. This is exactly what web developers do every day — and you just did it too.
3.4 • Tool 3 — AI Assistants
> Every Developer Uses AI in 2026
A few years ago, developers had to search Google for every problem. Today, AI assistants answer questions, write code, explain errors, and suggest improvements — in seconds.
Using AI doesn't mean you skip learning. It means you learn faster and build things better. You still need to understand the code AI gives you — otherwise you can't fix it when something goes wrong.
> The 3 AI Tools You'll Use in This Course
🤖 Claude — claude.ai Made by: Anthropic Free plan: Yes ✅ Best for: Explaining code clearly, fixing errors, writing clean HTML and CSS. Great for beginners — gives detailed, patient explanations. Ask it anything: "Why is my button not working?" and it will walk you through it step by step.
💬 ChatGPT — chat.openai.com Made by: OpenAI Free plan: Yes ✅ Best for: General coding help, brainstorming ideas, explaining concepts. The most widely used AI tool in the world. Very strong for code generation and debugging.
⚡ GitHub Copilot — github.com/features/copilot Made by: GitHub (Microsoft) Free plan: Yes ✅ (free for individual developers in 2026) Best for: Writing code inside VS Code as you type. Works directly inside your editor — like autocomplete but for full blocks of code. You start typing, AI suggests the rest, press Tab to accept.
> How to Ask AI the Right Way
The quality of what AI gives you depends entirely on how you ask.
❌ Bad Way to Ask David asks: "Fix my code." The problem: AI has no idea what your code is, what's broken, or what you're trying to do. The answer will be vague and won't actually help.
✅ Good Way to Ask David asks: "I am learning HTML. I wrote a button but when I click it, nothing happens. Here is my code: [paste code]. Can you explain what is wrong and how to fix it?" The result: AI knows your level, the problem, and the exact code. The answer will be clear, specific, and educational.
The golden formula for asking AI: My situation + What I want + My code or error = A great answer every time.
> Practical AI Prompts to Save and Reuse
🔍 To understand something: "Explain what CSS Flexbox is in simple words with a short example. I am a complete beginner."
🐛 To fix an error: "My HTML page is not showing the image. Here is my code: [paste code]. What is wrong and how do I fix it?"
💡 To generate code: "Write me a simple HTML page with a navigation bar at the top, a heading that says 'Welcome', and a contact form at the bottom."
📚 To learn what's next: "I just learned about HTML forms. What are the 5 most important things a beginner should know about forms next?"
Save these prompts somewhere handy. You'll use them constantly throughout this course and long after it.
3.5 • Your Complete Setup Checklist
> Before You Move to Lesson 4 — Check These Off
✅ Code Editor ☐ VS Code downloaded and installed ☐ Live Server extension installed ☐ Prettier extension installed ☐ Created index.html and saw "Hello, World!" in the browser
✅ Browser DevTools ☐ Opened DevTools with F12 ☐ Explored the Elements tab on a real website ☐ Tried the Device Toolbar to preview mobile view
✅ AI Assistant ☐ Created a free account on claude.ai or chat.openai.com ☐ Asked your first coding question using the golden formula
Don't skip the checklist. Every item here will come up in the lessons ahead. Five minutes of setup now saves hours of confusion later.
Lesson Summary
- 🖊️ VS Code is your code editor — where you'll write HTML, CSS, and JavaScript every day
- 🔌 Live Server and Prettier are the two must-have VS Code extensions — install them first
- 🔍 DevTools (F12) is a hidden superpower inside your browser — inspect any website on earth
- 🤖 Claude and ChatGPT explain and fix code — GitHub Copilot writes code inside VS Code as you type
- 💡 The golden formula for asking AI: situation + what you want + your code = great answer
- ✅ Everything is completely free — VS Code, DevTools, and AI free plans
Quick Check — Test Yourself
🧪 Answer these in your head, or write them down:
⟢ Question 1 What is VS Code and why is it better than Notepad for writing code?
⟢ Question 2 How do you open DevTools in your browser? Name two ways.
⟢ Question 3 What is the difference between Claude and GitHub Copilot — when would you use each one?
⟢ Question 4 Rewrite this into a good AI prompt: "My CSS is broken, help me."
➡️ Next Lesson: Lesson 4 — What Is HTML? You'll write real HTML code and watch your first webpage come to life in the browser.