This is the final post in our HTML beginner series and its entirely hands on. In the last post we built a personal "About Me" page. This time we are building something different a small recipe website with multiple pages that link to each other giving you practice with everything from this series in a genuinely different context. By the end you will have three connected HTML pages a real project structure and a solid template you can reuse for your own future projects.
Project Overview What We are Building
We're building Home Kitchen Basics a tiny three page recipe website.
- index.html A homepage listing a few featured recipes.
- recipe.html A full recipe page with ingredients instructions and an image.
- about.html A short about page describing the site.
All three pages will share the same navigation menu linking to each other exactly how a real small website is structured.
Step 1 Set Up Your Project Folder
home-kitchen-basics/
index.html
recipe.html
about.html
images/
pancakes.jpgCreate this folder structure now. Place any food photo you have or a placeholder image into the images folder named pancakes.jpg. If you do not have a suitable image any image will work fine for practice.
Step 2: Build the Shared Navigation Menu
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recipe.html">Pancake Recipe</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>We will paste this exact block into all three pages so every page has consistent navigation. This is the relative linking pattern from post 6 since all three files sit in the same folder we can link directly by filename.
Step 3: Build the Homepage (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Kitchen Basics - Simple Recipes for Beginners</title>
<meta name="description" content="Simple, beginner-friendly recipes for home cooks, starting with the basics.">
</head>
<body>
<header>
<h1>Home Kitchen Basics</h1>
<p>Simple recipes for home cooks, one dish at a time</p>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recipe.html">Pancake Recipe</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<section>
<h2>Welcome</h2>
<p>This site is dedicated to simple, beginner-friendly recipes that don't require any fancy equipment or hard-to-find ingredients.</p>
</section>
<section>
<h2>Featured Recipe</h2>
<article>
<h3><a href="recipe.html">Classic Homemade Pancakes</a></h3>
<img src="images/pancakes.jpg" alt="A stack of golden pancakes topped with syrup" width="300">
<p>Light, fluffy pancakes made from scratch in under 20 minutes. <a href="recipe.html">View the full recipe</a>.</p>
</article>
</section>
</main>
<footer>
<p>© 2026 Home Kitchen Basics. All rights reserved.</p>
</footer>
</body>
</html>Type this into your index.html file. Notice it uses <header>, <nav>, <main>, <section>, <article>, and <footer> - the semantic layout from post 12 - along with an image, headings, and links. Save it and open it in your browser to confirm everything displays correctly before moving on.
Step 4: Build the Recipe Page (recipe.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Classic Homemade Pancakes Recipe</title>
<meta name="description" content="A simple, step-by-step recipe for classic homemade pancakes, ready in under 20 minutes.">
</head>
<body>
<header>
<h1>Home Kitchen Basics</h1>
<p>Simple recipes for home cooks, one dish at a time</p>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recipe.html">Pancake Recipe</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<article>
<h2>Classic Homemade Pancakes</h2>
<img src="images/pancakes.jpg" alt="A stack of golden pancakes topped with syrup" width="400">
<p><strong>Prep time:</strong> 10 minutes <strong>Cook time:</strong> 10 minutes <strong>Serves:</strong> 4</p>
<section id="ingredients">
<h3>Ingredients</h3>
<ul>
<li>2 cups all-purpose flour</li>
<li>2 tablespoons sugar</li>
<li>2 teaspoons baking powder</li>
<li>1/2 teaspoon salt</li>
<li>2 large eggs</li>
<li>1.5 cups milk</li>
<li>3 tablespoons melted butter</li>
</ul>
</section>
<section id="instructions">
<h3>Instructions</h3>
<ol>
<li>Whisk together the flour, sugar, baking powder, and salt in a large bowl.</li>
<li>In a separate bowl, whisk the eggs, then add the milk and melted butter.</li>
<li>Pour the wet ingredients into the dry ingredients and stir until <em>just</em> combined - a few lumps are fine.</li>
<li>Heat a lightly greased pan or griddle over medium heat.</li>
<li>Pour about 1/4 cup of batter per pancake onto the pan.</li>
<li>Cook until bubbles form on the surface, then flip and cook until golden brown.</li>
</ol>
</section>
<section id="tips">
<h3>Tips</h3>
<p><mark>Don't overmix the batter</mark> - a lumpy batter actually makes for fluffier pancakes.</p>
</section>
</article>
</main>
<footer>
<p>© 2026 Home Kitchen Basics. All rights reserved.</p>
</footer>
</body>
</html>Build this exact page as recipe.html. This combines nearly everything from the series: an ordered list for instructions (since order genuinely matters here), an unordered list for ingredients, <strong> and <em> for emphasis, <mark> for a highlighted tip, and nested sections inside an article, just like we practiced in post 12.
Step 5: Build the About Page (about.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Home Kitchen Basics</title>
<meta name="description" content="Learn about Home Kitchen Basics, a site dedicated to simple, beginner-friendly recipes.">
</head>
<body>
<header>
<h1>Home Kitchen Basics</h1>
<p>Simple recipes for home cooks, one dish at a time</p>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recipe.html">Pancake Recipe</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<section>
<h2>About This Site</h2>
<p>Home Kitchen Basics was created to share simple recipes that anyone can make regardless of cooking experience. Every recipe here uses common ingredients and straightforward steps.</p>
</section>
<section>
<h2>Frequently Asked Questions</h2>
<dl>
<dt>Do I need special equipment for these recipes?</dt>
<dd>No every recipe on this site is designed to work with basic kitchen tools most people already own.</dd>
<dt>Can I suggest a recipe?</dt>
<dd>Yes! Reach out anytime at <a href="mailto:hello@homekitchenbasics.com">hello@homekitchenbasics.com</a>.</dd>
</dl>
</section>
</main>
<footer>
<p>© 2026 Home Kitchen Basics. All rights reserved.</p>
</footer>
</body>
</html>Build this as about.html. This page uses a description list for the FAQ section matching the pattern from post 8 along with a mailto link from post 6.
Step 6: Test the Full Site
With all three files built go through this complete testing checklist.
- Open
index.htmlin your browser first. - Click Pancake Recipe in the navigation and confirm it takes you to
recipe.html. - From there click "About" and confirm it takes you to
about.html. - Click "Home" from the About page and confirm you land back on
index.html. - Confirm the pancake image displays correctly on both the homepage and the recipe page.
- Click the View the full recipe link and the recipe title link on the homepage and confirm both correctly navigate to
recipe.html. - Click the email link on the About page and confirm your email client attempts to open.
If any link does not work double check the exact filename spelling in your href attributes against your actual saved files this is by far the most common cause of broken navigation in a small multi page project like this.
Step 7 Apply the Full Best Practices Checklist
Before considering this mini project finished, check all three pages against the checklist from post 15.
- Does every page have
<!DOCTYPE html>langcharsetand viewport meta tags? - Does every page have a unique descriptive
<title>and meta description? - Is there exactly one
<h1>per page with logical heading levels beneath it? - Does the image have proper descriptive alt text?
- Are semantic tags used consistently across all three pages?
- Are all links using descriptive text rather than click here?
- Is the navigation identical and working correctly across all three pages?
Ideas to Extend This Project Yourself
Once your three-page site is fully working try extending it further on your own:
- Add a second and third recipe page, and list all of them on the homepage.
- Add a table on the recipe page showing nutritional information per serving.
- Add a contact form on the About page instead of just a
mailtolink using the form patterns from post 10. - Add a Related Recipes
<aside>section on the recipe page. - Add comments throughout your code labeling each major section using what you learned in post 14.
- Once you start learning CSS, come back to this exact project and style it having solid semantic HTML already in place will make that process significantly smoother.
Looking Back at the Whole Series
Take a moment to appreciate how far this series has come. In post 1 we covered what HTML even is. By post 9 you were building tables. By post 17 you built a complete personal website. And now in this final post you have built an entire multi page linked website from scratch structure semantic tags navigation images lists forms and content all working together across three connected pages.
Every tag and pattern used in this mini project traces back to something specific we covered earlier in the series.
- Document structure and meta tags post 2
- Elements tags and nesting post 3
- Headings and paragraphs post 4
- Text formatting (
strong,em andmark) post 5 - Links, including
mailto:and relative paths post 6 - Images and alt text post 7
- Unordered ordered and description lists post 8
- Forms and required fields post 10
- Semantic layout tags post 12
- Comments and character entities post 14
- Best practices and common mistakes posts 15 and 16
Conclusion
You have now completed a full beginner HTML series and more importantly you have built two real complete projects with your own hands rather than just reading about tags in isolation. HTML is the foundation every website is built on and you now have a genuinely solid grasp of it structure semantics accessibility basics and clean coding habits. The natural next step from here is CSS which will let you take everything you have built in this series and finally give it color layout and visual polish. Keep building keep practicing and do not be afraid to break things intentionally just to see how they behave that's still one of the fastest ways to truly learn.