A Card for Each Product

So far each product was one line of a list. A real shop shows a card for each product: its name, a picture, the price and a link to learn more, grouped in one box. In HTML that box is an article, a piece that makes sense on its own. Putting elements inside other elements is called nesting: the card nests inside the list item, and the name, image, price and link nest inside the card.

A class is a name you give an element, like class="card". On its own it changes nothing: later, the stylesheet and the scripts use it to find every element with that name. Many elements can share a class. A span wraps a few words so they can have a name too. A review card could look like this:

<article class="review">
  <h3>Great mug</h3>
  <p>Rating: <span class="stars">5</span></p>
</article>

The Notebook and the Lamp already have their cards. Your page must print a Mug card first in the list. After the screen, the check lists the elements with a class, which is what CSS and JavaScript will find:

list
  item
    article
      heading 3: Mug
      image: A white mug with a blue handle
      text: Price: $12
      link: Details -> /products/1
  item
    article
      heading 3: Notebook
      …
.card
  article: Mug Price: $12 Details
  article: Notebook Price: $7 Details
  article: Lamp Price: $29 Details
.price
  span: $12
  span: $7
  span: $29

Your task: inside the ul, above the Notebook card, add an li holding an article with class="card". In it put an h3 Mug, the image images/mug.svg (alt A white mug with a blue handle, 160 by 160), a p with Price: and a span with class="price" holding $12, and a link Details to /products/1.

Assignment
Follow the Coding Tutorial to build the Mug card, one nested element at a time.

Hint
The Notebook card right under yours has the same shape: the same tags in the same order. Yours has the Mug's name, image, price and link.