9/20 — Your First HTML Project

This week we’ll build a simple webpage directly in CodePen.

← Back to 7th Grade

Step-by-Step Instructions

  • Go to CodePen and click Start Coding.
  • Hint: Make sure you are in the HTML panel when you type your code.
  • Type your starter HTML structure into the editor:
  • <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>My First Website</title>
    </head>
    <body>
      <!-- Your content will go here -->
    </body>
    </html>
    Hint: Everything you want to see on the page must go between <body> and </body>.
  • Add at least 3 headings using <h1>…<h6> tags.
  • Hint: Try <h1> for your page title, then smaller ones like <h2> and <h3> for sections.
  • Create 2 paragraphs using <p> tags.
  • Add a link with an <a> tag.
  • Hint: Example — <a href="https://example.com">Click Me</a>
  • Insert an image with <img> and include alt text.
  • Hint: Example — <img src="https://picsum.photos/200" alt="Random image" />
  • Click Run (triangle button) to see your work in the preview panel.
  • Hint: If you don’t see changes, check for missing angle brackets < > or closing tags.