Setting Up Your Environment

What You Need

To start writing HTML, you need just two things:

1. A text editor - To write your HTML code
2. A web browser - To view and test your web pages

That's it! No installation fees, no licenses, no complicated setup. Let's explore your options for each.

Choosing a Text Editor

A text editor is where you'll write your HTML code. While you could use basic programs like Notepad (Windows) or TextEdit (Mac), we strongly recommend using a proper code editor. Code editors have features that make writing HTML much easier and more enjoyable.

Basic Text Editors (Not Recommended)

These come pre-installed on your computer but lack helpful features:

• Notepad (Windows) - Very basic, no features
• TextEdit (Mac) - Basic, but can work if set to plain text mode

While these technically work, they make coding harder than it needs to be. Let's look at better options.

Code Editors (Highly Recommended)

Code editors are designed specifically for writing code. They include features like:

• Syntax highlighting - Different parts of your code appear in different colors
• Auto-completion - Suggests code as you type
• Error detection - Highlights mistakes before you even save
• Multiple file management - Work on several files at once
• Extensions - Add extra features as needed

Visual Studio Code (Our Recommendation)

Visual Studio Code (VS Code) is our top recommendation. It's:

• ✅ Completely free
• ✅ Available for Windows, Mac, and Linux
• ✅ Lightweight and fast
• ✅ Has thousands of extensions
• ✅ Used by professional developers worldwide
• ✅ Regular updates and excellent support

Other Popular Editors

While we recommend VS Code, here are other excellent options:

Sublime Text

• Fast and lightweight
• Clean interface
• Free to evaluate (with occasional purchase reminder)
• Download: sublimetext.com

Atom

• Made by GitHub
• Highly customizable
• Free and open source
• Download: atom.io

Brackets

• Designed specifically for web development
• Live preview feature
• Free and open source
• Download: brackets.io

Installing and Configuring VS Code

Let's walk through setting up VS Code, which we'll use for the rest of this tutorial.

Installation Steps

1. Download VS Code from code.visualstudio.com
2. Run the installer - Double-click the downloaded file
3. Follow the prompts - Accept the agreement and click Next
4. Choose installation options - We recommend checking:
   • "Add to PATH" (allows opening from command line)
   • "Create a desktop icon" (for easy access)
5. Click Install and wait for it to complete
6. Launch VS Code when installation finishes

First Look at VS Code

When you first open VS Code, you'll see:

• Activity Bar (left side) - Access different views and features
• Side Bar - Shows files, search, source control, etc.
• Editor Area (center) - Where you'll write your code
• Status Bar (bottom) - Information about your files

Essential VS Code Extensions for HTML

Extensions add extra functionality to VS Code. Here are some helpful ones for HTML:

How to Install Extensions:

1. Click the Extensions icon in the Activity Bar (or press Ctrl+Shift+X / Cmd+Shift+X)
2. Search for the extension name
3. Click "Install"

Recommended Extensions:

Choosing a Web Browser

You'll need a modern web browser to view and test your HTML pages. Most people already have at least one browser installed.

Recommended Browsers

Google Chrome (Our Recommendation)

• Most popular browser worldwide
• Excellent developer tools
• Regular updates
• Free download from google.com/chrome

Mozilla Firefox

• Privacy-focused
• Great developer tools
• Open source
• Free download from mozilla.org/firefox

Microsoft Edge

• Built into Windows 10 and 11
• Based on Chromium (same as Chrome)
• Good performance
• Pre-installed on Windows or download from microsoft.com/edge

Safari

• Default browser on Mac
• Fast on Apple devices
• Good developer tools
• Pre-installed on Mac

Browser Developer Tools

Every modern browser includes developer tools (DevTools) that let you inspect, debug, and test web pages. These are essential for learning and development.

How to Open Developer Tools

• Windows/Linux: Press F12 or Ctrl+Shift+I
• Mac: Press Cmd+Option+I
• Any platform: Right-click on a webpage and select "Inspect"

Key DevTools Panels

Elements/Inspector Tab

View and edit HTML structure in real-time. You can:

• See the HTML code of any element
• Modify HTML temporarily (just for testing)
• See CSS styles applied to elements
• Experiment with changes

Console Tab

View messages, errors, and warnings. Useful for:

• Seeing JavaScript errors
• Debugging code
• Testing JavaScript commands

Network Tab

See all files being loaded:

• HTML files
• CSS files
• JavaScript files
• Images and other resources

Creating Your Workspace

Good organization is important. Let's set up a proper folder structure for your HTML projects.

Recommended Folder Structure

📁 html-projects/
  📁 project-1/
    📄 index.html
    📄 about.html
    📁 images/
      🖼️ logo.png
    📁 css/
      📄 styles.css
  📁 project-2/
    📄 index.html
  📁 practice/
    📄 test.html

Creating Your First Project Folder

1. Create a main folder for all your HTML work (e.g., "html-projects" on your Desktop or Documents)
2. Inside that folder, create a new folder for your first project (e.g., "my-first-website")
3. Open VS Code
4. Go to File → Open Folder and select your project folder

Creating Your First HTML File

Let's create your very first HTML file to test your setup!

Steps:

1. In VS Code, with your project folder open, click the "New File" icon
2. Name the file index.html
3. Type the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page!</p>
  </body>
</html>

4. Save the file (Ctrl+S or Cmd+S)

Viewing Your HTML File

There are two ways to view your HTML file:

Method 1: Directly in Browser

1. Find your index.html file in your file explorer
2. Right-click it and choose "Open with" → Your browser

Method 2: Using Live Server (Recommended)

If you installed the Live Server extension:

1. Right-click anywhere in your HTML file in VS Code
2. Select "Open with Live Server"
3. Your default browser opens automatically!
4. Every time you save changes, the page refreshes automatically

Useful VS Code Shortcuts

These keyboard shortcuts will make coding faster:

• Ctrl+S / Cmd+S - Save file
• Ctrl+N / Cmd+N - New file
• Ctrl+/ / Cmd+/ - Comment/uncomment code
• Ctrl+D / Cmd+D - Select next occurrence of word
• Alt+Up/Down / Option+Up/Down - Move line up/down
• Shift+Alt+Down / Shift+Option+Down - Duplicate line
• Ctrl+P / Cmd+P - Quick file open

Emmet Abbreviations

VS Code includes Emmet, a plugin that lets you write HTML faster. Try typing this in an HTML file and pressing Tab:

!

It automatically expands to a full HTML document structure! We'll learn more Emmet shortcuts later.

Troubleshooting Common Issues

Issue: My HTML file won't open in the browser

Solution: Make sure your file has the .html extension, not .txt. Enable "show file extensions" in your operating system.

Issue: Changes aren't showing when I refresh

Solution: Make sure you saved the file (Ctrl+S). Try a hard refresh (Ctrl+F5 or Cmd+Shift+R).

Issue: Live Server isn't working

Solution: Make sure the extension is installed and enabled. Try restarting VS Code.

Key Takeaways

What's Next?

Your development environment is all set up! In the next lesson, we'll create your first complete HTML page from scratch and understand every part of its structure. Get ready to start coding!