Project: The Shop's Home Page in JavaScript

Time to put it all together. Your page already has its regions (header, main and footer), headings, lists, a table and a form. In this project you finish two parts: a Popular this week section in main, and a Contact section in the footer.

A section gets its name from a heading. Its aria-labelledby holds the id of that heading. Until that heading exists, the section has no name, and the screen does not show it as a box. For example:

<section aria-labelledby="sale">
  <h2 id="sale">On sale</h2>
  ...
</section>

prints as section "On sale" with heading 2: On sale inside it. Each section in main gets an h2, like Our products, so the cards inside get an h3.

Contact details go in an address element. A link whose href starts with mailto: followed by an email address opens the visitor's mail app with that address filled in.

When the page opens, the new parts of the screen must read:

main
  section "Popular this week"
    heading 2: Popular this week
    article
      heading 3: Plant
      image: A green plant in a brown pot
      text: Price: $15
      link: Details -> /products/5
    article
      heading 3: Teapot ...
footer
  section "Contact"
    heading 2: Contact
    text: 12 Market Street, Springfield
    link: hello@example.com -> mailto:hello@example.com
  text: © 2026 Corner Shop

Your task: in index.html, give the Popular section an h2 with id="popular", and add the Plant card above the Teapot card: an article with class="card" holding an h3, the image, the price and a Details link. Then add the Contact section to the footer, above the copyright: an h2 with id="contact" and an address with the street and the email link.

Assignment
Follow the Coding Tutorial to finish the shop's home page: the Plant card in the Popular section, and the Contact section with its address in the footer.

Hint
The Teapot card is already on the page: the Plant card has the same parts in the same order. Each section's aria-labelledby must match the id of its h2, letter for letter.