Setting Up Your Environment
Time to prepare your machine for programming!
What You'll Need
- A code editor (VS Code)
- A browser (Chrome or Firefox)
- Organized folders
That's it! Let's configure each one.
Installing VS Code
VS Code (Visual Studio Code) is the most popular code editor in the world. It's free!
Step by step:
- Go to code.visualstudio.com
- Click Download
- Install like any program
First Configuration
Open VS Code and install essential extensions:
- Click the Extensions icon (squares on the side)
- Search and install:
- Portuguese Language Pack (if you prefer Portuguese)
- Live Server (to see changes in real time)
- Prettier (formats code automatically)
Configuring the Browser
Chrome DevTools
Press F12 (or right-click → Inspect) to open DevTools.
Useful tabs:
- Elements: see HTML/CSS of the page
- Console: run JavaScript, see errors
- Network: see requests
Practice: open any site and press F12 to explore!
Folder Organization
Create an organized structure:
Documents/
└── projects/
└── learning/
├── html-basics/
├── css-basics/
└── javascript-basics/
Tip: Open folder in VS Code
- File → Open Folder
- Select your folder
- Now you have access to all files on the side
Your First File
- In VS Code, with the folder open
- Right-click → New File
- Name:
index.html - Type
!and press Tab
VS Code will auto-complete to:
html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </body></html>This is the basic HTML structure!
Testing with Live Server
- Right-click on
index.html - "Open with Live Server"
- Browser opens automatically!
- Any changes you make will update in real time
Summary
- ✅ VS Code installed with extensions
- ✅ Browser configured for development
- ✅ Organized folder created
- ✅ First HTML file working
In the next lesson, we'll create your first real HTML page! 🚀