Product list panel

To structure our HTML page, we are going to create a panel called productPanel. This panel is a container for all product details.

A product is defined with a name, description, and button to add it to the cart, as shown in the following screenshot:

As we have multiple products, we would like to add each one in productPanel and fit the total width of productPanel, as shown in the following screenshot:

To reach this goal, we can recreate a row inside productPanel, with products forming a column of the row, as shown in the following code:

<div id="productPanel" class="col-8">
  <div id="products" class="row">
     <-- Added programatically -->
  </div>
</div>

There we go. The main layout is done. Now we have to create the HTML product's representation as div, with its name, description, price, and a button to add it to the cart.

This looks almost the same as what we did when we modeled the product for the database. Wouldn't it be great if we could...