Beginner friendly

Hello World in HTML

~7 min read VS Code setup HTML basics

←Previous Your First HTML Program Next Understanding HTML Document Structure →

Chapter 08 • HTML Setup

Installing VS Code for HTML

Visual Studio Code is a lightweight code editor that makes writing HTML, CSS and JavaScript easier. In this lesson, you will install VS Code, create your first HTML file and get ready to build webpages.

💡 Why use VS Code for HTML?

You can write HTML in a simple text editor, but VS Code gives you useful features such as syntax highlighting, code completion, formatting, file navigation and extensions.

Download VS Code

Open the official Visual Studio Code website and download the version for your operating system.

Install it

Run the installer and follow the setup steps. The default options are suitable for most beginners.

Create a project folder

Create a folder such as my-html-project. This folder will contain your webpage files.

Open the folder in VS Code

In VS Code, choose File → Open Folder and select your project folder.

📄 Create your first HTML file

In the Explorer panel, create a new file named index.html. Then add the following basic HTML structure.

index.html — Your first HTML 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 Web Page</title>
</head>
<body>

  <h1>Hello, HTML!</h1>
  <p>I created my first webpage.</p>

</body>
</html>

🔎 Understand the important parts

Code	Purpose
`<!DOCTYPE html>`	Declares the document as an HTML document.
`<html>`	The root element containing the complete page.
`<head>`	Contains page information and resources.
`<title>`	Sets the title associated with the browser tab.
`<body>`	Contains the content displayed on the webpage.
`<h1>`	Creates the main heading.
`<p>`	Creates a paragraph.

⚡ Useful VS Code extensions

RECOMMENDED

Live Server

Launches a local development server and makes browser testing convenient while you work.

OPTIONAL

Prettier

Formats HTML, CSS and JavaScript so your code stays clean and consistent.

BUILT-IN

HTML IntelliSense

VS Code provides HTML suggestions and completion support out of the box.

OPTIONAL

Auto Rename Tag

Helps keep matching HTML opening and closing tags synchronized when you rename an element.

▶️ Open your HTML page

After creating index.html, you can open it in a browser. If you installed Live Server, right-click the file and choose Open with Live Server.

VS Code is installed.
Your project folder is open in VS Code.
Your file is named index.html.
Your HTML structure is complete.
The page opens successfully in your browser.

🧪 Practice task

Create a simple personal webpage with your name, a short introduction, your skills and one link. Save it as index.html and open it in your browser.

my-html-project/ ├── index.html ├── images/ └── css/ └── style.css

⚠️ Common beginner mistakes

Creating the file as index.html.txt instead of index.html.
Forgetting to save the file before checking the browser.
Opening the wrong project folder in VS Code.
Installing many extensions before learning the HTML basics.
Changing the HTML structure without understanding what each element does.

⚡ Quick Summary

Install VS Code and open your HTML project folder.
Create an index.html file.
Use the standard HTML document structure.
Live Server can make browser testing easier.
Learn HTML fundamentals before adding lots of extensions.

←

PreviousYour First HTML Program

HTML Tutorial

NextUnderstanding HTML Document Structure →