Your First Web Page

📚 Lesson 3 of 25  •  ⏱ 10 min read  •  Beginner

Let's Build Something Real

In this lesson you will create a complete web page from scratch. By the end, you will have a working HTML file you can open in any browser.

Step 1 — Create the File

  1. Open VS Code (or any text editor)
  2. Create a new file: File → New File
  3. Save it as index.html — the .html extension is important
  4. Save it in a folder called my-website on your Desktop

Step 2 — The Full Page Code

Copy this complete HTML into your file:

HTML 
<!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>About Me</h1>

  <p>Hello! My name is <strong>Mohan</strong>. I am learning
  web development at Anna University.</p>

  <h2>My Interests</h2>
  <ul>
    <li>Web Development</li>
    <li>Programming</li>
    <li>Cricket</li>
  </ul>

  <h2>Contact</h2>
  <p>Email: <a href="mailto:mohan@example.com">mohan@example.com</a></p>

</body>
</html>

Step 3 — Open in Browser

Right-click the file in your file explorer and choose "Open with" → your browser (Chrome, Firefox, Edge). You will see a plain white page with your content — that is a real web page!

Step 4 — Use VS Code Shortcuts

In VS Code, type ! and press Tab — it auto-generates the full HTML boilerplate for you. This works with the Emmet feature built into VS Code.

VS Code shortcut 
Type:  !
Press: Tab
Gets you the full <!DOCTYPE html> ... </html> skeleton instantly.

Understanding the Output

Your page looks unstyled right now — black text on white background. That is completely normal. HTML only defines structure. In the CSS course, you will make it look great. For now, focus on understanding how the tags create the structure.

← Text Editors & Setup Next: HTML Elements →