This is the moment everything in this series has been building toward. We have covered document structure elements headings paragraphs text formatting links images lists tables forms input types semantic tags media special characters and best practices. Now its time to combine all of it into one complete real webpage built step by step from a completely empty file to a finished personal About Me page. Open your code editor create a new folder and lets build this together one section at a time.
Step 1: Set Up Your Project Folder
Before writing any code create a proper folder structure:
my-first-website/
index.html
images/
profile.jpgCreate a folder called my first website and inside it create a file named index.html. Also create a subfolder called images and place any photo of yourself or a placeholder image inside it named profile.jpg. If you do not have a photo handy any image will do for practice purposes.
Step 2 Add the Document Skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Alex Carter</title>
<meta name="description" content="Personal website of Alex Carter a web development student sharing projects and interests.">
</head>
<body>
</body>
</html>Type this into your index.html file replacing Alex Carter with your own name if you'd like. Save the file and open it in your browser right now you should just see a blank white page but check your browser tab to confirm the title is showing correctly. This confirms your foundation is working before we add any visible content.
Step 3 Add the Header Section
<header>
<h1>Alex Carter</h1>
<p>Web Development Student & Aspiring Developer</p>
</header>Add this inside your <body> tag right at the top. Save and refresh your browser you should now see your name as a large heading with a short tagline underneath it. This uses the semantic <header> tag we learned about in post 12 which is the correct choice for introductory content at the top of a page.
Step 4: Add a Navigation Menu
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>Add this right after your <header> closes. These are jump to section links using the hashtag pattern from post 6 they will not actually do anything yet since we have not created those sections. Lets build them next one at a time and each link will start working the moment its matching id exists further down the page.
Step 5 Add the About Section
<main>
<section id="about">
<h2>About Me</h2>
<img src="images/profile.jpg" alt="Alex Carter smiling outdoors" width="200">
<p>Hi I am Alex! I am currently learning web development starting with HTML and working my way up to CSS and JavaScript. This website is my very first project, built entirely from scratch as I follow along with a beginner tutorial series.</p>
<p>I'm <em>especially</em> interested in frontend development and I am excited to keep building more projects as I learn.</p>
</section>
</main>Add this after your <nav> closes. Notice we have opened a <main> tag and placed our first <section> inside it with id="about" matching the link we added in step 4. Save and refresh click the "About" link in your navigation and you should now jump straight down to this section.
Step 6 Add the Projects Section
<section id="projects">
<h2>My Projects</h2>
<article>
<h3>Personal Portfolio Page</h3>
<p>The very page you are looking at right now my first complete HTML project built while learning document structure, semantic tags, and forms.</p>
</article>
<article>
<h3>Recipe Blog Layout</h3>
<p>A practice project where I built a recipe page using headings ordered lists for instructions, and unordered lists for ingredients.</p>
</article>
</section>Add this right inside <main> after the About section closes. We are using <article> here for each project, since each one is a self-contained piece of content that could stand on its own exactly matching what we learned in post 12. Save and test the Projects link in your navigation.
Step 7: Add the Skills Section with a List
<section id="skills">
<h2>Skills</h2>
<ul>
<li><strong>HTML</strong> Comfortable building structured semantic pages</li>
<li><strong>CSS</strong> Currently learning</li>
<li><strong>Problem Solving</strong> Enjoy breaking down bigger problems into smaller steps</li>
</ul>
</section>Add this after the Projects section closes still inside <main>. This combines an unordered list since theres no required order to these skills with <strong> tags to highlight each skill name both patterns we covered back in posts 5 and 8.
Step 8: Add a Contact Section with a Real Form
<section id="contact">
<h2>Get In Touch</h2>
<p>Feel free to reach out using the form below or email me directly at <a href="mailto:alex@example.com">alex@example.com</a>.</p>
<form>
<label for="name">Your Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Your Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="5" cols="30" required></textarea><br><br>
<button type="submit">Send Message</button>
</form>
</section>Add this after the Skills section still inside <main>. This brings together the mailto link from post 6 and the form patterns from post 10 proper labels required fields and a submit button. Test submitting the form empty and confirm the browser's built-in validation kicks in.
Step 9 Close <main> and Add a Footer
</main>
<footer>
<p>© 2026 Alex Carter. Built as part of an HTML learning series.</p>
</footer>Make sure your <main> tag actually closes before this footer, since every section we built About Projects Skills Contact needs to live inside it. Add this footer right after using the © entity from post 14.
The Complete Page Start to Finish
Heres everything we just built, combined into one complete file. Compare this against what you've built yourself line by line and fix any differences.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Alex Carter</title>
<meta name="description" content="Personal website of Alex Carter, a web development student sharing projects and interests.">
</head>
<body>
<header>
<h1>Alex Carter</h1>
<p>Web Development Student & Aspiring Developer</p>
</header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>About Me</h2>
<img src="images/profile.jpg" alt="Alex Carter smiling outdoors" width="200">
<p>Hi, I'm Alex! I'm currently learning web development, starting with HTML and working my way up to CSS and JavaScript. This website is my very first project, built entirely from scratch as I follow along with a beginner tutorial series.</p>
<p>I'm <em>especially</em> interested in frontend development, and I'm excited to keep building more projects as I learn.</p>
</section>
<section id="projects">
<h2>My Projects</h2>
<article>
<h3>Personal Portfolio Page</h3>
<p>The very page you're looking at right now - my first complete HTML project, built while learning document structure, semantic tags, and forms.</p>
</article>
<article>
<h3>Recipe Blog Layout</h3>
<p>A practice project where I built a recipe page using headings, ordered lists for instructions, and unordered lists for ingredients.</p>
</article>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li><strong>HTML</strong> - Comfortable building structured, semantic pages</li>
<li><strong>CSS</strong> - Currently learning</li>
<li><strong>Problem Solving</strong> - Enjoy breaking down bigger problems into smaller steps</li>
</ul>
</section>
<section id="contact">
<h2>Get In Touch</h2>
<p>Feel free to reach out using the form below, or email me directly at <a href="mailto:alex@example.com">alex@example.com</a>.</p>
<form>
<label for="name">Your Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Your Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="5" cols="30" required></textarea><br><br>
<button type="submit">Send Message</button>
</form>
</section>
</main>
<footer>
<p>© 2026 Alex Carter. Built as part of an HTML learning series.</p>
</footer>
</body>
</html>Step 10 Test Everything
Now that the full page is built go through this testing checklist.
- Click every link in the navigation menu and confirm each one jumps to the correct section.
- Confirm your profile image displays correctly and check that the alt text shows up if you deliberately break the file path.
- Try submitting the contact form with fields empty and confirm the required field validation kicks in.
- Type an invalid email in the email field and confirm the browser flags it.
- Resize your browser window narrower and confirm the page still reads reasonably thanks to the viewport meta tag.
- Check your browser tab to confirm the page title displays correctly.
Step 11 Apply the Best Practices Checklist
Before considering this page finished run through the checklist from post 15.
- DOCTYPE, lang, charset and viewport are all present check.
- Exactly one
<h1>with logical<h2>and<h3>levels beneath it check. - Semantic tags (
headernavmainsectionarticlefooter) used throughout instead of generic divs check. - Meaningful alt text on the image check.
- Proper labels connected to every form field check.
- Descriptive title and meta description check.
Ideas to Extend This Project Yourself
Once you have built the version above exactly as shown, try extending it on your own.
- Add a fourth project to the Projects section using another
<article>. - Add a table in the Skills section showing skill name alongside a self rated proficiency level.
- Add a small image gallery section using the
<figure>pattern from post 7. - Add an audio or video element introducing yourself using what you learned in post 13.
- Add a few HTML comments labeling each major section using what you learned in post 14.
Conclusion
You have now built a complete real multi section webpage entirely from scratch using structure semantic tags navigation images lists and a working form genuinely everything covered across this entire series combined into a single project. This is no longer just practice snippets its an actual personal website you could genuinely publish once you add some CSS styling on top. In the final post of this series Mini HTML Project for Beginners we will build one more complete project together this time a different type of page to reinforce everything you have learned and give you a second full example to reference going forward.