Lesson 5: HTML Projects

Part 1: Landing Page Structure

Start with a clear header, a hero section introducing your brand, a features grid, and a footer. Use semantic tags for each section and wrap your content in container elements for consistent alignment.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Landing Page</title>
  </head>
  <body>
    <header>
      <h1>My Brand</h1>
      <nav>…</nav>
    </header>

    <section id="hero">
      <h2>Welcome to My Site</h2>
      <p>We build amazing experiences.</p>
    </section>

    <section id="features">
      <article>…</article>
      <article>…</article>
    </section>

    <footer>
      <p>© 2025 My Brand</p>
    </footer>
  </body>
</html>

Key Structure Points

Use `
`, `
`, `
`, `
` for clear layout.
Wrap content in a `.container` div to center and constrain width.
Break out distinct sections (hero, features) for easier styling.

Part 2: Portfolio Section

Below your landing page, showcase your work in a portfolio grid. Each project card should include an image, title, and short description—all inside a semantic `

<section id="portfolio">
  <h2>My Projects</h2>
  <div class="projects-grid container">
    <article class="project-card">
      <img src="project1.png" alt="Project 1 screenshot">
      <h3>Project One</h3>
      <p>A responsive landing page.</p>
    </article>
    <!-- Repeat for other projects -->
  </div>
</section>

Key Portfolio Points

Use a `
` with an accessible heading.
Grid layout with `
` for automatic columns.
Each project as an `
` with semantic meaning.