What You'll Build
In this project, you'll use an AI assistant (Claude, ChatGPT, or any tool you prefer) to create a browser-based learning dashboard. The finished tool will let you:
- Track lessons and projects with interactive checkboxes
- Visualize progress with animated progress bars and percentage counters
- Maintain a daily learning streak that tracks consecutive study days
- Log study time and see weekly time charts
- Persist all progress in localStorage so nothing is lost between sessions
What You'll Need
An AI Chat Tool
Claude, ChatGPT, Gemini, or any AI assistant that can generate code. Free tiers work fine.
A Text Editor
VS Code, Notepad, TextEdit — anything that lets you save an .html file.
No coding experience needed
This project is designed for complete beginners. The AI does the heavy coding — you learn how to guide it.
Describe the Dashboard Layout
Open your AI tool and start a new conversation. A good dashboard needs clear visual hierarchy — stats at the top, content sections below. Here's a prompt that works well:
Build me a single HTML file for a learning progress dashboard. It should have:
- A header with the title "Learning Dashboard" and today's date
- A stats row at the top with 4 cards showing: total lessons completed (out of 24), total projects completed (out of 11), current streak in days, and total study hours
- Each stat card should have a large number, a label, and a small icon
- Below the stats, two side-by-side sections:
- Left: "Lessons" — a scrollable list of 24 lesson titles with checkboxes. Group them into 4 modules of 6 lessons each (Getting Started, Prompting, AI Coding, Advanced Topics)
- Right: "Projects" — a list of 11 project titles with checkboxes
- At the bottom, an "Overall Progress" bar showing the combined completion percentage
- Use a dark theme with clean, modern styling and clear visual hierarchy
Put all HTML, CSS, and JavaScript in one file. No external dependencies besides Tailwind CSS via CDN.
The dashboard layout follows a proven pattern: summary stats on top (the "at a glance" view), then detailed lists below. This gives users both a quick sense of progress and the ability to dive into specifics.
Add Lesson and Project Tracking
Now make the checkboxes functional and persistent. Each checkbox should save its state to localStorage so progress isn't lost when the page is refreshed:
Make the lesson and project tracking functional with localStorage:
- When a user checks a lesson or project checkbox, immediately save the completion state to localStorage
- Store lesson completions as an object like { "lesson-1": true, "lesson-14": true } and project completions similarly
- On page load, read from localStorage and check the appropriate boxes
- When a checkbox changes, update the stat cards in real time: recalculate "X of 24 lessons" and "X of 11 projects"
- Update the overall progress bar percentage whenever any checkbox changes
- Add a strikethrough style on completed items (line through the text, slightly dimmed color)
- Add a satisfying checkmark animation when completing an item — scale the checkbox briefly
- For each module section (Getting Started, Prompting, etc.), show a mini progress bar like "4 of 6 complete"
- Add a "Reset All Progress" button at the very bottom with a confirmation dialog ("Are you sure? This will clear all your progress.")
Keep the dark theme and dashboard layout.
This step introduces a key pattern: every user action immediately persists to localStorage and updates the UI. There's no "save" button — the dashboard always reflects the current state.
Build Progress Bars and Streak Counter
The progress visualization and streak system are what make the dashboard motivating. Progress bars should animate, and the streak counter should track consecutive days of activity:
Add animated progress bars and a streak tracking system:
Progress bars:
- The overall progress bar should animate from 0% to the actual percentage on page load (smooth transition over 1 second)
- Color-code the progress: 0-33% red/warm, 34-66% amber/yellow, 67-100% green
- Show the percentage number next to the bar, and animate the number counting up from 0
- Each module's mini progress bar should also animate on page load
Streak system:
- Track the current streak as consecutive days where the user completed at least one lesson or project
- Store the last activity date in localStorage as an ISO date string
- On page load, check if the last activity was yesterday (streak continues), today (already counted), or earlier (streak resets to 0)
- When the user checks any item, update the last activity date to today and increment the streak if this is the first activity today
- Display the streak prominently with a fire emoji and the day count
- Show the best streak ever (also saved to localStorage)
- If the streak is 0, show an encouraging message: "Check off a lesson to start your streak!"
- If the streak is 7+, show a celebration message: "One week strong!"
Keep the dark theme and existing layout.
Here are common issues and how to ask the AI to fix them:
Streak resets when it shouldn't
Tell the AI: "The streak resets to 0 even when I used the dashboard yesterday. Make sure the date comparison uses date-only strings (YYYY-MM-DD), not full timestamps, so time zones don't cause false resets."
Progress bar doesn't animate
Tell the AI: "The progress bar jumps to the final width instantly. Use CSS transition on the width property, and set the initial width to 0 in the HTML, then update it to the real value via JavaScript after a short requestAnimationFrame delay."
Stats don't update when unchecking items
Tell the AI: "The lesson count goes up when I check an item but doesn't go down when I uncheck it. Recalculate the totals by counting all true values in the stored object each time any checkbox changes."
Add Study Time Logging
Add a study timer that lets users track how long they spend learning each day. This creates accountability and provides data for the weekly chart:
Add a study time logging feature to the learning dashboard:
- Add a "Study Timer" section below the lesson/project lists
- Include a large digital clock display (MM:SS format) with Start, Pause, and Reset buttons
- When the timer is running, show a pulsing green dot indicator
- When the user clicks "Stop" or "Save Session", log the time spent to today's date in localStorage
- Store study time as an object: { "2026-02-27": 45, "2026-02-26": 30 } (minutes per day)
- Also allow manual time entry: a small input field where users can type minutes and click "Add" (for when they forgot to use the timer)
- Update the "Total Study Hours" stat card to sum all logged time across all days
- Show today's study time separately: "Today: 25 min"
- Add a "This Week" summary showing the total minutes logged in the last 7 days
- The timer should keep running even if the user scrolls — don't lose the timer state
Keep the dark theme and existing dashboard structure.
The timer and manual entry serve different use cases. Some people will start the timer when they sit down to study. Others will log time after the fact. Supporting both makes the tool more practical.
Add Data Visualization with Charts
The final step is adding visual charts that show study patterns over time. A weekly bar chart and a completion timeline make the data come alive:
Add data visualization charts to the learning dashboard using pure CSS and JavaScript (no chart libraries):
Weekly study time bar chart:
- Show a horizontal bar chart with the last 7 days (Mon-Sun or the actual last 7 dates)
- Each bar's width represents the minutes studied that day, proportional to the max day
- Label each bar with the day name and the minutes value
- Color today's bar differently (green) from past days (gray/blue)
- If a day has 0 minutes, show a thin placeholder bar with "0 min"
Activity heatmap:
- Show a small grid of the last 30 days (like a GitHub contribution graph)
- Each square represents one day, colored by activity level: no activity = dark gray, some activity = light green, lots of activity = bright green
- On hover, show a tooltip with the date and minutes studied
Completion timeline:
- Below the charts, show a simple timeline of recent completions: "Completed Lesson 5: Writing Better Prompts — Feb 27" with the most recent at the top
- Store completion timestamps in localStorage so you know when each item was completed
- Show up to the last 10 completions
Keep everything in the same single HTML file with the dark theme. Build the charts with CSS — no external libraries.
What You Learned
This project teaches more than just building a dashboard. By completing it, you practiced:
Building Dashboard Layouts
You learned to structure information hierarchically — stats at a glance on top, detailed views below — a pattern used in every analytics tool.
Progress Tracking with localStorage
You built a persistent state system that tracks checkboxes, streaks, and time logs across browser sessions — fundamental to any web app.
Data Visualization Basics
You built bar charts, heatmaps, and timelines with pure CSS — understanding the core concepts behind tools like Chart.js and D3.
Gamification Techniques
You implemented streaks, progress bars, and achievement indicators — the same patterns apps like Duolingo use to keep users engaged.
Tips for Working with AI on This Project
Build the layout before the logic. Get the visual layout looking right with static data first. Then add the localStorage persistence and dynamic updates. It's much easier to debug when you can see the structure.
Test streak logic across days. The hardest part to debug is the streak system because it depends on dates. Ask the AI to add a "debug" section that lets you manually set the last activity date for testing.
Keep localStorage keys organized. Use a prefix for all keys (like dashboard_lessons, dashboard_streak) so they don't collide with other projects saved in the same browser.
Charts don't need libraries. Pure CSS bars (div elements with percentage widths) are simpler and faster than importing Chart.js for a beginner project. The AI can build surprisingly good visualizations with just CSS.
Ready for your next project?
Explore more hands-on projects, or check out the tutorials for deeper dives into specific AI tools.