Project: Dashboard widget

HTML course · Advanced · Lesson 47/56

Overview of the 5-lesson project: a widget skeleton with templates.

Project: Dashboard widget

In this 5-lesson project you'll build a sales dashboard widget. Each lesson adds one piece, and by the final lesson you'll have a complete panel.

You'll use:

Semantic tags: section, header, main, article
Data structures: table, figure, figcaption
Reusable partials: template, slot
Fallback and hooks: noscript, data-* attributes

Ready? Let's start.

What is a widget?

A widget is a small, self-contained data panel. A sales dashboard widget shows monthly revenue, top products and live status at a glance.

In HTML we wrap the widget in a <section> and put <header>, <main> and <article> inside. Screen readers then announce the panel as one region.

We structure data with a table and a figure so both numbers and visuals are easy to scan.

Exercise Start with an empty document skeleton

To start the project, write an empty HTML document skeleton. It should contain DOCTYPE, <html>, <head>, and an empty <body>. We'll add lang, meta and headings in later lessons.

Show example solution

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Test yourself

What should a widget be?
- A self-contained, glanceable small panel
- One huge image filling the whole page
- A script block containing only JavaScript code
- A menu linking to other pages
Show answer

A self-contained, glanceable small panel — Correct! A widget is a self-contained, glanceable small panel.

Complete the widget container's heading

<section>
  <header>
    <h1>____</h1>
  </header>
</section>

Show answer

<section>
  <header>
    <h1>Sales Dashboard</h1>
  </header>
</section>

Match each concept to its meaning

widget

Self-contained data panel
section

Content section
article

Independent content unit
header

Section header group
template

Reusable skeleton

All lessons in Advanced

Project: Dashboard widget