Setting Up Your HTML5 Workflow

Setting Up Your HTML5 Workflow

Before writing HTML, it helps to build a simple, reliable workflow. Good tools make it easier to write clean markup, preview pages quickly, organize project files, and catch mistakes early.

This chapter focuses on the practical setup every beginner needs:

  • installing VS Code
  • opening a project folder
  • creating and saving HTML files correctly
  • previewing static pages in a system browser
  • using a live-reload preview tool

What You Need

For beginner HTML projects, you only need a few things:

  • a code editor
  • a web browser
  • a folder for your project files
  • an easy way to preview your pages

Recommended tools:

  • VS Code for editing
  • Chrome, Firefox, Edge, or Safari for testing
  • Live Server or a similar extension for automatic browser refresh

Why VS Code Is a Good Choice

VS Code is popular because it is:

  • easy to install
  • beginner-friendly
  • available on Windows, macOS, and Linux
  • full of useful features such as syntax highlighting, auto-complete, search, and extensions

You can write HTML in many editors, but VS Code gives you a smoother learning experience.

Installing VS Code

Windows

  1. Visit https://code.visualstudio.com
  2. Download the Windows installer
  3. Open the downloaded .exe file
  4. Follow the setup steps
  5. If available, enable options such as:
    • add to PATH
    • open with Code from the file explorer context menu
    • register Code as an editor for supported file types

macOS

  1. Visit https://code.visualstudio.com
  2. Download the macOS version
  3. Open the downloaded archive
  4. Drag Visual Studio Code into the Applications folder
  5. Open it from Applications or Spotlight

Linux

The easiest path depends on your distribution. On many systems, you can:

  1. download the package from the VS Code website
  2. install the .deb or .rpm package using your software installer
  3. or install through a package manager if your distro supports it

The main goal is simple: install VS Code so you can open folders and edit files easily.

Opening VS Code for the First Time

When VS Code opens, you will usually see:

  • a welcome screen
  • a sidebar on the left
  • a large editor area in the middle
  • a status bar at the bottom

Key areas to know:

  • Explorer: shows files and folders
  • Search: finds text across the project
  • Source Control: shows file changes if you use Git
  • Extensions: lets you install helpful add-ons

Helpful VS Code Features for HTML

VS Code gives you many built-in tools that are useful immediately:

  • syntax coloring for tags and attributes
  • auto-closing tags
  • indentation support
  • file search
  • multi-file project navigation
  • quick rename and editing

For example, if you type:

<p>

VS Code will usually help by inserting the closing tag automatically.

Recommended VS Code Extensions

You can work without extensions, but a few can make beginner HTML work much easier.

Live Server

Purpose:

  • opens your page in a browser using a local server
  • refreshes the browser when you save

This is one of the most useful beginner extensions for static pages.

Prettier

Purpose:

  • formats your code automatically

This helps keep indentation and spacing clean.

Optional Extensions

  • HTML CSS Support
  • Path Intellisense
  • Auto Rename Tag

Use only a few at first. Too many extensions can feel confusing.

How to Install an Extension in VS Code

  1. Open VS Code
  2. Click the Extensions icon in the sidebar
  3. Search for the extension name, such as Live Server
  4. Click Install

After installation, you may see new buttons or commands related to that extension.

Create a Project Folder

Before creating files, make a dedicated folder for your project.

Example:

my-first-site/
├── index.html
├── about.html
├── contact.html
├── assets/
│   ├── images/
│   ├── audio/
│   └── video/
└── notes/

This keeps your files organized from the start.

Open the Folder in VS Code

Instead of opening a single file by itself, it is better to open the whole project folder.

In VS Code:

  1. Click File
  2. Choose Open Folder
  3. Select your project folder

Why this helps:

  • you can see all project files together
  • links and image paths are easier to manage
  • extensions like Live Server work more smoothly

Create Your First HTML File

Inside the project folder, create a file named index.html.

This is often the default starting page for a website.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, HTML5!</h1>
    <p>I am ready to build web pages.</p>
</body>
</html>

Save Files Correctly

Always make sure:

  • the file ends in .html
  • you are saving inside the correct project folder
  • your editor is not accidentally saving as plain text

Good file names:

  • index.html
  • about.html
  • contact.html

Less helpful file names:

  • my cool webpage final final.html
  • untitled.txt

Previewing Static Pages in a System Browser

There are two common ways to preview a static HTML page.

Method 1: Open the File Directly

You can open the file straight in your system browser.

Examples:

  • double-click index.html
  • right-click the file and choose Open With
  • drag the file into Chrome, Firefox, Edge, or Safari

This works well for very simple pages.

Pros

  • very easy
  • no setup needed
  • good for first experiments

Limits

  • you may need to refresh the browser manually
  • some features behave better when served from a local server
  • relative file paths can be harder to debug if your folder structure is messy

Previewing with Live Server

Live Server is often a better workflow for beginners.

Why Use It

  • opens the page in your browser
  • refreshes automatically when you save
  • behaves more like a real local website

Basic Steps

  1. install the Live Server extension
  2. open your project folder in VS Code
  3. open index.html
  4. click Go Live in the bottom bar or right-click and choose Open with Live Server

Your browser will open a local address that often looks like:

http://127.0.0.1:5500/index.html

or

http://localhost:5500/index.html

When you save your HTML file, the browser usually refreshes automatically.

Choosing a Browser for Testing

Different browsers may render pages slightly differently, so it is smart to test in more than one.

Good choices:

  • Chrome for broad compatibility and developer tools
  • Firefox for strong standards support and debugging tools
  • Edge for another Chromium-based check
  • Safari if you want to test macOS and iPhone-like rendering behavior

At minimum, learn in one browser first and then spot-check in another.

Useful Browser Actions While Learning

Refresh the Page

If you are not using Live Server, you will need to refresh the browser manually after saving.

Open Developer Tools

Developer tools help you inspect the HTML structure of your page.

Usually available with:

  • F12
  • right-click -> Inspect
  • browser menu -> Developer Tools

Useful tabs include:

  • Elements or Inspector to see the HTML
  • Console for errors
  • Network for file loading issues

A Simple Test Workflow

Here is a beginner-friendly loop:

  1. open your project folder in VS Code
  2. edit index.html
  3. save the file
  4. preview it in the browser
  5. go back to VS Code and improve it
  6. repeat

This simple cycle is how a lot of web development begins.

Basic VS Code Habits That Save Time

  • save files often
  • keep the Explorer sidebar visible
  • use indentation consistently
  • open the whole folder, not just one file
  • keep assets in folders like assets/images
  • use search when you cannot find a file quickly

Common Beginner Mistakes

  • saving the file as .txt instead of .html
  • opening the wrong folder in VS Code
  • editing one file while previewing another
  • forgetting to save before refreshing
  • putting spaces and inconsistent names in files
  • storing images in random locations
  • expecting Live Server to work without opening the project folder

Troubleshooting Tips

The page opens as raw code instead of a webpage

Possible cause:

  • the file was not saved as .html

The browser shows an old version of the page

Possible causes:

  • the file was not saved
  • the browser was not refreshed
  • Live Server was not running

Images do not appear

Possible causes:

  • wrong file path
  • image file is in a different folder
  • file name capitalization does not match

Live Server does not start

Possible causes:

  • the extension is not installed
  • the project folder is not open
  • the HTML file was not selected

Why This Chapter Matters

A strong setup saves time later. Once your workflow feels comfortable, the rest of HTML becomes much easier to learn because you can focus on markup instead of fighting the editor or browser.

Next Chapter