Project 30: Admin Dashboard

HTML Masterclass

Step 1 of 5

Project

Assembling the Admin Shell

This is the capstone: pull together everything from the last 29 days into one real page. Build the shell with a semantic <header>, a <nav aria-label="Primary"> sidebar, a <main> with a stats table (from your Tables and Restaurant Menu practice) and a recent-orders table, an <aside> for notices, and a <footer>. Consistent naming and clean indentation — the readability and naming-convention habits from this stretch of lessons — matter even more once a file gets this big.

🎯 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>Admin Dashboard | Meridian</title>
</head>
<body>
  <header>
    <h1>Meridian Admin</h1>
  </header>
  <nav aria-label="Primary">
    <a href="/admin">Dashboard</a>
    <a href="/admin/users">Users</a>
    <a href="/admin/orders">Orders</a>
    <a href="/admin/settings">Settings</a>
  </nav>
  <main>
    <h2>Overview</h2>
    <table>
      <caption>This Month</caption>
      <thead>
        <tr>
          <th scope="col">Total Users</th>
          <th scope="col">Active Today</th>
          <th scope="col">Revenue</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>4,210</td>
          <td>318</td>
          <td>$52,600</td>
        </tr>
      </tbody>
    </table>
    <h2>Recent Orders</h2>
    <table>
      <thead>
        <tr>
          <th scope="col">Order</th>
          <th scope="col">Customer</th>
          <th scope="col">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>#1042</td>
          <td>Renee O.</td>
          <td>$84</td>
        </tr>
      </tbody>
    </table>
  </main>
  <aside>
    <h2>Notices</h2>
    <p>Scheduled maintenance Sunday, 2am-4am.</p>
  </aside>
  <footer>
    <p>&copy; 2026 Meridian.</p>
  </footer>
</body>
</html>

← Previous