Welcome to the Practice & Review Section of our 7 Days HTML Tutorial!
New here? Haven’t started the tutorial yet?
You’ve just landed on the solution page of our 7 Days HTML Tutorial Challenge – great to have you here!
But if you’re a beginner or haven’t gone through the full tutorial yet, we highly recommend starting with our guided lessons first to understand each HTML concept clearly before diving into the solutions.
If you’ve completed the full 7-day beginner-friendly HTML journey, give yourself a big round of applause!
But now it’s time to test and solidify your learning through hands-on exercises.
This post gathers all daily practice tasks into one place — perfect for revision, self-assessment, or just building your own mini-projects from scratch.
Table of Contents
📅 Day 1 – Basic Structure and Headings
🔸 Practice Task:
- Create a basic HTML page with the following:
- A
<!DOCTYPE html>declaration <html>,<head>, and<body>tags- Inside the
<head>, include a<title>like: “My First Web Page” - In the
<body>, add:- One
<h1>for the page title - Two
<h2>and two<h3>headings of your choice
- One
- A
Solution:
HTML
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<h2>About Me</h2>
<h2>My Hobbies</h2>
<h3>Reading</h3>
<h3>Coding</h3>
</body>
</html>
📅 Day 2 – Paragraphs, Formatting, and Comments
🔸 Practice Task:
- Add a few paragraphs describing yourself or your favorite hobby
- Use
<strong>,<em>,<u>, and<mark>to highlight key words - Add a few line breaks using
<br> - Write one or two HTML comments in your code
Solution:
HTML
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<!-- Introduction Paragraph -->
<p>Hello! My name is <strong>Alex</strong>.</p>
<p>I am <em>excited</em> to learn <u>HTML</u> and <mark>web development</mark>.</p>
<p>I love to explore the web.<br>It’s a great platform for creativity.</p>
<!-- End of content -->
</body>
</html>
📅 Day 3 – Lists and Links
🔸 Practice Task:
- Create a shopping list using an unordered list (
<ul>) - Create a to-do list using an ordered list (
<ol>) - Add a third list with some favorite websites using:
- External link: Open Google or YouTube in a new tab
- Internal link: Link to another section in the same page using
id
Solution:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Lists and Links</title>
</head>
<body>
<h2>Shopping List</h2>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
</ul>
<h2>To-Do List</h2>
<ol>
<li>Finish HTML practice</li>
<li>Read a book</li>
<li>Take a walk</li>
</ol>
<h2>Favorite Sites</h2>
<ul>
<li><a href="https://www.google.com" target="_blank">Google</a></li>
<li><a href="https://www.youtube.com" target="_blank">YouTube</a></li>
</ul>
<a href="#bottom">Go to bottom</a>
<p id="bottom">This is the bottom of the page.</p>
</body>
</html>
📅 Day 4 – Images and Multimedia
🔸 Practice Task:
- Add an image to your page using
<img> - Add alt text to describe the image
- Embed a YouTube video using
<iframe> - Add an audio file using
<audio>(use a sample or public link)
Solution:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Images and Videos</title>
</head>
<body>
<h2>My Photo</h2>
<img src="https://via.placeholder.com/300" alt="Placeholder Image">
<h2>My Favorite Song</h2>
<audio controls>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<h2>My Favorite Video</h2>
<iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</body>
</html>
📅 Day 5 – Tables and Forms
🔸 Practice Task:
- Create a table with 3 rows and 3 columns showing some data (like products, scores, or schedule)
- Use
<thead>,<tbody>, and<tfoot>(optional but good practice) - Build a simple contact form with:
- Text input (name)
- Email input
- Dropdown/select box
- Textarea
- Submit button
Solution:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tables and Forms</title>
</head>
<body>
<h2>Simple Table</h2>
<table border="1">
<thead>
<tr><th>Name</th><th>Age</th><th>City</th></tr>
</thead>
<tbody>
<tr><td>Alex</td><td>25</td><td>New York</td></tr>
<tr><td>Emma</td><td>28</td><td>London</td></tr>
</tbody>
</table>
<h2>Contact Form</h2>
<form>
<label>Name:</label><br>
<input type="text" name="name"><br><br>
<label>Email:</label><br>
<input type="email" name="email"><br><br>
<label>Subject:</label><br>
<select>
<option>Feedback</option>
<option>Support</option>
</select><br><br>
<label>Message:</label><br>
<textarea rows="4" cols="30"></textarea><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>
📅 Day 6 – Semantic HTML and Layout
🔸 Practice Task:
- Create a basic layout using semantic tags:
<header>with your name and a nav bar<main>containing:- A
<section>introducing yourself - An
<article>with a blog post or message - An
<aside>with two helpful links
- A
<footer>with copyright
Solution:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic Layout</title>
</head>
<body>
<header>
<h1>John Doe's Site</h1>
<nav>
<a href="#">Home</a> | <a href="#">Blog</a>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>I’m a beginner in HTML.</p>
</section>
<article>
<h2>My First Blog</h2>
<p>This is an article using semantic HTML.</p>
</article>
<aside>
<h3>Helpful Links</h3>
<ul>
<li><a href="#">W3Schools</a></li>
<li><a href="#">MDN Web Docs</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 John Doe</p>
</footer>
</body>
</html>
📅 Day 7 – Mini Project: Your Personal Web Page
🔸 Practice Task:
- Build a full web page using all the tags you’ve learned:
- Header (site name + nav)
- About Me section
- Interests or hobbies list
- Embedded image
- Contact form
- Footer
- Save it as
index.htmland open in browser — you’ve just made your first personal site!
Solution:
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Personal Page</title>
</head>
<body>
<header>
<h1>Hello, I'm Sam!</h1>
<nav>
<a href="#">Home</a> | <a href="#">Portfolio</a>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>I'm learning HTML through this awesome 7-day tutorial!</p>
<img src="https://via.placeholder.com/250" alt="Profile Photo">
</section>
<section>
<h2>My Interests</h2>
<ul>
<li>Technology</li>
<li>Gaming</li>
<li>Writing</li>
</ul>
</section>
<section>
<h2>Contact Me</h2>
<form>
<label>Name:</label><br>
<input type="text"><br><br>
<label>Email:</label><br>
<input type="email"><br><br>
<label>Message:</label><br>
<textarea rows="4"></textarea><br><br>
<input type="submit" value="Send">
</form>
</section>
</main>
<footer>
<p>© 2025 Sam | All rights reserved.</p>
</footer>
</body>
</html>
Bonus Challenge
Want more practice?
- Try creating a Resume page
- Try making a Recipe page with ingredients (list), image, and steps
- Rebuild a simple version of your favorite website using only HTML
How to Use This Post
You can:
- Bookmark this page as your practice tracker
- Come back later when revising
- Use it as a starting point for your projects
🔁 Want to revisit the lessons or explore more?
⬅️ Return to the 7 Days HTML Tutorial Home Page📚 Whether you want to review a specific topic or go through the full tutorial again, everything is structured to help you master HTML step by step.