Build a Class Progress Dashboard
Student Progress Tracker
Knowing where every student stands at a glance is one of the most powerful things a teacher can have. A clean progress dashboard turns a spreadsheet of numbers into something you can read in seconds. In this lesson you'll build one with AI guiding each step.
You'll create a table that lists students, shows each one's progress with a visual bar, and labels their status so you instantly see who's ahead and who needs help. This is the kind of tool you can adapt for any class, any subject.
Follow the steps, watch the live preview, and you'll have a dashboard you could actually use on Monday morning.
Instructions
Add a dashboard heading with the text 'Class Progress' inside a rounded-xl card container.
Hint: Wrap an `<h1>Class Progress</h1>` inside a `<div class="... rounded-xl ...">`.
Where does this go?
<!-- Build your class progress dashboard here -->Write it on line 11 — under that comment, after the code you already added.
Create a table with header columns for Student, Progress, and Status.
For each student row, add a progress bar with a green fill div whose width reflects their progress.
Add a status badge in each row using a span. Make at least one say 'On Track'.
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 dashboard heading with the text 'Class Progress' inside a rounded-xl card container.