🎉 Congratulations! You’ve made it to Day 7 of the 7 Days HTML Tutorial.
Over the last 6 days, you’ve learned all the building blocks of HTML — now it’s time to bring everything together and build your first complete HTML web page.
Today, you’ll:
- Use everything you’ve learned — headings, paragraphs, links, images, forms, and semantic layout
- Create a personal web page about yourself (or anything you love!)
- Understand how a real web page is structured
Let’s go from learning to doing 🚀
Table of Contents
What You’ll Build: “My Personal Web Page”
Your page will include:
- A header with your name and navigation
- An about me section
- A section for your interests or hobbies
- An image
- A contact form
- A footer
This is a great way to practice and also a solid foundation if you want to build a personal portfolio later.
Full HTML Example – Personal Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Personal Web Page</title>
</head>
<body>
<header>
<h1>Hello, I'm Alex!</h1>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>
I'm a beginner learning HTML and web development. I love creating new things
on the web and exploring design and code.
</p>
<img src="https://via.placeholder.com/300x200" alt="My photo">
</section>
<section>
<h2>My Interests</h2>
<ul>
<li>Coding</li>
<li>Music</li>
<li>Photography</li>
<li>Travel</li>
</ul>
</section>
<section>
<h2>Contact Me</h2>
<form action="#" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="30"></textarea><br><br>
<input type="submit" value="Send">
</form>
</section>
</main>
<footer>
<p>© 2025 Alex | Built with HTML 💻</p>
</footer>
</body>
</html>Save it as index.html and open it in your browser. Boom! You just built a full webpage.
Tips Before You Build Your Own
- Replace the name and text with your own info
- Add a real image or use your favorite one from the internet
- Play around with tags: use
<article>,<aside>, or even embed a video - Focus on structure, not style (we’ll learn CSS later!)
What You’ve Learned in 7 Days
- Headings, paragraphs, lists, links
- Images and videos
- Forms with input fields
- Semantic HTML
- Full web page layout
- Hands-on project building
You’ve laid the foundation for becoming a front-end developer!
What’s Next?
Now that you’ve finished HTML:
- Learn CSS to style your pages
- Explore JavaScript to make them interactive
- Try free platforms like CodePen or JSFiddle to experiment online
- Start building a portfolio site or blog
Final Challenge
Create a “Portfolio Web Page” for yourself:
- Add multiple project sections
- Include images and descriptions
- Link to your social media profiles
🎉 You Did It!
Thanks for joining this 7-day journey to master HTML. You now understand how web pages are structured, how to code them from scratch, and how to build your very own.
👉 Don’t stop here — this is just the beginning.
Stay creative, keep coding, and see you on your next tutorial!
🔄 Ready to revise all 7 days in one go?
Visit the HTML Practice Challenge with Full Solutions to review each concept and test yourself!