Back to roadmaps html Course
Table of Contents (31 guides)

Writing Your Very First HTML Page

Now that your workspace is configured, it is time to write some code. In this guide, you will create a new HTML file from scratch and launch it inside your web browser.

1. Create a Project Folder

Before writing code, establish a clean directory to store your files:

  1. Create a folder on your computer named my-first-website.
  2. Open VS Code, go to File > Open Folder..., and select the my-first-website directory.

2. Create Your HTML File

  1. In VS Code's explorer sidebar, click the New File icon.
  2. Name the file exactly index.html. (Note: The home page of any website must always be named index.html because web servers look for this file by default.)

3. Write the Code

Type the following code into your index.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, World!</h1>
    <p>Welcome to my very first web page built using HTML.</p>
</body>
</html>

Save the file using Ctrl + S (Windows) or Cmd + S (macOS).

4. Run it in the Browser

There are two ways to open this file:

Method A: Using Live Server (Recommended)

If you installed the Live Server extension:

  1. Right-click anywhere inside the code editor.
  2. Select "Open with Live Server".
  3. A new browser window will open automatically at http://127.0.0.1:5500/index.html.
  4. Try changing the text inside <h1> to "Hello, Universe!" and saving. The browser will update instantly without refreshing!

Method B: Directly opening the file

  1. Locate your index.html file inside your file manager.
  2. Double-click the file. It will open in your default browser. (Note: The URL in the address bar will start with file:///, meaning it is reading directly from your disk rather than a server.)

5. Summary of Key Elements

What did we just write?

  • <!DOCTYPE html>: Tells the browser this is a modern HTML5 document.
  • <html>: The root container for the entire page.
  • <head>: Holds invisible metadata (page title, encoding standard).
  • <body>: Contains everything visible to the user (headings, text, images).

In the next chapter, we will break down HTML syntax rules and dive deeper into this default skeleton structure.

Published on Last updated:
Previous Guide Choosing Your Code Editor & Setting Up VS Code Next Guide HTML Syntax & Document Structure