Build Your First HTML Page

Build a personal profile webpage using core HTML elements from scratch.

Introduction

30 Second Summary

Every website you visit is built from the same foundation. Whether it's a social media profile or an online shop, the structure underneath is HTML.

In this project, you will build a personal profile webpage from scratch using HTML. You will learn the core elements that give every page on the internet its structure.

What You'll Build

When you open your finished page in the browser, you see a complete profile about yourself with structured headings, paragraphs, images, and links that actually work.

By the end of this project, you'll have:

Your name displayed as a bold heading at the top, with paragraphs introducing who you are.
An organized bullet list of your hobbies and clickable links that open other websites in new tabs.
An image pulled from the internet and displayed directly on your page.
Secret Mission: A structured table displaying your skills and experience levels in rows and columns.

Are there any prerequisites?

You just need VS Code installed on your computer and a web browser. No prior HTML or web development experience is required.

Before We Start

Before we dive in, let's lock in what you're about to build and why it matters to you.

Set Up Your Workspace

Every coding project starts with two things: a place to put your files, and a way to see what you're building.

In this step, you'll create your project folder and install a VS Code extension that automatically refreshes your browser every time you save your code. This tight feedback loop means you see changes instantly without lifting a finger.

In this step, get ready to:

Create a project folder on your desktop and open it in VS Code.
Install the Live Server extension for instant browser preview.
Start Live Server and confirm your browser opens automatically.

Create your project folder

Your project needs its own folder so VS Code can track all your files in one place.

Right-click on an empty area of your Windows desktop.
Select New, then click Folder.
Name the folder my-profile and press Enter.

You should see the new my-profile folder appear on your desktop.

In VS Code, click File in the top menu bar.
Click Open Folder.
Navigate to your Desktop, select the my-profile folder, then click Select Folder.

VS Code reloads with my-profile as your workspace. You should see the folder name in the Explorer sidebar on the left.

Don't see the folder name in the sidebar?

Make sure the Explorer panel is open by pressing Ctrl+Shift+E. If VS Code asked whether you trust the authors of this folder, click Yes, I trust the authors.

Help me fix this

Install the Live Server extension

Live Server is a VS Code extension that launches a local web server and refreshes your browser automatically every time you save a file. Without it, you would need to manually refresh the browser after every change.

Press Ctrl+Shift+X to open the Extensions panel.
Type Live Server in the search box at the top.
Find the result by Ritwick Dey (it has millions of downloads).
Click the Install button.

Once the install finishes, look at the very bottom of the VS Code window (the status bar). You should see a Go Live button appear in the bottom-right area.

Don't see the Go Live button?

The button only appears when you have a folder open as your workspace. If you skipped opening the my-profile folder, go back to File then Open Folder and select it.

If you still don't see it, try closing and reopening VS Code.

Help me find the Go Live button

Start Live Server and verify your setup

Everything is in place. Time to start Live Server and confirm it works end to end.

Before you click anything, think: what do you expect to see in the browser when there are no files in the folder yet?
Click the Go Live button in the bottom-right of the status bar.

Your default browser opens automatically. Since there are no files in the folder yet, you see a directory listing page at http://127.0.0.1:5500.

What is that address?

127.0.0.1 means "this computer." Live Server runs a tiny web server right on your machine. The 5500 is the port number it uses.

When you add HTML files later, Live Server will serve them to the browser and refresh the page every time you hit save.

Browser didn't open?

Check that the status bar now shows a port number (like Port: 5500) instead of the Go Live button. If it does, Live Server is running. Open your browser manually and go to http://127.0.0.1:5500.

If the status bar still shows Go Live, the server did not start. Try right-clicking my-profile in the Explorer sidebar and selecting Open with Live Server.

Help me troubleshoot Live Server

Your workspace is ready. Next up, you'll create your first HTML file and see real content appear in the browser.

Create Your First HTML Page

Your workspace is ready. VS Code is open, and Live Server is waiting to display anything you create. Now it's time to write your very first webpage.

