LearnContact
Lesson 49 min read

HTML Installation & Setup

Learn how to prepare your HTML development environment using Visual Studio Code, a modern web browser, and Live Server.

Introduction

In the previous lesson, you learned how websites work and understood how browsers, DNS, servers, HTTP, HTTPS, and the Internet work together to display webpages.

Now you are ready to begin practical HTML development. Before writing your first webpage, you need to prepare a simple development environment.

Unlike programming languages such as C and C++, HTML does not require a compiler. An HTML document is a text file that a web browser can read and interpret.

Programming Language Setup

  • May require a compiler or interpreter.
  • May require a runtime environment.
  • Can require package managers and build tools.
  • Setup can vary by programming language.

HTML Setup

  • Requires a text or code editor.
  • Requires a web browser.
  • Does not require a compiler.
  • Can begin with a single .html file.

You can technically create HTML using a basic text editor. However, professional developers use code editors because they provide features that make development faster, easier, and more organized.

Install Code Editor
↓
Choose Browser
↓
Install Live Server
↓
Create Project Folder
↓
Create HTML File
↓
Open in Browser
No HTML Compiler Required

HTML documents are read and processed by web browsers. You do not need to compile an HTML file before opening it.

Why Do We Need Installation?

HTML itself does not need to be installed. What you are preparing is a development environment containing the tools needed to create, organize, test, and debug webpages efficiently.

Without Proper Tools

  • Code is harder to read.
  • Writing repetitive code takes longer.
  • Managing multiple files becomes difficult.
  • Testing changes requires more manual work.
  • Finding mistakes can be more difficult.

With Proper Tools

  • Syntax highlighting improves readability.
  • Code completion speeds up development.
  • Project files remain organized.
  • Live preview improves the testing workflow.
  • Developer tools help identify problems.

Syntax Highlighting

Different parts of your HTML code are displayed with different visual formatting.

Code Completion

The editor can suggest tags, attributes, filenames, and other code while you type.

File Management

Project folders and files can be managed from one development workspace.

Extensions

Additional tools can be installed to improve the development experience.

Live Preview

Local development servers can make testing webpages faster.

Debugging Tools

Browser developer tools help inspect HTML, CSS, JavaScript, and network activity.

You Are Installing Development Tools

HTML itself is not being installed. You are installing tools that make writing and testing HTML more efficient.

Software Required

A beginner HTML development environment can be created with three main tools.

ToolPurposeRequired?
Code EditorWrite and manage HTML filesYes
Web BrowserDisplay and test webpagesYes
Live ServerServe files locally and refresh changesRecommended

1️⃣ Visual Studio Code

Used to create, edit, organize, and manage HTML and other web development files.

2️⃣ Web Browser

Used to open, display, test, and debug webpages.

3️⃣ Live Server

Provides a convenient local development server with automatic browser refresh.

Development Environment
Developer
    │
    ▼
Code Editor
    │
    │ Creates HTML File
    ▼
Project Folder
    │
    │ Served Locally
    ▼
Live Server
    │
    ▼
Web Browser
    │
    ▼
Webpage Output

1. Visual Studio Code

Visual Studio Code, commonly called VS Code, is a source-code editor developed by Microsoft.

It is widely used for web development because it supports HTML, CSS, JavaScript, extensions, integrated terminals, source control tools, and many other development features.

Syntax Highlighting

Makes code easier to read by visually distinguishing tags, attributes, strings, and other syntax.

IntelliSense

Provides suggestions and completion features while you write code.

Extensions

Allows additional functionality to be installed from the extension marketplace.

Integrated Terminal

Allows command-line tools to run without leaving the editor.

Explorer

Displays and manages the folders and files in your project.

Search

Finds text across individual files or an entire project.

Source Control

Provides built-in integration for source-control workflows such as Git.

Debugging

Supports debugging tools for many programming and development environments.

Installing VS Code

The installation process depends slightly on your operating system, but the general process is straightforward.

Visit Official Website
↓
Choose Operating System
↓
Download Installer
↓
Run Installer
↓
Complete Setup
↓
Launch VS Code
  • Open the official Visual Studio Code website.
  • Download the correct installer for your operating system.
  • Run the downloaded installer.
  • Review the installation options.
  • Complete the installation.
  • Launch Visual Studio Code.
Download Software from Official Sources

Whenever possible, download development tools from their official websites or trusted operating-system package sources.

