┌────────────────────────────────────────────────────────────┐
│                 Level 1 Beginner Capstone Portfolio        │
├────────────────────────────────────────────────────────────┤
│ 1. Developer Portfolio       (Header, Nav, Bio, Projects)  │
│ 2. Editorial Blog Post       (Article, Figures, Time, Aside│
│ 3. Restaurant Menu           (Tabular Menu, Reservation)   │
│ 4. User Registration Portal  (Fieldset, Validation Inputs) │
└────────────────────────────────────────────────────────────┘

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alex Morgan — Front-End Software Engineer</title>
    <meta name="description" content="Portfolio of Alex Morgan, specializing in accessible Vue.js and TypeScript web applications." />
  </head>
  <body>
    <header>
      <nav aria-label="Main Navigation">
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#skills">Skills</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
      <h1>Alex Morgan</h1>
      <p>Front-End Engineer building performant, accessible web systems.</p>
    </header>

    <main>
      <section id="about">
        <h2>About Me</h2>
        <p>I am a developer based in San Francisco with a passion for web performance, design systems, and semantic HTML architecture.</p>
      </section>

      <section id="projects">
        <h2>Featured Projects</h2>
        <article>
          <h3>Front-Heaven Learning Platform</h3>
          <p>An open-source curriculum platform for mastering modern web development.</p>
          <ul>
            <li>Built with Nuxt 4, Vue 3, and Tailwind CSS.</li>
            <li>100% Lighthouse accessibility score.</li>
          </ul>
          <a href="https://github.com/example/front-heaven" target="_blank" rel="noopener noreferrer">View Source Code</a>
        </article>
      </section>

      <section id="contact">
        <h2>Get In Touch</h2>
        <address>
          Email: <a href="mailto:alex@example.com">alex@example.com</a><br />
          GitHub: <a href="https://github.com/example" target="_blank" rel="noopener noreferrer">github.com/example</a>
        </address>
      </section>
    </main>

    <footer>
      <p>&copy; 2026 Alex Morgan. Built with semantic HTML5.</p>
    </footer>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Artisan Bistro — Menu & Table Reservations</title>
  </head>
  <body>
    <header>
      <h1>Artisan Bistro & Café</h1>
      <p>Organic farm-to-table dining open daily from 8:00 AM to 10:00 PM.</p>
    </header>

    <main>
      <section id="menu">
        <h2>Seasonal Menu</h2>
        <table>
          <caption>Lunch & Dinner Entrées</caption>
          <thead>
            <tr>
              <th scope="col">Dish Name</th>
              <th scope="col">Dietary</th>
              <th scope="col">Price</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">Wild Mushroom Risotto</th>
              <td>Vegetarian / Gluten-Free</td>
              <td>$24.00</td>
            </tr>
            <tr>
              <th scope="row">Pan-Seared Pacific Salmon</th>
              <td>Gluten-Free</td>
              <td>$28.50</td>
            </tr>
          </tbody>
        </table>
      </section>

      <section id="reservation">
        <h2>Book a Table</h2>
        <form action="/api/reservations" method="POST">
          <fieldset>
            <legend>Party Details</legend>
            <label for="guest-name">Full Name</label>
            <input type="text" id="guest-name" name="name" required />

            <label for="guest-email">Email Address</label>
            <input type="email" id="guest-email" name="email" required />

            <label for="party-size">Party Size</label>
            <input type="number" id="party-size" name="size" min="1" max="12" value="2" required />

            <label for="res-date">Reservation Date</label>
            <input type="date" id="res-date" name="date" required />

            <button type="submit">Confirm Reservation</button>
          </fieldset>
        </form>
      </section>
    </main>
  </body>
</html>