Every webpage needs a specific structure that tells the browser "this is an HTML document." Without it, the browser guesses how to display your content. It often guesses wrong.

In this step, get ready to:

Create an index.html file with the standard HTML5 document structure.
Confirm live-reload updates your page instantly when you save.

Create the HTML file

Right now your browser shows a directory listing because the my-profile folder is empty. You need to create an HTML file with the correct document structure so the browser knows what to display.

In VS Code, click File in the top menu bar.
Click New File.
A text input appears at the top of the Explorer panel asking for a file name.
Type index.html and press Enter.

The file opens in the editor with a blank canvas. Type the following HTML structure into index.html:

<!doctype html>
<html lang="en">
  <head>
    <!-- Metadata: invisible to visitors -->
    <meta charset="utf-8" />
    <title>My Profile</title>
  </head>
  <body>
    <!-- Everything visible on the page goes here -->
    <p>Hello, world!</p>
  </body>
</html>

What does this code do?

<!doctype html> tells the browser this is an HTML5 document. Without it, the browser falls back to older rendering modes.
<html lang="en"> wraps the entire page. The lang attribute declares the page language.
<head> holds invisible metadata like the character set and the page title that shows in the browser tab.
<body> contains everything visible on the page. Your <p> paragraph lives here.
Every opening tag like <p> needs a matching closing tag </p>. The browser uses these pairs to know where each element starts and ends.

Before you save, what do you think will appear in the browser?

Save the file by pressing Ctrl+S.
Switch to your browser. Live Server detects the new file and auto-refreshes the page.

You should see "Hello, world!" displayed on the page. The browser tab title now reads "My Profile" instead of the directory listing.

Still seeing the directory listing?

Make sure you saved the file with the exact name index.html (all lowercase). Live Server looks for this filename by default.
Confirm the file is inside the my-profile folder, not a subfolder or your Desktop.
Try stopping Live Server (click Port: 5500 in the status bar) and clicking Go Live again.

Still stuck? Help me figure out why Live Server isn't showing my index.html page.

Experiment with live-reload

You just saw your first HTML page render in the browser. Now confirm the live-reload loop works. This is the loop you will use for the rest of the project: edit code, save, see the result instantly.

In index.html, find this line inside the <body>:

<p>Hello, world!</p>

Replace Hello, world! with your own name, so the line looks like this:

<p>Your Name Here</p>

Save the file with Ctrl+S.
Switch to your browser. Your name now appears on the page instead of "Hello, world!"

This is your development loop: write code, save, see the result. Every edit you make from here on will follow this same cycle.

✔️ Awesome, I've got everything!

Great. Double check you have saved index.html and your browser is showing your page.

ⓧ I'd like to double check the full code

Here is the full index.html file for reference. Your <p> line will have your name instead of "Hello, world!" and that is expected.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Profile</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Your first HTML page is live and live-reload is working. Next up, you will add real profile content: headings, paragraphs, and discover why plain text alone is not enough.

Add Your Profile Content

Your HTML page is live in the browser and you can see text appear on the page. Now it's time to fill it with real profile content like your name, a title, and a short bio.

Your page currently shows a single line of text. Real pages have headings, multiple paragraphs, and clear visual structure. In this step, you'll discover why HTML elements are essential for structuring content on a page.

In this step, get ready to:

Discover why plain text loses its formatting in HTML.
Use heading and paragraph elements to structure your content.
Build your personal profile with your name, title, and bio.

Experience the problem with plain text

Right now your page shows "Hello, world!" wrapped in a <p> tag. What happens if you just type several lines of text without any tags?

In VS Code, open index.html and find this line inside the <body>:

    <p>Hello, world!</p>

Delete that entire line and replace it with the following plain text (no tags):

Ahmad
Web Developer
I am learning HTML for the first time.
I already know some Java programming.

Before you save, what do you think the browser will show? Four separate lines, one below the other?

Save the file by pressing Ctrl+S.