Understanding the VS Code Interface

Simplified VS Code Interface
┌──────────────────────────────────────────────┐
│                 Menu Bar                     │
├──────┬──────────────┬────────────────────────┤
│      │              │                        │
│      │              │                        │
│ Act. │   Explorer   │        Editor          │
│ Bar  │              │                        │
│      │              │                        │
│      │              │                        │
├──────┴──────────────┴────────────────────────┤
│              Terminal / Panel                │
├──────────────────────────────────────────────┤
│                 Status Bar                   │
└──────────────────────────────────────────────┘
AreaPurpose
Activity BarSwitch between Explorer, Search, Source Control, Run, and Extensions
ExplorerView and manage project folders and files
EditorWrite and edit code
PanelDisplay terminal, problems, output, and debugging information
Status BarDisplay information about the current file and workspace

Useful VS Code Shortcuts

ActionWindows / LinuxmacOS
Save FileCtrl + SCmd + S
Open FileCtrl + OCmd + O
Open FolderCtrl + K, Ctrl + OCmd + K, Cmd + O
ExtensionsCtrl + Shift + XCmd + Shift + X
Command PaletteCtrl + Shift + PCmd + Shift + P
Integrated TerminalCtrl + `Control + `

2. Web Browser

A web browser is required to display and test your HTML webpages.

The browser reads the HTML document, builds the document structure, applies styles, executes JavaScript when present, and renders the final page.

Google Chrome

A widely used Chromium-based browser with comprehensive developer tools.

Microsoft Edge

A Chromium-based browser integrated with the Windows ecosystem.

Mozilla Firefox

A major browser with powerful web development and debugging tools.

Safari

The default browser on Apple platforms and important for testing websites on those devices.

Recommended for This Course

You can use any modern browser. A Chromium-based browser such as Chrome or Edge provides an excellent environment for following beginner web development lessons.

Why Developers Use Browser Developer Tools

Inspect HTML

View the document structure generated by the browser.

Inspect CSS

See which style rules are applied to an element.

Console

View messages and JavaScript errors.

Network

Inspect requests, responses, resource sizes, and loading times.

Device Testing

Simulate different screen sizes during responsive development.

Performance

Analyze loading and runtime performance.

Opening Developer Tools
Windows / Linux:

F12

or

Ctrl + Shift + I


macOS:

Cmd + Option + I

3. Live Server Extension

During HTML development, you repeatedly edit a file, save it, and check the result in the browser.

A local development server can improve this workflow by serving your project through a local address and refreshing the browser when files change.

Without Live Server

  • Edit the file.
  • Save the file.
  • Switch to the browser.
  • Refresh manually.
  • Repeat after every change.

With Live Server

  • Edit the file.
  • Save the file.
  • Browser refreshes automatically.
  • View the updated result.
  • Continue developing.

Installing Live Server

Open VS Code
↓
Open Extensions
↓
Search Live Server
↓
Verify Extension
↓
Install Extension
↓
Open Project
  • Open Visual Studio Code.
  • Open the Extensions view.
  • Search for Live Server.
  • Select the required extension.
  • Review the extension details and publisher.
  • Click Install.
Extension Names Can Be Similar

Before installing any editor extension, verify its name, publisher, description, permissions, update history, and marketplace information.

What Does a Local Server Mean?

A local server runs on your own computer and serves files for development and testing.

Opening a File Directly

  • Uses a file URL.
  • Opens the document directly from storage.
  • Example: file:///.../index.html
  • Useful for very simple testing.

Using a Local Server

  • Uses HTTP on your computer.
  • Serves files through a local address.
  • Example: http://127.0.0.1:5500
  • Closer to a normal web development workflow.
Example Local Development Address
http://127.0.0.1:5500/index.html
Local Does Not Mean Public

A development server running on your computer is normally used for local testing. It does not automatically publish your website on the Internet.

Creating Your First Project

A web development project should be stored inside its own folder. The folder acts as the project root and contains all related files and directories.

Create Project Folder
↓
Open Folder in VS Code
↓
Create index.html
↓
Save File
↓
Open with Live Server

Step 1: Create a Project Folder

Create a new folder in a location that is easy to find.

Example Folder Name
html-course
Use Simple Folder Names

For beginner web projects, use short and meaningful lowercase names. Hyphens are useful when a name contains multiple words.

