HTML Development Environment

Introduction

HTML does not need a heavy toolchain. You can start with a browser, a text editor, and one folder. This chapter sets up a simple environment with Chrome/Edge/Firefox, VS Code or WebStorm, Live Server, formatting, and DevTools so you can write and preview pages comfortably.

Prerequisites

• You understand the high-level flow from How web pages work
• Permission to install applications on your computer
• Basic file and folder operations

Choose a Browser

Use at least one modern browser for learning:

Pick one as your daily browser, but test important pages in more than one browser when you care about compatibility.

Choose an Editor

Recommended options:

This tutorial uses editor-neutral examples. If you are unsure, install VS Code.

Recommended VS Code Extensions

Install these from the Extensions panel:

• Live Server — preview HTML through http://localhost
• Prettier - Code formatter — consistent formatting
• HTML CSS Support — class and id suggestions

Optional:

• Auto Rename Tag — updates closing tags when you rename opening tags
• Error Lens — shows diagnostics inline

Do not install too many extensions at first. A small, predictable setup is easier to debug.

Create a Workspace Folder

Create a folder for this track:

html-learning/

Inside it, you will later create files like:

html-learning/
├── index.html
├── about.html
├── css/
│   └── styles.css
├── js/
│   └── app.js
└── images/
    └── logo.png

For the first few chapters, one index.html file is enough.

Configure Formatting

Formatting does not change what HTML means, but it makes structure readable.

In VS Code:

1. Open Settings.
2. Search for “Format On Save.”
3. Enable it.
4. Set Prettier as the default formatter if prompted.

Good formatting keeps nested tags easy to scan:

<main>
  <article>
    <h1>Learning HTML</h1>
    <p>Clean indentation helps humans read structure.</p>
  </article>
</main>

Preview with Live Server

After installing Live Server:

1. Open your html-learning folder in VS Code.
2. Create index.html.
3. Right-click the file.
4. Choose Open with Live Server.

Your browser should open something like:

http://127.0.0.1:5500/index.html

That is better than opening the file with file:// because it behaves more like a real website.

Basic DevTools Workflow

Open DevTools:

• Chrome/Edge: F12 or Cmd+Option+I on macOS
• Firefox: F12 or Cmd+Option+I on macOS

Start with three panels:

In the Elements panel, click an element and inspect:

• tag name
• attributes
• nested children
• computed accessibility name (browser-dependent)

You will use DevTools constantly. Treat it as part of the editor, not an advanced extra.

Folder Naming Rules

Use simple names:

• lowercase
• hyphen-separated
• no spaces
• no special characters

Good:

profile-page/
main-image.webp
blog-post.html

Avoid:

My HTML Project/
final final 2.html
首页 图片.png

Non-ASCII names can work, but ASCII file names avoid deployment and path issues across servers.

Optional: A Tiny Local Server Without Extensions

If you already have Node.js installed from the JavaScript track, you can use:

# Serve current folder over HTTP
npx serve .

If you have Python:

# Python 3 local HTTP server
python3 -m http.server 8000

Then open:

http://localhost:8000/

Live Server is still the friendliest option for beginners.

Environment Checklist

Before moving on, confirm:

• Browser installed
• Editor installed
• Project folder created
• Live Server or another local server works
• DevTools can open
• You know where your files are saved

FAQ

Do I need Node.js to learn HTML?

No. HTML can run directly in a browser. Node.js becomes useful later for tooling, packages, and JavaScript development.

Is VS Code required?

No. Any editor works if it saves plain text files. VS Code is recommended because it is free and common in web tutorials.

Why not just use an online playground?

Playgrounds are useful for quick experiments, but local files teach real paths, folders, assets, and deployment habits.

Should I install a formatter now?

Yes. Formatting early prevents messy examples and helps you see nesting mistakes.

What comes next?

Your first HTML page — create index.html, write the minimum document structure, and inspect it in the browser.