HTML Exercise Programs Tutorial Guide

How to Use These Exercises

For each topic below, read the exercise description carefully and then try to write the HTML code yourself in a new file or an online editor. Start with the easy tasks and then move to the medium and hard challenges.

1. Headings & Paragraphs

Exercise 1: Personal Introduction Page Easy

Create a small page that shows your name in an <h1> heading, a short one‑sentence tagline in an <h2>, and two paragraphs describing your hobbies and goals.

Exercise 2: Article Layout Medium

Write an HTML fragment that looks like a short article: include a main heading for the article title, a sub‑heading for the section title, and at least three paragraphs of dummy text (for example, using “Lorem ipsum”).

2. Lists

Exercise 3: Daily Routine List Easy

Create an ordered list showing at least five steps in your morning routine, in the correct sequence.

Exercise 4: Nested Course Outline Medium

Build a nested list that represents a “Web Development” course outline with main topics (HTML, CSS, JavaScript) and at least two subtopics under each.

3. Links & Images

Exercise 5: Portfolio Links Easy

Create a section that contains three text links: one to your LinkedIn profile, one to your GitHub, and one to your favourite learning website. Make each link open in a new tab.

Exercise 6: Image Gallery Thumbnails Medium

Design a simple image gallery row with three images. Each image should have proper alt text and a width of 200 pixels. Optionally, wrap each image in a link to a larger version.

4. Tables

Exercise 7: Weekly Timetable Medium

Create a table that shows a weekly timetable with days as columns and time slots as rows. Fill in at least 3 days and 4 time slots with sample subjects or activities.

Exercise 8: Product Price List Hard

Build a table with a header row and at least four data rows. Include columns for “Product Name”, “Category”, “Price” and “In Stock?”. Use a <caption> for the table title.

5. Forms

Exercise 9: Contact Form Medium

Design a contact form with fields for name, email, subject (dropdown), and message (textarea). Include a submit button. Add labels for every field.

Exercise 10: Registration Form with Validation Hard

Create a registration form that includes username, email, password, confirm password, age and a checkbox to accept terms. Use HTML5 validation attributes like required, minlength and type="email".

6. Semantic Layout

Exercise 11: Simple Home Page Layout Medium

Create a full page structure using <header>, <nav>, <main>, <section>, <aside> and <footer>. Fill each section with short placeholder content.

Exercise 12: Blog Article with Sidebar Hard

Build a layout for a blog page where the main area contains an <article> with title and content, and the sidebar (<aside>) contains a list of “Recent Posts” using an unordered list.