Step 2: Open the Folder in VS Code

  • Launch Visual Studio Code.
  • Open the File menu.
  • Choose Open Folder.
  • Select your project folder.
  • Confirm the selection.
  • The folder appears in the Explorer.
Open the Folder, Not Only the File

Opening the complete project folder gives VS Code and extensions better awareness of the project structure.

Step 3: Create index.html

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

Project After Creating the File
html-course/
│
└── index.html

The .html extension identifies the file as an HTML document.

Incorrect Names

  • index
  • index.txt
  • index.html.txt
  • homepage.docx

Correct Name

  • index.html
  • Contains a filename.
  • Uses the .html extension.
  • Can be recognized as an HTML document.

Why Is index.html Commonly Used?

The filename index.html is commonly used for the default document of a website directory.

Default Document Concept
Request:

https://example.com/

        │
        ▼

Server checks configured
default document

        │
        ▼

index.html

        │
        ▼

Page Returned
Default Documents Depend on Server Configuration

Many servers commonly use index.html as a default document, but the exact behavior is controlled by server or hosting configuration.

Step 4: Add Your First Content

First HTML Content
<h1>Hello, World!</h1>

<p>My first HTML webpage.</p>

Save the file after entering the code.

Running the HTML File

There are several ways to view an HTML document. For this course, you will mainly use a browser and a local development server.

Method 1: Open Directly

  • Find index.html in the file manager.
  • Open it with a web browser.
  • The browser reads the local file.
  • Useful for very simple documents.

Method 2: Live Server

  • Open the project in VS Code.
  • Start Live Server.
  • The project opens through a local address.
  • Changes can refresh automatically.

Method 1: Open Directly in a Browser

Find index.html
↓
Open File
↓
Browser Reads File
↓
Page Appears
Example Direct File Address
file:///C:/Projects/html-course/index.html

Method 2: Use Live Server

Open index.html
↓
Start Live Server
↓
Local Server Starts
↓
Browser Opens
↓
Save Changes
↓
Browser Refreshes

Depending on your VS Code setup, you can start Live Server from the editor context menu, command palette, or status-bar controls provided by the extension.

Typical Local Address
http://127.0.0.1:5500/
Recommended for Course Practice

Use a local development server during the course so that your workflow is closer to normal web development.

Development Workflow

Web development is an iterative process. You make a small change, save it, inspect the result, and continue improving the page.

Write Code
↓
Save File
↓
Browser Updates
↓
Inspect Result
↓
Fix Problems
↓
Repeat
Development Cycle
┌──────────────────┐
│    Write Code    │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│    Save File     │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  Browser Updates │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  Inspect Result  │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│ Improve or Fix   │
└────────┬─────────┘
         │
         └──────────────► Repeat

A Good Beginner Workflow

  • Open the complete project folder in VS Code.
  • Start your local development server.
  • Keep the browser open beside the editor.
  • Write a small amount of code.
  • Save the file.
  • Check the browser output.
  • Use developer tools when something looks wrong.
  • Fix one problem at a time.
  • Repeat the process.
Make Small Changes

Small changes are easier to test and debug than writing a large amount of code before checking the result.

Project Structure Example

A very small HTML project may contain only one file. As the project grows, related resources should be organized into folders.

Basic Project Structure
html-course/
│
├── index.html
│
├── images/
│
├── css/
│   └── style.css
│
└── js/
    └── script.js
ItemPurpose
index.htmlMain webpage
images/Images and graphics
css/Stylesheets
js/JavaScript files

A Larger Project Structure

Expanded Project Structure
website/
│
├── index.html
├── about.html
├── contact.html
│
├── css/
│   ├── style.css
│   └── responsive.css
│
├── js/
│   └── script.js
│
├── images/
│   ├── logo.png
│   └── banner.jpg
│
└── assets/
    └── icons/
Project Structure Can Vary

There is no single folder structure for every website. The best structure depends on the size, technologies, tools, and requirements of the project.

Naming Files and Folders

Avoid

  • My Web Page.html
  • Final File 2.html
  • IMAGE ONE.PNG
  • New Folder

Prefer

  • about.html
  • contact.html
  • hero-image.png
  • product-images
  • Use meaningful names.
  • Prefer lowercase names.
  • Use hyphens between words.
  • Avoid unnecessary spaces.
  • Keep naming consistent.
  • Use the correct file extension.

Real-World Applications

The tools may become more advanced, but professional web development still follows the same basic pattern of editing files, running an application or development server, testing the result, and repeating the process.