Look at your browser. All four lines appear smashed together on ONE line, like this: "Ahmad Web Developer I am learning HTML for the first time. I already know some Java programming."

Why did everything end up on one line?

HTML ignores the line breaks you type in your code. It treats all whitespace (spaces, tabs, new lines) as a single space.

This is exactly why HTML elements exist. Without tags like <h1> and <p>, the browser has no way to know which text is a heading, which is a paragraph, and where one section ends and another begins.

Fix it with proper HTML elements

The solution is to wrap each piece of content in an HTML element that tells the browser what it is.

Select all the plain text you just typed inside the <body> and replace it with the following structured HTML:

    <h1>Ahmad</h1>
    <h2>Web Developer</h2>
    <p>I am learning HTML for the first time.</p>
    <p>I already know some Java programming.</p>

What does this code do?

Each element gives the browser a specific instruction:

<h1> creates the largest heading on the page. Use it for the main title (your name).
<h2> creates a smaller subheading. Use it for secondary titles (your role or title).
<p> creates a paragraph. Each <p> starts on its own line with space above and below it.

What do you expect to see now that each piece of content has its own element?

Save index.html with Ctrl+S.

Your browser automatically refreshes. You should see a large bold heading with the name, a slightly smaller subheading below it, and two separate paragraphs of text, each on its own line.

Still seeing everything on one line?

Make sure you deleted the plain text from the previous substep. Your <body> should only contain the four HTML elements above.
Check that every opening tag has a matching closing tag. For example, <h1>Ahmad</h1> needs both the <h1> and </h1>.
Confirm you saved the file (look for a dot on the tab name in VS Code, which means unsaved changes).

Help me fix my HTML structure so my headings and paragraphs display correctly.

Personalise your profile content

Change "Ahmad" inside the <h1> to your own name.
Change "Web Developer" inside the <h2> to a title that describes you.
Update the text inside each <p> to say something about yourself.
Save the file and confirm your browser shows your personalised content.

Add a third paragraph

Want to say more about yourself? Add another <p>Your text here</p> line after the existing paragraphs. Each paragraph needs its own opening <p> and closing </p> tag.

✔️ Awesome, I've got everything!

Great. Make sure you have saved index.html and your browser shows your name as a heading, a subheading, and at least two paragraphs.

ⓧ I'd like to double check the full code

Here is what your complete index.html should look like at this point (with the example content):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Profile</title>
  </head>
  <body>
    <h1>Ahmad</h1>
    <h2>Web Developer</h2>
    <p>I am learning HTML for the first time.</p>
    <p>I already know some Java programming.</p>
  </body>
</html>

Your profile page now has real structure. Next up, you'll add a list of your hobbies and an image to make the page more interesting.

Add a List and an Image

Your profile page now has proper structure with headings and paragraphs that display on their own lines.

Text alone only tells part of your story. In this step, you will add a bullet list to organize your hobbies and an image to make your page visually interesting.

In this step, get ready to:

Add a bullet list of your hobbies or skills.
Display an image on your page.

Add an unordered list

Lists are one of the most common HTML elements. Any time you see bullet points on a website, there is a list element behind them.

In index.html, find the second <p> paragraph (the one that says I already know some Java programming.).
Add the following code after that closing </p> tag:

<h2>My Hobbies</h2>
<ul>
  <li>Programming</li>
  <li>Reading</li>
  <li>Gaming</li>
</ul>

What does this code do?

<h2>My Hobbies</h2> adds a section heading above your list.
<ul> creates an unordered list (a list with bullet points instead of numbers).
Each <li> is one list item. You can change these to your own hobbies or skills.

Save index.html by pressing Ctrl+S.
Check your browser. You should see a bullet list with three items below your paragraphs.

Don't see bullet points?

Make sure you placed the code after the closing </p> tag of your second paragraph, not inside it.
Check that every <li> has a matching </li> closing tag.
Make sure your list items are inside the <ul>...</ul> wrapper. Without it, the browser does not know to display bullets.

