10/18 — Haunted HTML Practice

Let’s get spooky while we review our HTML skills! You’ll build a Halloween-themed webpage in CodePen.

← Back to 7th Grade

Step-by-Step Instructions

  • Go to CodePen and click Start Coding.
  • Hint: Be sure you are in the HTML panel when typing your code.
  • Start with your HTML skeleton:
  • <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>My Haunted Page</title>
    </head>
    <body>
      <!-- Your spooky content goes here -->
    </body>
    </html>
    Hint: All your visible content belongs between <body> and </body>.
  • Add 3 headings (<h1>, <h2>, <h3>) for your page title and sections.
  • Example: <h1>Welcome to My Haunted House</h1>
  • Create 2 paragraphs (<p>) describing your Halloween theme.
  • Add a link (<a>) to a Halloween safety or costume website.
  • Example — <a href="https://www.safekids.org/tip/halloween-safety-tips">Halloween Safety Tips</a>
  • Insert at least one Halloween image using <img> with a clear alt description.
  • Example — <img src="https://picsum.photos/seed/pumpkin/300" alt="Glowing pumpkin jack-o-lantern" />
  • Create a list of your favorite spooky treats or costumes using <ul> and <li> tags.
  • Hint: Example — candy corn, caramel apples, spooky cookies!
  • Click Run (triangle button) to preview your page.
  • If something doesn’t show up, check for missing </> brackets or closing tags.