HTML5 Fundamentals

Setting Up Your Development Environment

20 min Lesson 2 of 18

Choosing a Code Editor: Visual Studio Code

A code editor is the primary tool you will use every day as a developer. While there are many options available, Visual Studio Code (VS Code) is the most popular and widely recommended editor for web development. It is free, open-source, lightweight, and runs on Windows, macOS, and Linux.

To install VS Code:

Visit https://code.visualstudio.com in your browser.
Click the download button for your operating system.
Run the installer and follow the on-screen instructions.
Launch VS Code once the installation is complete.

Note: VS Code is different from Visual Studio. Visual Studio is a full IDE mainly for .NET development, while VS Code is a lightweight editor perfect for web development.

Essential VS Code Extensions

Extensions add powerful features to VS Code. Here are three essential extensions every HTML developer should install immediately:

1. Live Server -- Launches a local development server with live reload. Every time you save your HTML file, the browser automatically refreshes to show your changes.

2. Prettier -- Automatically formats your code to be clean and consistent. It fixes indentation, spacing, and quote styles so you can focus on writing code rather than formatting it.

3. Auto Rename Tag -- When you rename an opening HTML tag, this extension automatically renames the matching closing tag. This prevents mismatched tags and saves time.

To install an extension, click the Extensions icon in the left sidebar (or press Ctrl+Shift+X on Windows / Cmd+Shift+X on Mac), search for the extension name, and click Install.

Example: VS Code Settings for HTML Development

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "liveServer.settings.doNotShowInfoMsg": true
}

Pro Tip: You can open VS Code settings by pressing Ctrl+, (Windows) or Cmd+, (Mac). Switch to the JSON view by clicking the curly braces icon in the top right corner to paste the settings above directly.

Browser DevTools Overview

Every modern browser includes built-in Developer Tools (DevTools) that let you inspect, debug, and modify web pages in real time. To open DevTools:

Chrome / Edge: Press F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac).
Firefox: Press F12 or Ctrl+Shift+I.
Safari: Enable the Develop menu in Preferences, then press Cmd+Option+I.

The most important DevTools panels for HTML development are:

Elements -- Inspect and edit HTML and CSS in real time.
Console -- View errors and run JavaScript commands.
Network -- Monitor HTTP requests and responses (remember the client-server model from Lesson 1).

Example: Using the Console to Test JavaScript

// Open DevTools > Console tab and type:
document.title
// This returns the current page title

document.querySelector("h1").textContent
// This returns the text inside the first h1 element

Creating Your First Project

Now let us set up a proper project structure. Follow these steps:

Create a new folder on your computer. Name it my-first-website.
Open VS Code and go to File > Open Folder, then select your new folder.
In the VS Code Explorer sidebar, click the New File icon and name it index.html.

Example: Complete index.html Starter File

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>I am learning HTML and this is my first project.</p>
    <p>Today I set up my development environment.</p>
</body>
</html>

Example: Recommended Project Folder Structure

my-first-website/
  index.html
  about.html
  contact.html
  css/
    style.css
  js/
    main.js
  images/
    logo.png

Note: The file index.html is special. Web servers look for this file by default when someone visits your site. Always name your main page index.html.

Using Live Server

With Live Server installed, you can preview your page instantly:

Open your index.html file in VS Code.
Right-click anywhere in the editor and select "Open with Live Server".
Your default browser will open and display your page at http://127.0.0.1:5500.
Now edit the text in your HTML file and save. The browser updates automatically.

This instant feedback loop is essential for learning. You write code, save, and immediately see the result without manually refreshing the browser.

Example: Testing Live Reload

<!-- Change this line in your index.html: -->
<h1>Welcome to My Website</h1>

<!-- To this: -->
<h1>Hello from VS Code!</h1>

<!-- Save the file (Ctrl+S / Cmd+S) -->
<!-- Watch the browser update automatically -->

File Naming Conventions

Following proper naming conventions prevents errors and keeps your projects organized:

Use lowercase letters -- Name files about.html, not About.HTML. Web servers are often case-sensitive.
Use hyphens instead of spaces -- Name files contact-us.html, not contact us.html. Spaces in URLs cause problems.
Use descriptive names -- Name files portfolio.html, not page2.html. Clear names make projects easier to maintain.
Always use the .html extension -- This tells the browser and editor that the file contains HTML code.
Keep names short -- Aim for one to three words. Avoid long filenames like my-really-long-page-name-about-stuff.html.

Common Mistake: Using spaces or special characters in file names. A file named my page.html becomes my%20page.html in the URL, which looks messy and can cause issues. Always use hyphens instead of spaces.

Pro Tip: In VS Code, type ! followed by the Tab key inside an empty HTML file. This triggers Emmet abbreviation and generates a complete HTML5 boilerplate instantly, saving you from typing the entire structure manually.

Practice Exercise

Set up your own development environment by following these steps: Install VS Code and the three recommended extensions (Live Server, Prettier, Auto Rename Tag). Create a project folder called html-course on your desktop. Inside it, create an index.html file with the HTML5 boilerplate. Add a heading with your name and a paragraph describing why you want to learn HTML. Open it with Live Server and verify it displays correctly in your browser. Then open DevTools and inspect your heading element in the Elements panel. Try changing the heading text directly in DevTools and observe the change on the page.