HTML Made Simple: 5 Steps to Create and Preview Code in VS Code

How I Write HTML Code in VS Code – Complete Beginner’s Guide

Learning how to write code in Visual Studio Code (VS Code) is one of the best ways to start your web development journey. HTML, short for HyperText Markup Language, is the foundation of every website. It defines the structure of web pages and tells browsers how to display text, images, and links. VS Code is a free and lightweight editor that makes writing and managing your projects simple and efficient.

In this step-by-step guide, I’ll explain how I create and edit pages in VS Code — from installation to previewing your first web page in the browser.

Table of Contents

What Is HTML?

HTML is a markup language used to describe the content and layout of a webpage. It uses elements called tags to define headings, paragraphs, and images. Every website you visit is structured using this language, which makes it an essential skill for anyone learning web development.

A typical web page includes tags like <html>, <head>, <title>, and <body>. The <head> holds information such as the page title and meta data, while the <body> displays visible content to users.

Why Use VS Code?

VS Code is one of the most popular editors for web developers. It offers a clean interface and powerful features that make coding easier, such as:

Syntax highlighting for better readability
Auto-completion for tags and attributes
Live Server to preview pages in real time
Customizable themes and extensions

These tools make web development much faster and more enjoyable compared to basic text editors.

Step 1: Install Visual Studio Code

Visit https://code.visualstudio.com/
Download the editor for Windows, macOS, or Linux
Install and open it on your computer

Once installed, you’ll be ready to start coding your first web page.

Step 2: Create a New File

In VS Code, click File → New File
Save it as index.html
The editor will recognize it as an HTML file automatically

You can now begin typing your web page structure.

Step 3: Write Your First Page

Here’s a simple example you can try:

<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This is my first file created in VS Code.</p>
</body>
</html>

VS Code helps by suggesting tags and adding indentation automatically, making your code clean and easy to read.

Step 4: Preview the Page with Live Server

Seeing your page instantly in a browser helps you understand how your code works.

Click the Extensions icon in VS Code
Search for Live Server and install it
Right-click your file and choose Open with Live Server

Your default browser will open and display your web page. Each time you save, it refreshes automatically to show updates.

Step 5: Save and Test

After writing your page, press Ctrl + S (Windows) or Cmd + S (Mac) to save. Test your page layout, links, and structure. You can also duplicate files or create new ones for practice.

Extra Tips for Better Coding in VS Code

Use Emmet shortcuts — typing ! and pressing Enter creates a full boilerplate instantly.
Install extensions like Auto Rename Tag or HTML CSS Support to speed up work.
Keep your code neat with proper indentation and comments.
Customize themes for a more comfortable workspace.

Conclusion

Now you know how to create and preview a web page using VS Code. Whether you’re just beginning or improving your workflow, this editor provides all the tools needed to write clean and organized code.

Start today — open VS Code, make a new file, and begin exploring how simple and exciting web development can be.

Focus Keyword: HTML
SEO Meta Description: Learn how to write HTML code in VS Code step by step. This beginner-friendly tutorial explains how to create, edit, and preview your first web page using Visual Studio Code.
Slug: how-to-write-html-code-in-vs-code