Setting Up Your Development Environment
A proper development environment helps you write, test, and debug code efficiently. Let's set up the essential tools you'll need.
🎯 Start Here
Imagine an artist without a canvas, or a carpenter without tools. As a web developer, your tools are just as important as your skills!
Your development environment is the foundation of everything you'll build. Setting it up correctly from the start will save you countless hours of frustration.
- Have you ever tried to code in a plain text editor like Notepad? What was difficult about it?
- What makes a workspace comfortable and productive for you?
By the end of this lesson, you'll have a professional development setup that makes coding a joy!
Learning Objectives
By the end of this lesson, you'll be able to:
- ✓ Install Chrome browser for testing web pages
- ✓ Download and configure Visual Studio Code for web development
- ✓ Add essential VS Code extensions that enhance productivity
- ✓ Verify your setup is working correctly
Why This Matters:
Your development environment is where you'll spend most of your time as a developer. A proper setup provides syntax highlighting to catch typos, live previews to see changes instantly, and debugging tools to fix errors quickly. This one-time setup will pay dividends for your entire coding journey.
Web Browser
A modern web browser is your primary tool for viewing and testing websites.
Recommended Browser: Google Chrome
- Download from chrome.google.com
- Install following your system's standard process
- Make Chrome your default browser (recommended)
While we use Chrome in these tutorials, you can also use:
- Firefox
- Safari (Mac)
- Microsoft Edge
⏸️ Quick Check: Browser Setup
Before moving on:
- Why do we recommend Chrome for web development? (Hint: Developer tools!)
- Should you install multiple browsers? Why or why not?
Check Your Answers
- Chrome has excellent built-in developer tools for inspecting elements, debugging JavaScript, and monitoring network activity. It also has the largest market share, so you'll be testing with what most users see.
- Yes! Good developers test their sites in multiple browsers because each renders pages slightly differently. Install at least 2-3 different browsers for cross-browser testing.
How confident are you with this concept?
😕 Still confused | 🤔 Getting there | 😊 Got it! | 🎉 Could explain it to a friend!
Code Editor
Visual Studio Code (VS Code) is a free, powerful editor for web development.
Guided Practice: Installing and Configuring VS Code
Follow along as we set up VS Code step by step.
Step 1: Download and Install VS Code
- Visit code.visualstudio.com
- Download the version for your operating system
- Install with default settings
💡 Need a hint?
Step 2: Install Essential Extensions
Install these extensions to enhance your coding experience:
- Live Server
- Click the Extensions icon (or press Ctrl+Shift+X)
- Search for "Live Server"
- Click Install
- HTML CSS Support
- Search for "HTML CSS Support"
- Click Install
- Auto Rename Tag
- Search for "Auto Rename Tag"
- Click Install
💡 Need a hint?
Step 3: Test Your Setup
- Create a new file (File → New File)
- Save it as
test.html - Type
!and press Tab (should create HTML template) - Add "Hello World!" in the body
- Right-click the file → Open with Live Server
- See your page in Chrome!
💡 Need a hint?
! + Tab trick doesn't work, make sure your file is saved with an .html extension first.You're on track if you can:
- ☐ Open VS Code and create a new file
- ☐ See the Extensions panel with installed extensions
- ☐ Use the
!+ Tab shortcut to create HTML structure - ☐ Launch Live Server and see your page in the browser
💪 Independent Challenge: Create Your Workspace
Now personalize your development environment!
Your Task:
Set up a dedicated folder for your web development projects and create your first test page.
Requirements:
- Create a folder called "WebProjects" in a location you'll remember
- Open this folder in VS Code (File → Open Folder)
- Create a new HTML file called
index.html - Write a basic webpage that includes your name and a short bio
- Use Live Server to view your page
Stretch Goals (Optional):
- Install a color theme you like (File → Preferences → Color Theme)
- Explore additional extensions (try "Prettier" for code formatting)
- Learn 3 keyboard shortcuts that interest you
- Create a folder structure (css/, js/, images/) for organizing projects
Success Criteria:
| Criteria | You've succeeded if... |
|---|---|
| Organization | You have a dedicated folder for projects that you can easily find and open |
| Functionality | Your HTML file opens correctly in Live Server and displays in the browser |
| Confidence | You feel comfortable creating files, saving them, and viewing them in the browser |
🏁 Lesson Complete: Your Dev Environment is Ready!
Key Takeaways:
- Chrome provides excellent developer tools that help you inspect, debug, and test your websites
- VS Code is free, powerful, and the most popular code editor among web developers
- Extensions like Live Server dramatically improve your workflow by showing changes instantly
- A proper workspace setup (organized folders, good tools) makes coding more enjoyable and productive
- This one-time setup will serve you throughout your entire development journey
Learning Objectives Review:
Look back at what you set out to learn. Can you now:
- ✅ Install Chrome browser for testing web pages Check!
- ✅ Download and configure Visual Studio Code Got it!
- ✅ Add essential VS Code extensions Can explain it!
- ✅ Verify your setup is working correctly Could teach this!
If you can confidently answer "yes" to most of these, you're ready to move on!
Think & Reflect:
💭 💭 Compare Before & After
- Think about trying to code in Notepad vs. VS Code with Live Server. What's the biggest difference?
- How will seeing your changes instantly help you learn faster?
🎯 Looking Ahead:
With your development environment ready, you're all set to start coding! Next, we'll explore Browser Developer Tools—your secret weapon for inspecting, debugging, and understanding websites like a pro!
Recommended Next Steps
Continue Learning
Ready to move forward? Continue with the next tutorial in this series:
Browser Development ToolsRelated Topics
Explore these related tutorials to expand your knowledge:
Additional Resources
Deepen your understanding with these helpful resources:
- MDN: Setting Up a Development Environment - Guide to setting up basic development software.
Progress tracking is disabled. Enable it in to track your completed tutorials.
Cookie Settings