Project 28: Dashboard Sidebar

HTML Masterclass

Builds on these lessons

Perf Defer Perf Async Perf Preload Perf Prefetch Perf Font Loading Perf Lazy Loading Perf Resource Priorities Perf Best Practices

Step 1 of 4

Project

Skeleton & Preloading a Critical Font

Build a dashboard shell: a <nav> sidebar with a few links and a <main> content area. Add <link rel="preload" href="dashboard-font.woff2" as="font" type="font/woff2" crossorigin> in <head> — preload tells the browser to fetch this file immediately, ahead of when it would normally be discovered while parsing CSS.

🎯 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>Dashboard | Meridian</title>
  <link rel="preload" href="dashboard-font.woff2" as="font" type="font/woff2" crossorigin>
</head>
<body>
  <nav aria-label="Primary">
    <a href="/dashboard">Dashboard</a>
    <a href="/dashboard/users">Users</a>
    <a href="/dashboard/reports">Reports</a>
  </nav>
  <main>
    <h1>Dashboard</h1>
  </main>
</body>
</html>

← Previous Next →