HTML Tutorial

INTRODUCTION

Edit Template

HTML Tutorial

INTRODUCTION

Edit Template

HTML Execution

Your Journey to Creating Your First Website Begins Now!  

This is a milestone moment – the first step in your web development journey.

Let’s celebrate it by building the classic “Hello, World!” webpage, just like every

Programmer does when learn a new language.

Why “Hello, World!”?

You might wonder – why always “Hello, World!”?

In programming, it’s tradition to begin with a simple program that display these two

Words. It’s a universal signal that your setup is ready and working! It’s not just text –

it’s your first step into real coding.

 

And with HTML, it’s no different. Let’s build your very first webpage.

 

Setting Up Visual Studio Code (VS Code)

Before we dive into writing code, make sure your environment is ready.

If you haven’t installed VS Code or Live Server yet, go back to the [HTML

Installation] tutorial and follow those steps first.

 

Once ready, open Visual Studio Code:

 

Click on “Open Folder” and create or choose a folder to store your HTML files

(Example: html – tutorial folder on your desktop)

Creating Your First HTML File

Let’s create a file to write your HTML code:

  1. Inside your folder in VS Code, click on “New File” (icon or right – click).
  2. Name your file: index.html
    •   index.html is a conventional name for the main page of a website.
  1. Hit Enter – your blank file is now ready.
Create new file

Writing Your First HTML Code

Code and paste the following code into index.html:

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World Page</title>
</head>
<body>
    Hello, World!
</body>
</html>

Going Live with Live Server

Let’s see your page in the browser in real – time!

  1. Look for the “Go Live” button in the bottom – right corner of VS Code.
  2. Click Go Live – this launches a local server and opens your file in your default browser.
  1. You’ll see your first webpage displaying:

Congratulations! You’ve built your first HTML page!

Troubleshooting:

If you don’t see the “Go Live” button, make sure the Live Server extension is installed. Go to the Extensions tab and search for “Live Server” by Ritwick Dey, then install it.

HTML Preview Extension

Want to preview your HTML without even switching to a browser?

Install the ‘HTML Preview’ Extension:

  1. Open the Extensions Panel in VS Code
  2. Search for HTML Preview
  3. Install it

Now:

  • Open your index.html file
  • Click on the new “Preview” button or use the command palette (Ctrl + Shift + P)

You’ll see your HTML rendered directly within the editor!

You don’t even need a browser to render plain HTML. This live preview feature in VS Code is perfect for this HTML tutorial, allowing you to build and preview your entire HTML website without ever leaving the editor.

Previous: HTML Installation
Next: HTML Page Structure
Scroll to Top