Company Websites

Developers create and test pages for businesses and organizations.

E-Commerce

Development environments are used to build product pages, carts, dashboards, and storefront interfaces.

Blogs

Editors and browsers are used to develop article layouts and publishing interfaces.

Web Applications

Developers build dashboards, management systems, and browser-based software.

Learning Platforms

Course pages, quizzes, progress systems, and interactive lessons are developed and tested locally.

Responsive Websites

Browser tools help developers test layouts across different screen sizes.

Browser Games

Editors, local servers, and browser debugging tools support game development.

Cloud Applications

Local development environments are used before applications are deployed online.

Advantages of Using VS Code

Free to Use

VS Code can be used without purchasing a commercial editor license.

Cross-Platform

Available for major desktop operating systems.

Fast Editing

Code completion and editor features improve development speed.

HTML Support

Provides built-in language features useful for HTML development.

Extension Ecosystem

Additional tools can be installed for different development workflows.

Integrated Terminal

Command-line tools can be used from inside the editor.

Git Integration

Source-control operations can be managed through the editor interface.

Customizable

Settings, shortcuts, themes, and extensions can be configured.

  • Write and edit HTML efficiently.
  • Manage complete project folders.
  • Search across project files.
  • Use extensions for additional features.
  • Access an integrated terminal.
  • Work with Git and source control.
  • Use keyboard shortcuts for common tasks.
  • Customize the editor for different workflows.

Common Beginner Mistakes

Saving Without the .html Extension

A file named index without the .html extension may not be recognized as an HTML document.

Accidentally Creating index.html.txt

Some operating systems hide known file extensions, causing beginners to accidentally create a text file instead of an HTML file.

Using a Word Processor

Word processors create formatted documents and are not appropriate tools for writing source code.

Opening Only One File Instead of the Project Folder

Opening the complete project folder provides better file navigation and extension behavior.

Forgetting to Save

The browser cannot display changes that have not been saved to the file.

Installing Random Extensions

Extensions can access development environments and should be reviewed before installation.

Creating Every File in One Folder

Larger projects become difficult to manage when images, styles, scripts, and documents are mixed together.

Using Spaces and Inconsistent Naming

Inconsistent filenames make projects harder to manage and references easier to break.

Assuming Live Server Publishes the Website

A local development server is for testing on your computer and does not automatically deploy the website publicly.

Ignoring Browser Developer Tools

Developer tools provide important information when a page does not look or behave as expected.

Common Filename Mistake
❌ Incorrect:

index
index.txt
index.html.txt


✅ Correct:

index.html

Poor Workflow

  • Create files anywhere.
  • Use unclear filenames.
  • Forget to save.
  • Refresh randomly.
  • Ignore browser errors.

Better Workflow

  • Use a dedicated project folder.
  • Use consistent filenames.
  • Save frequently.
  • Use a local development server.
  • Inspect problems with developer tools.

Best Practices

  • Use a dedicated code editor for web development.
  • Download development tools from official or trusted sources.
  • Open the complete project folder in the editor.
  • Keep each project in its own folder.
  • Use meaningful lowercase file and folder names.
  • Use hyphens between words when needed.
  • Use the correct file extensions.
  • Use index.html for the main page when appropriate.
  • Organize images, styles, and scripts into suitable folders.
  • Save files frequently.
  • Use a local development server during development.
  • Keep the browser open while coding.
  • Test small changes frequently.
  • Use browser developer tools when debugging.
  • Review extensions before installing them.
  • Avoid installing unnecessary extensions.
  • Keep your editor and browser updated.
  • Learn useful keyboard shortcuts gradually.
  • Do not depend completely on auto-completion.
  • Understand the code suggested by the editor.
Recommended Beginner Setup
Project Folder
      │
      ├── index.html
      │
      ├── css/
      │
      ├── js/
      │
      └── images/

Open Folder in VS Code
      │
      ▼
Start Local Server
      │
      ▼
Open Browser
      │
      ▼
Write → Save → Test → Repeat
Keep the Setup Simple

For your first HTML lessons, a code editor, browser, and local development server are enough. Advanced build tools are not required yet.

Frequently Asked Questions

Do I need to install HTML?

No. HTML is a markup language. You create HTML documents as text files and open them using a web browser.

Do I need a compiler for HTML?

No. HTML does not need to be compiled before a browser can process it.