Help me figure out why my bullet list isn't showing up.

Add an image

Images use the <img> element. Unlike other elements you have used so far, <img> has no closing tag because it is a void element.

In index.html, add the following code after the closing </ul> tag of your hobbies list:

<h2>My Photo</h2>
<img src="https://picsum.photos/300/200" alt="My profile photo" />

What does this code do?

The src attribute tells the browser where to find the image. Here it points to a placeholder service that generates a random photo.
The alt attribute describes the image for screen readers. It also displays as text if the image fails to load.
The /> at the end is how void elements close themselves. There is no separate closing tag.

Before you save, what do you expect to see below your bullet list in the browser?

Save index.html by pressing Ctrl+S.
Check your browser. You should see a "My Hobbies" heading with a bullet list of three items, followed by a "My Photo" heading with an image displayed below it.

Image not showing?

Make sure the src URL starts with https://. The browser cannot load images from incomplete URLs.
Check that you have the self-closing /> at the end of the <img> tag.
If you see the alt text instead of an image, your internet connection may be blocking the placeholder service. Try refreshing the page.

Help me figure out why my image is not displaying.

✔️ Awesome, I've got everything!

Great. Double check you have saved your file, then move on to the next step.

ⓧ I'd like to double check the full code

Here is the complete index.html file at this point. Compare yours against it:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Profile</title>
  </head>
  <body>
    <h1>Ahmad</h1>
    <h2>Web Developer</h2>
    <p>I am learning HTML for the first time.</p>
    <p>I already know some Java programming.</p>

    <h2>My Hobbies</h2>
    <ul>
      <li>Programming</li>
      <li>Reading</li>
      <li>Gaming</li>
    </ul>

    <h2>My Photo</h2>
    <img src="https://picsum.photos/300/200" alt="My profile photo" />
  </body>
</html>

Your page is coming together. You have structured text, a list, and an image. Next up, you will add clickable links that connect your page to the rest of the web.

Add Links and Finish Your Page

Your page has headings, paragraphs, a list, and an image. It looks like a real profile. But right now it is an island. There is no way for someone viewing your page to navigate anywhere else.

Links are what make the web a "web." They connect pages to each other. In this step, you'll add clickable links that open other websites in new tabs and a footer that marks the bottom of your page.

In this step, get ready to:

Add hyperlinks that open other websites in a new tab.
Add a footer with a horizontal rule to complete your page.

Add links to other websites

The <a> element (short for "anchor") creates a clickable link. It uses attributes to know where to send the user when they click.

In VS Code, open index.html.
Find the closing </body> tag at the bottom of your file.
Add the following code above </body>, after the <img> line:

<h2>My Links</h2>
<ul>
  <li><a href="https://github.com" target="_blank">My GitHub</a></li>
  <li><a href="https://youtube.com" target="_blank">YouTube</a></li>
  <li><a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a></li>
</ul>

What does this code do?

<a href="..."> creates a clickable link. The href attribute holds the destination URL the browser navigates to when the learner clicks.
target="_blank" tells the browser to open the link in a new tab instead of replacing your current page.
The text between <a> and </a> is what the user sees and clicks. It appears as blue underlined text by default.

Save index.html by pressing Ctrl+S.
Check your browser. You should see three blue, underlined links listed under a "My Links" heading.
Click one of the links. It should open the target website in a new browser tab.

Links not appearing or not clickable?

Make sure each <a> tag has both an opening and closing tag. The closing tag is </a>.
Check that href starts with https://. Without it, the browser looks for a file on your computer instead of a website.
Confirm you saved the file. Unsaved changes won't appear in the browser.

Still stuck? Why aren't my HTML links working?

Add a footer to complete your page

A footer marks the bottom of your page. It gives the reader a clear signal that the content has ended.

In index.html, find the closing </ul> tag you just added (the one after your links).
Add the following code directly below it, still above </body>:

<hr />
<p>Built by Ahmad - 2025</p>

What does this code do?

