Practicing HTML through exercises is the best way to master its concepts. At The Coding College, we’ve prepared a variety of hands-on HTML exercises that cater to beginners and intermediate learners, helping you enhance your web development skills.
Benefits of HTML Exercises
- Practical Learning: Reinforce theoretical knowledge by applying it in real-world scenarios.
- Error Identification: Learn to debug and fix issues in your code.
- Confidence Building: Develop confidence in writing and understanding HTML.
- Skill Development: Improve your coding skills and prepare for projects or interviews.
Beginner-Level HTML Exercises
1. Create a Basic HTML Page
Objective: Create a simple HTML page with a title and a heading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my first HTML page.</p>
</body>
</html>Task: Add another heading and a paragraph describing yourself.
2. Create a List
Objective: Create both ordered and unordered lists.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML List Example</title>
</head>
<body>
<h2>My Favorite Foods</h2>
<ul>
<li>Pizza</li>
<li>Pasta</li>
<li>Ice Cream</li>
</ul>
<h2>Top 3 Places I Want to Visit</h2>
<ol>
<li>Japan</li>
<li>Switzerland</li>
<li>New Zealand</li>
</ol>
</body>
</html>Task: Add more items to each list and create a nested list.
3. Add an Image
Objective: Add an image with an alternate text description.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Image Example</title>
</head>
<body>
<h1>My Favorite Place</h1>
<img src="your-image-url.jpg" alt="A beautiful view of a mountain">
</body>
</html>Task: Replace the image URL with an image of your choice and adjust its size using the width and height attributes.
Intermediate-Level HTML Exercises
1. Create a Simple Form
Objective: Build a form that collects a user’s name, email, and feedback.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Form Example</title>
</head>
<body>
<h1>Feedback Form</h1>
<form action="submit-feedback.php" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="feedback">Feedback:</label><br>
<textarea id="feedback" name="feedback"></textarea><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Task: Add a dropdown menu and radio buttons to the form.
2. Embed a YouTube Video
Objective: Embed a video about HTML tutorials.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Video Example</title>
</head>
<body>
<h1>Learn HTML with Video Tutorials</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dD2EISBDjWM" title="HTML Tutorial" frameborder="0" allowfullscreen></iframe>
</body>
</html>Task: Add another video or replace the given one with your favorite tutorial.
3. Create a Table
Objective: Design a table to display a schedule or data.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Example</title>
</head>
<body>
<h1>Weekly Schedule</h1>
<table border="1">
<tr>
<th>Day</th>
<th>Activity</th>
</tr>
<tr>
<td>Monday</td>
<td>Gym</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Reading</td>
</tr>
</table>
</body>
</html>Task: Add more rows and columns to the table.
Explore More Exercises
Visit The Coding College for an extensive collection of HTML exercises tailored to all skill levels.
Conclusion
HTML exercises are a fantastic way to improve your coding proficiency. Start practicing with the examples provided and challenge yourself with additional tasks.