Can I write HTML in Notepad?

Yes. Any plain-text editor can create HTML files, but a code editor provides a much better development experience.

Why should I use VS Code?

VS Code provides syntax highlighting, code completion, project management, extensions, terminal integration, and many other development features.

Is VS Code free?

Yes. Visual Studio Code is available without a paid editor license.

Is Visual Studio the same as Visual Studio Code?

No. They are different development products. Visual Studio Code is a lightweight source-code editor, while Visual Studio is a larger integrated development environment.

Which browser should I use?

Any modern browser can be used. Chrome, Edge, Firefox, and Safari are all important browsers for web development and testing.

Why do I need a browser?

The browser processes your HTML and displays the resulting webpage.

What are browser developer tools?

They are built-in browser tools used to inspect HTML, CSS, JavaScript, network requests, performance, storage, and other webpage information.

What is Live Server?

Live Server is a VS Code extension commonly used to serve project files locally and refresh the browser when files change.

Is Live Server required for HTML?

No. You can open simple HTML files directly in a browser, but a local development server provides a more convenient workflow.

Does Live Server upload my website to the Internet?

No. It is primarily used as a local development server on your computer.

What is localhost?

Localhost refers to the current computer when it communicates with services running on itself.

What does 127.0.0.1 mean?

127.0.0.1 is a loopback IP address commonly used to refer to the local computer.

Why is index.html commonly used?

Many web servers and hosting systems commonly use index.html as a default document for a directory.

Must every HTML file be named index.html?

No. Other pages can use names such as about.html, contact.html, products.html, or any appropriate valid filename.

Why should I open the entire folder in VS Code?

Opening the folder gives the editor a complete view of the project files and improves navigation and extension behavior.

Why are my browser changes not appearing?

The file may not be saved, the wrong file may be open, the browser may be displaying a different address, or caching and server issues may be involved.

What shortcut saves a file?

Ctrl + S is commonly used on Windows and Linux, while Cmd + S is commonly used on macOS.

Should I install many VS Code extensions?

No. Install only extensions that are useful for your workflow and review them before installation.

Can I use another code editor?

Yes. HTML can be written using many editors. This course uses VS Code because it is widely available and beginner-friendly.

Can I create HTML on Linux?

Yes. HTML development works on Windows, macOS, Linux, and many other systems.

Do I need Internet access to write HTML?

No. You can create and test basic HTML files locally without an Internet connection after the required tools are installed.

Why should files be organized into folders?

Organized projects are easier to navigate, maintain, debug, and expand.

What should I learn after completing the setup?

The next step is creating and understanding your first complete HTML page.

Key Takeaways

  • HTML itself does not need to be installed.
  • HTML does not require a compiler.
  • A code editor is used to create and manage HTML files.
  • A browser is used to process and display webpages.
  • Visual Studio Code is a popular editor for web development.
  • VS Code provides syntax highlighting and code completion.
  • Extensions can add additional editor functionality.
  • Browser developer tools help inspect and debug webpages.
  • A local development server improves the testing workflow.
  • Live Server can automatically refresh the browser after changes.
  • A project should be stored inside its own folder.
  • The complete project folder should be opened in the editor.
  • HTML files use the .html extension.
  • index.html is commonly used as a default webpage filename.
  • Opening a file directly and serving it locally are different workflows.
  • A local server does not automatically publish a website online.
  • Project files should use meaningful and consistent names.
  • Larger projects should organize resources into folders.
  • Saving and testing frequently makes debugging easier.
  • The basic development cycle is write, save, test, inspect, and repeat.

Summary

Setting up a development environment is the first practical step toward creating webpages.

HTML does not require a compiler or a special runtime. At the simplest level, you only need a plain-text editor and a web browser.

A professional code editor makes development easier by providing syntax highlighting, code completion, file management, search, extensions, terminal integration, and other useful tools.

Visual Studio Code is used throughout this course as the primary editor. A modern web browser is used to display and test the webpages you create.

A local development server improves the workflow by serving project files through a local web address and refreshing the browser when files change.

Your first project begins with a dedicated folder and an index.html file. As projects grow, images, stylesheets, scripts, and other resources can be organized into separate directories.

Your basic development workflow is now ready: open the project folder, write code, save the file, view the result in the browser, inspect problems, and repeat.

With the environment prepared, you are ready to create and understand your first complete HTML page.

Next Lesson →

First HTML Page