Discover 10 fun and practical beginner projects with step-by-step instructions and sample code

10 Simple HTML Projects for Absolute Beginners (Step-by-Step Guide)

Leave a Comment / Codding / By

If you’re learning web development for the first time, you’ve probably gone through a few HTML tutorials and written lines of code like <h1>Hello World</h1>. But here’s the truth: you won’t truly learn HTML until you build something with it.

That’s why in this guide, we’re going to build 10 simple HTML projects—no CSS, no JavaScript, just pure HTML. Each project will teach you new tags, real-world applications, and problem-solving skills.

By the end, you’ll have hands-on experience and 10 mini-projects you can showcase in your coding portfolio.

Project 1: Personal Portfolio Page

Why This Project Matters

A portfolio is your digital CV. Even with only HTML, you can structure a page to introduce yourself, list your skills, and prepare for a professional-looking website later.

Step-by-Step Guide

  1. Open your text editor (VS Code is great).

  2. Create a new file called index.html.

  3. Start with the basic HTML structure:

<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>John Doe</h1>
<p>Hello! My name is John, and I’m learning web development in Ghana.</p>
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>Graphic Design</li>
<li>Content Writing</li>
</ul>
<h2>Contact</h2>
<p>Email: johndoe@example.com</p>
</body>
</html>

Key Lessons

  • Use <h1> for your main heading (your name).

  • <p> for text, <ul> for unordered lists.

  • Organizing information makes a site more professional.

 

Project 2: Favorite Foods List

Why This Project Matters

Lists are everywhere—from navigation menus to shopping lists. This project helps you practice ordered and unordered lists.

Step-by-Step Guide

<!DOCTYPE html>
<html>
<head>
<title>My Favorite Foods</title>
</head>
<body>
<h1>My Top 5 Favorite Ghanaian Dishes</h1>
<ol>
<li>Jollof Rice</li>
<li>Banku with Tilapia</li>
<li>Kelewele</li>
<li>Waakye</li>
<li>Fufu with Light Soup</li>
</ol>
</body>
</html>

Key Lessons

  • <ol> creates numbered lists.

  • <ul> creates bullet-point lists.

  • You can nest lists (e.g., “Fufu” → [Soup types]).

 

Project 3: Basic Resume Page

Why This Project Matters

Employers often want to see a resume website. Even without design, HTML gives you structure.

Step-by-Step Guide

<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
</head>
<body>
<h1>John Doe</h1>
<h2>Education</h2>
<p>BSc Computer Science – University of Ghana</p>
<h2>Experience</h2>
<p>Intern – GabWeb Designs (2024)</p>
<h2>Skills</h2>
<ul>
<li>HTML & CSS</li>
<li>Graphic Design</li>
<li>Content Marketing</li>
</ul>
</body>
</html>

Key Lessons

  • <h2> separates sections like Education, Experience, Skills.

  • Employers love well-structured, readable content.

 

Project 4: Simple Blog Post Layout

Why This Project Matters

Almost every website has blog functionality. Structuring posts teaches you semantic HTML.

Step-by-Step Guide

<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
</head>
<body>
<article>
<h1>Why I Want to Learn Coding</h1>
<p><em>Written by John Doe on August 23, 2025</em></p>
<p>I want to learn coding because it helps me build solutions that can impact lives in Ghana and beyond.</p>
<p>My first goal is to design websites for small businesses in my community.</p>
</article>
</body>
</html>

Key Lessons

  • <article> represents an independent piece of content.

  • <em> emphasizes text.

  • Blog posts need title, metadata, and content.

 

Project 5: Contact Form (HTML-Only)

Why This Project Matters

Forms power the internet: logins, sign-ups, checkouts. Even without backend, you’ll understand data input.

Step-by-Step Guide

<!DOCTYPE html>
<html>
<head>
<title>Contact Me</title>
</head>
<body>
<h1>Contact Me</h1>
<form>
<label for="name">Name:</label>
<br>
<input type="text" id="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email">
<br><br>
<label for="message">Message:</label>
<br>
<textarea id="message"></textarea>
<br><br>
<button type="submit">Send</button>
</form>
</body>
</html>

Key Lessons

  • <input> for text and email fields.

  • <textarea> for longer text.

  • <button> for form submission.

Project 6: Simple Recipe Page

Why This Project Matters

Food is a big part of Ghanaian and African culture, and recipe websites are among the most visited online. This project helps you practice structuring content with headings, paragraphs, and images, while connecting with something relatable—your favorite meals.

Step-by-Step Guide

<!DOCTYPE html>
<html>
<head>
<title>Ghanaian Recipe</title>
</head>
<body>
<h1>How to Make Jollof Rice</h1>
<p><em>Traditional Ghanaian Style</em></p>

<h2>Ingredients</h2>
<ul>
<li>2 cups rice</li>
<li>1 cup tomato stew</li>
<li>Onions, garlic, and pepper</li>
<li>Chicken or beef stock</li>
<li>Vegetable oil</li>
</ul>