<hr /> creates a horizontal line across the page. It visually separates the footer from the rest of your content.
Like <img>, <hr /> is a void element with no closing tag because it doesn't wrap any content.

Save index.html by pressing Ctrl+S.

Before you look at the browser, think about what you expect to see at the bottom of your page. What will the horizontal rule look like?

Check your browser now. You should see a thin horizontal line stretching across the page, with "Built by Ahmad - 2025" below it.

Don't see the horizontal line?

Make sure <hr /> is placed between the closing </ul> of your links and the </body> tag.
Check for typos. The tag is <hr /> with no content inside.

Why isn't my footer showing up?

Review your complete page

You now have every element in place. Take a moment to scroll through your page from top to bottom.

Scroll to the top of your browser page.
Confirm you see all of these in order: a large heading with your name, a subheading, two paragraphs, a bullet list of hobbies, an image, a list of links, a horizontal line, and footer text.
Click one of your links to confirm it opens in a new tab.
Hover over a link and notice it changes color. This is default browser styling for the <a> element.

This is a complete HTML page. You built every line from scratch.

✔️ Awesome, I've got everything!

Great. Double check you've saved index.html one final time.

ⓧ I'd like to double check the full code

Scroll through your index.html and confirm each section is present, in this order:

<!doctype html> preamble, <html lang="en"> wrapper, <head> with charset and title.
<body> containing your <h1> name, <h2> subtitle, and two <p> paragraphs.
A "My Hobbies" section with a <ul> containing three <li> items.
A "My Photo" section with an <img> tag.
A "My Links" section with a <ul> containing three <li> items, each wrapping an <a> link.
An <hr /> followed by a <p> footer line.
Closing </body> and </html> tags at the very end.

Your personal profile page is complete. Next up, you'll tackle a secret mission that levels up your HTML skills with a brand new element.

Secret mission

Add a Skills Table

You have mastered headings, paragraphs, lists, images, and links. Tables are the next level of HTML complexity. They require multiple nested elements working together to display structured data in rows and columns.

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

This project runs entirely locally, so there are no ongoing costs.

Resources you used:

The my-profile folder on your Desktop containing index.html.
The Live Server extension installed in VS Code.
The Live Server process currently running in the background.

Keep everything running

No action needed. Choose this if you are still actively building or want to keep experimenting with your HTML page.

Your my-profile folder stays on your Desktop.
Live Server stays installed and ready to use on any future HTML project.
The Live Server process keeps running until you close VS Code or click the port number in the status bar to stop it.

Pause - I'll come back to this later

Shut down the running process to free up the port, but keep your files and extension for later.

In VS Code, click the port number (Port: 5500) in the bottom status bar to stop Live Server.
Your my-profile folder and index.html file remain on your Desktop for next time.
To resume later, open the my-profile folder in VS Code and click Go Live again.

Delete - I don't want to use this again

Remove all project files and the extension to start completely fresh.

Stop Live Server by clicking the port number in the VS Code status bar.
Close the my-profile folder in VS Code by going to File > Close Folder.
Delete the project folder. On macOS/Linux, run:

rm -rf ~/Desktop/my-profile

On Windows, run:

rmdir /s /q %USERPROFILE%\Desktop\my-profile

Uninstall the Live Server extension by pressing Ctrl+Shift+X to open Extensions, finding Live Server by Ritwick Dey, clicking the gear icon next to it, and selecting Uninstall.

Nice Work!

You just built a personal profile webpage entirely from scratch using HTML. Every heading, paragraph, list, image, and link on that page exists because you wrote it, element by element.

You've learned how to:

Build a complete HTML page from scratch with proper document structure (<!doctype html>, <html>, <head>, <body>).
Structure content using the most common HTML elements: headings, paragraphs, lists, images, and hyperlinks that open in new tabs.
Set up a live-reload development workflow with Live Server that updates your page instantly every time you save.
Secret Mission: Built a data table with header rows and data cells to display structured skill information.

Ready to quiz yourself?