Skip to main content

Phase 1 Exercises: HTML Foundations 🧱

Mentor's Note: These exercises build on everything you learned in Phase 1. Start with the Starter challenge, then level up to Medium and Hard. Each challenge adds new tags and concepts — by the end you'll have built a complete multi-section mini-site!

📍 Prerequisites​

Before attempting these exercises, complete these lessons:

🎯 Exercise Flow​

🔰 Starter Challenge: Personal Bio Page​

Title​

Create a Personal Bio Page

Description​

Build a simple personal bio page that introduces yourself. Use a main heading, a paragraph about yourself, and an image. This exercise reinforces the absolute basics: h1, p, img, and proper HTML structure.

Learning Objectives​

  • Write a complete HTML document with DOCTYPE, html, head, title, and body
  • Use h1 for the main heading
  • Use p for paragraphs
  • Use img with src and alt attributes
  • Save and view an HTML file in a browser

HTML Starter Code​

<!DOCTYPE html>
<html>
<head>
    <title>My Bio</title>
</head>
<body>
    <h1>Hi, I'm [Your Name]</h1>
    <p>I am learning HTML and this is my first bio page!</p>

    <!-- Add your image below -->
    <img src="https://via.placeholder.com/200" alt="My profile photo">
</body>
</html>

Expected Output​

A browser page showing:

  • A large heading with your name
  • A paragraph introducing yourself
  • A profile image (placeholder or real)

⭐ Medium Challenge: My Favorite Things Page​

Title​

Build a "My Favorite Things" Page

Description​

Create a page about your favorite things using multiple heading levels, paragraphs, an ordered list (top 5 favorites in a category), and an unordered list (hobbies). This exercise introduces heading hierarchy (h1–h3), list types, and structured content organization.

Learning Objectives​

  • Use h1, h2, and h3 for proper heading hierarchy
  • Create an ordered list (ol > li) for ranked items
  • Create an unordered list (ul > li) for hobby items
  • Write descriptive paragraphs
  • Nest content logically under appropriate headings

HTML Starter Code​

<!DOCTYPE html>
<html>
<head>
    <title>My Favorite Things</title>
</head>
<body>
    <h1>My Favorite Things</h1>

    <h2>Top 5 Movies</h2>
    <p>Here are my all-time favorite movies:</p>
    <ol>
        <li>Movie Title 1</li>
        <li>Movie Title 2</li>
        <li>Movie Title 3</li>
        <li>Movie Title 4</li>
        <li>Movie Title 5</li>
    </ol>

    <h2>My Hobbies</h2>
    <p>Things I love to do in my free time:</p>
    <ul>
        <li>Hobby 1</li>
        <li>Hobby 2</li>
        <li>Hobby 3</li>
    </ul>

    <h3>A Little More About Me</h3>
    <p>I enjoy learning new things and meeting new people!</p>
</body>
</html>

Expected Output​

A browser page showing:

  • A main heading "My Favorite Things"
  • Section heading "Top 5 Movies" with a numbered list of 5 items
  • Section heading "My Hobbies" with a bulleted list
  • A sub-section with an additional paragraph

🏆 Hard Challenge: All About Me Mini-Site​

Title​

Create an "All About Me" Mini-Site

Description​

Build a complete mini-site with 3 sections connected by navigation links. Include a home/intro section, an interests section with images, and a contact section. Use proper HTML comments, images with alt text, and a navigation bar with anchor links.

Learning Objectives​

  • Structure a multi-section page with nav and anchor links
  • Link within the same page using href="#id"
  • Add images with descriptive alt text for accessibility
  • Use HTML comments to document your code
  • Organize content into clear, logical sections

HTML Starter Code​

<!DOCTYPE html>
<html>
<head>
    <title>All About Me</title>
</head>
<body>

    <!-- Navigation -->
    <nav>
        <a href="#home">Home</a> |
        <a href="#interests">My Interests</a> |
        <a href="#contact">Contact</a>
    </nav>

    <!-- Home Section -->
    <section id="home">
        <h1>Welcome to My World!</h1>
        <p>Hi, I'm [Your Name]. Welcome to my personal mini-site!</p>
        <img src="https://via.placeholder.com/300x200" alt="A welcome banner image">
    </section>
    <hr>

    <!-- Interests Section -->
    <section id="interests">
        <h2>My Interests</h2>
        <p>Here are some things I love:</p>

        <h3>Coding</h3>
        <img src="https://via.placeholder.com/150" alt="A laptop with code on screen">
        <p>I enjoy learning HTML and building web pages.</p>

        <h3>Reading</h3>
        <img src="https://via.placeholder.com/150" alt="A stack of books">
        <p>I love reading fiction and tech articles.</p>
    </section>
    <hr>

    <!-- Contact Section -->
    <section id="contact">
        <h2>Contact Me</h2>
        <p>You can reach me at: [[email protected]]</p>
        <!-- Add more contact info here -->
    </section>

    <!-- Footer -->
    <footer>
        <p>&copy; 2026 [Your Name]. All rights reserved.</p>
    </footer>
</body>
</html>

Expected Output​

A browser page showing:

  • A navigation bar with 3 clickable links that scroll to sections
  • A home section with heading, paragraph, and image
  • An interests section with 2 sub-sections, each containing an image and text
  • A contact section with email information
  • A footer with copyright notice
  • Comments visible in source code

💡 Tips for Success​

  • Validate your HTML with the W3C Validator
  • Always add alt text to images — it helps accessibility and SEO
  • Use hr to separate sections visually
  • Check that all your links and image paths work correctly

← Back to HTML Exercises