<h2>Steps</h2>
<ol>
<li>Wash rice and set aside.</li>
<li>Prepare tomato stew with onions, garlic, and pepper.</li>
<li>Add stock and rice, then allow to cook until soft.</li>
<li>Serve hot with fried chicken or fish.</li>
</ol>
</body>
</html>

Key Lessons

  • Use <ul> for ingredients (unordered list).

  • Use <ol> for cooking steps (ordered list).

  • Combine headings, lists, and paragraphs for clarity.

Project 7: Music Playlist Page

Why This Project Matters

Music is universal, and tables in HTML are perfect for organizing structured data like playlists. This project teaches how to build rows and columns with song details.

Step-by-Step Guide

<!DOCTYPE html>
<html>
<head>
<title>My Music Playlist</title>
</head>
<body>
<h1>Afrobeat Playlist</h1>

<table border="1">
<tr>
<th>Song</th>
<th>Artist</th>
<th>Duration</th>
</tr>
<tr>
<td>Essence</td>
<td>Wizkid ft. Tems</td>
<td>4:10</td>
</tr>
<tr>
<td>Last Last</td>
<td>Burna Boy</td>
<td>3:20</td>
</tr>
<tr>
<td>Soweto</td>
<td>Victony</td>
<td>3:05</td>
</tr>
</table>
</body>
</html>

Key Lessons

  • <table> creates a table structure.

  • <th> is for table headers.

  • <tr> for rows, <td> for cells.

 

Project 8: Business Landing Page

Why This Project Matters

Landing pages are the heart of online businesses. Even a simple version teaches you navigation bars, hero sections, and call-to-action buttons.

Step-by-Step Guide

<!DOCTYPE html>
<html>
<head>
<title>GabWeb Designs</title>
</head>
<body>
<nav>
<a href="#">Home</a> |
<a href="#">Services</a> |
<a href="#">Contact</a>
</nav>

<header>
<h1>Grow Your Business with GabWeb Designs</h1>
<p>We build professional websites that convert visitors into clients.</p>
<button>Get Started</button>
</header>

<section>
<h2>Our Services</h2>
<p>Website Design | Branding | Digital Marketing</p>
</section>
</body>
</html>

Key Lessons

  • <nav> structures navigation menus.

  • <header> is perfect for a hero section.

  • <button> creates clickable call-to-action buttons.

Project 9: Daily Journal Page

Why This Project Matters

Keeping a daily journal online helps you practice dates, time, and linking between pages. It also makes content more interactive.

Step-by-Step Guide

<!DOCTYPE html>
<html>
<head>
<title>My Journal</title>
</head>
<body>
<h1>Daily Journal</h1>

<article>
<h2>Entry 1</h2>
<p><time datetime="2025-08-23">August 23, 2025</time></p>
<p>Today I started learning how to build my own website. Excited about the journey!</p>
<a href="entry2.html">Read next entry</a>
</article>
</body>
</html>

Key Lessons

  • <time> adds structured dates.

  • Journals can be linked with <a href="...">.

  • Organizing daily logs improves content flow.

 

Project 10: Tribute Page

Why This Project Matters

A tribute page is a classic beginner project that combines text, images, and sections into a clean biography or history page.

Step-by-Step Guide

<!DOCTYPE html>
<html>
<head>
<title>Tribute to Kofi Annan</title>
</head>
<body>
   <h1>Kofi Annan</h1>
<p><em>Former Secretary-General of the United Nations</em></p>

<img src="kofiannan.jpg" alt="Kofi Annan" width="300">

<h2>Early Life</h2>
<p>Kofi Annan was born in Kumasi, Ghana, in 1938...</p>

<h2>Achievements</h2>
<ul>
<li>Nobel Peace Prize Winner (2001)</li>
<li>Secretary-General of the UN (1997–2006)</li>
<li>Founder of the Kofi Annan Foundation</li>
</ul>

<h2>Legacy</h2>
<p>Kofi Annan remains one of Ghana’s most celebrated leaders, inspiring millions worldwide.</p>
</body>
</html>

Key Lessons

  • Combine <h1>, <h2>, <p>, <img>, and <ul> for rich content.

  • This project showcases your ability to structure a complete webpage.

✅ By completing Projects 1–10, you’ll have a portfolio of mini-projects that cover the core foundations of HTML: headings, lists, forms, tables, navigation, semantic tags, and multimedia. This not only builds confidence but also gives you a showcase for your coding journey.

You can join us on WhatsApp as we continue to explore into details how to build websites from scratch.

Final Thoughts: Let’s Build Your Dream Website Together

In today’s digital world, your website is more than just an online presence—it’s your business’s digital home, your 24/7 salesperson, and often the very first impression potential customers will have of you. Whether you’re a startup in Ghana or an established brand aiming for global reach, the right website design can transform how people see and interact with your business.

At GabWeb Designs, we don’t just build websites—we create digital experiences that convert visitors into loyal customers. From sleek, modern designs to SEO-friendly development, we ensure your brand shines online while helping you attract, engage, and retain customers.

👉 Don’t let your business get lost in the crowd. Let’s give you a website that speaks your brand’s language and drives real results.

📞 Get in touch today and let’s start building a website that works for you.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top