Skip to main content

Introduction to HTML — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Introduction to HTML lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Write your first heading and paragraph

    easy10 min

    Add an <h1> with the exact text "Hello, HTML" and one paragraph describing yourself in at least one sentence.

    • Add an <h1> heading.
    • The heading should say "Hello, HTML".
    • Add a paragraph describing yourself.
  2. 2

    Give the page a real title

    easy10 min

    Add a <title> element containing the exact text "My First Page". This is what shows in the browser tab — it is different from a heading on the page itself.

    • Add a <title> element.
    • The title should say "My First Page".
  3. 3

    Use an image with real alternative text

    easy10 min

    Add an image with src="https://placehold.co/200x120" and alternative text that starts with "Mountain" describing a mountain landscape at sunrise.

    • Add an <img>.
    • Use the exact image URL given.
    • Alt text should start with "Mountain".
  4. 4

    Create a simple unordered list

    easy10 min

    List three favorite web technologies — HTML, CSS, and JavaScript — as list items inside a <ul>.

    • Add a <ul>.
    • Add three list items.
    • Include JavaScript in the list.
  5. 5

    Nest elements in the right order

    medium15 min

    Build a small card: a <div class="card"> containing an <h2>Quick Tip</h2> followed by a <p> with advice text, with the heading as the card's first child.

    • Add a .card container.
    • The h2 should be the card's first child.
    • Add a paragraph inside the card.

Find the bug(5)

  1. 1

    Fix the wrong heading level

    easy10 min

    The greeting uses <h2> instead of <h1> for the page's main heading. Fix the tag — the text "Hello, HTML" should stay the same.

    • Use <h1> for the main heading.
    • Keep the text "Hello, HTML".
  2. 2

    Fix the wrong page title

    easy10 min

    The browser tab shows the wrong text. Change the <title> to read exactly "My First Page".

  3. 3

    Fix the broken gallery image

    easy10 min

    The gallery image's URL is misspelled so it never loads, and it has no alternative text. Fix the URL to https://placehold.co/200x120 and add alt text starting with "Mountain".

    • Fix the misspelled image URL.
    • Alt text should start with "Mountain".
  4. 4

    Fix the list built from paragraphs

    easy10 min

    This list of favorite tools uses <p> tags instead of list items, so it isn't really a list. Change each entry to an <li> inside the <ul>.

    • Use <li> for every list entry.
    • Keep JavaScript in the list.
  5. 5

    Fix the card's element order

    medium15 min

    The card's paragraph appears before its heading. Reorder them so <h2>Quick Tip</h2> is the card's first child, followed by the paragraph.

    • The h2 should be the card's first child.
    • Keep the paragraph inside the card.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace