Project 10: Real Estate Card

HTML Masterclass

Builds on these lessons

Apis Intro Apis Html5 Browser Api Local Storage

Step 1 of 3

Project

Skeleton & Property Card

Build a single listing card: an <article> with the address as heading, an image, and a small list of facts (price, beds, baths). This is the plain content the next steps hook browser APIs into.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>142 Maple Street | HomeFinder</title>
</head>
<body>
  <article id="property-142-maple">
    <h1>142 Maple Street</h1>
    <img src="142-maple.jpg" alt="Two-story brick house with a white front porch">
    <ul>
      <li>$489,000</li>
      <li>3 beds</li>
      <li>2 baths</li>
    </ul>
  </article>
</body>
</html>

← Previous Next →