Week 1 Cheatsheet: HTML Product Card

What You’re Building

A product card with:

Product image
Name
Price
Button

HTML Tags You’ll Use


<!doctype html>
<html>
  <!-- Root of your document -->
  <head>
    <!-- Meta, title, and links -->
    <body>
      <!-- Page content -->
      <h1>
        ,
        <h2>
          <!-- Headings -->
          <p>
            <!-- Paragraphs -->
            <img />
            <!-- Product image -->
            <button>
              <!-- "Add to Cart" -->
              <div><!-- Grouping content --></div>
            </button>
          </p>
        </h2>
      </h1>
    </body>
  </head>
</html>

Example Code


<div class="product-card">
  <img src="..." alt="Product name" class="product-image" />
  <h2>Product Name</h2>
  <p>$19.99</p>
  <button class="add-to-cart-button">Add to Cart</button>
</div>

Tips to Remember

Use meaningful alt text on images
Wrap related content in <div>
Use class="" for styling later
Use correct nesting and indentation