Assemble Your Deployable Dashboard
Assemble Your Deployable Dashboard
This is the capstone. You've built KPI cards, a chart, and a report layout—now you'll bring the pieces together into one complete, deployable dashboard page that you could ship to a real URL.
You'll assemble a full page: a branded header, a row of KPI cards, a chart section, and a data table—all on a single cohesive screen. This is the artifact you hand to a stakeholder and say "here's the live dashboard."
Think end to end. A deployable app isn't just pretty; it's organized, readable, and self-explanatory. When you finish this lesson, you'll have a portfolio-ready data app. Let's ship it.
Instructions
Add a page header with an h1 app title "Sales Analytics".
Hint: Use: `<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">Sales Analytics</h1></header>`.
Where does this go?
<!-- Assemble your full dashboard here -->Write it on line 11 — under that comment, after the code you already added.
Add a KPI row using a responsive grid container.
Add a chart section using styled bar divs with the bg-purple-500 color.
Add a data table for recent orders to complete the dashboard.
Your Code
Describe what you want to build for this step and I'll write the code — then click Apply to drop it into your editor. This step: Add a page header with an h1 app title "Sales Analytics".