HTML Basics for Beginners: Your First Webpage (HTML Tutorial #1)

Learning to code can feel scary at first — but don’t worry, HTML is one of the easiest languages to start with. It’s like building with Lego blocks 🧱: each piece has a purpose, and when you stack them together, you create a webpage.

This guide is part of our HTML Basics for Beginners series. We’ll take it slow, with clear examples and a fun mini project at the end.

In this tutorial, you’ll:
✅ Write your first HTML file.
✅ Understand the structure of a webpage.
✅ Learn headings, paragraphs, links, and images.
✅ Build a cool mini project: an “About Me” webpage.

Let’s get started! 🚀

Step 1: Setting Up

To follow along with this HTML basics tutorial, all you need is:

A text editor (Notepad, VS Code, Sublime — anything works).
A browser (Chrome, Firefox, Safari).

That’s it! No complicated installations. Just type → save → open in browser.

👉 Practice: Create a folder called html-tutorials where you’ll save all your files.

Step 2: Create Your First HTML Page

Open your editor, make a new file, and save it as index.html.
Now paste this code:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my very first HTML page.</p>
  </body>
</html>

👉 Double-click the file — your browser will open and show “Hello, World!” 🎉

Live Demo

👉 CodePen Demo: First Webpage

How it Works

Let’s break it down (this is the heart of HTML Basics for Beginners):

<!DOCTYPE html> → tells the browser this is HTML5.
<html> → the root; everything lives inside here.
<head> → meta info (like the page title).
<title> → what shows in the browser tab.
<body> → all the visible stuff goes here.
<h1> → the biggest heading.
<p> → a paragraph of text.

👉 Practice: Change the <h1> text to your name and refresh the browser.

Step 3: Add More Content

Headings and paragraphs make your webpage readable. Try this:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph of text.</p>
<p>Here’s another paragraph for practice.</p>

👉 Notice how <h1> is bigger than <h2>. Try using <h3> through <h6> to see how the size changes.

Step 4: Add Links and Images

Web pages shine when you add links and pictures.

<a href="https://codeboid.com">Visit Codeboid</a>

<img src="https://res.cloudinary.com/du6k9jj1m/image/upload/v1757710191/Codeboid_Logo_with_bg_ntshnf.png" alt="Codeboid Image">

<a> → creates a link. href is the URL.
<img> → adds an image. src is the file location, alt is the description (important for accessibility!).

👉 Practice: Replace the image src with your favorite photo URL.

Step 5: Mini Project — “About Me” Webpage

Time to build something fun! Using what you learned, create a personal profile page.

Here’s a starter code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About Me</title>
</head>

<body>
    <h1>Hi, I'm Ellen Ripley!</h1>
    <p>Welcome to my first webpage. I'm learning HTML 🎉</p>

    <h2>My Hobbies</h2>
    <p>I love coding, reading books, and playing football.</p>

    <h2>Find Me Online</h2>
    <a href="https://github.com/">My GitHub</a>

    <h2>My Photo</h2>
    <img src="https://res.cloudinary.com/du6k9jj1m/image/upload/v1757705789/Ellen_Ripley_olo3iu.jpg"
        alt="My profile photo">
</body>

</html>

👉 Save it as about.html and open it in your browser. Congrats — you built your first mini project! 🚀

Live Demo

👉 CodePen Demo: About Me Project

Get the Source Code

You can find the complete code for this tutorial on GitHub:
👉 Codeboid/html-series

Wrap-Up

In this HTML basics tutorial for beginners, you learned:

The structure of an HTML page.
Headings & paragraphs.
Links & images.
How to build a simple About Me webpage.

Next up → HTML Tutorial #2: Lists and Tables. Perfect for organizing content like hobbies, schedules, or favorite foods.

Stay tuned, and keep practicing! 🌱