Skills learning tracker

Build a skills-learning tracker that lets users log practice sessions, track streaks, and visualize their consistency with heatmaps and progress rings.

Premium challenges are available with Pro.

Join 152 people who have taken this challenge

📝Brief

Your challenge is to build a personal practice tracker where users log sessions, manage skills, track streaks, and visualize their consistency through heatmaps and progress rings. There's no Figma file for this challenge — you'll make all the design decisions yourself.

We provide a brand kit with design tokens, sample data with 6 skills and 47 practice sessions, and detailed specs in the starter code. You can use any tools you like to help you complete the challenge.

We provide the data in a local JSON file, allowing you to populate the content on first load in "guest mode". We recommend building this project as a full-stack application, though.

Your users should be able to:

Create and manage skills they're learning, with optional colors and goals
Log practice sessions with duration, date, and optional notes
Track streaks — consecutive days of practice per skill and overall
Set weekly or total-hours goals per skill and track their pace
Visualize practice activity over time through a heatmap calendar
Sign up for an account or try the app as a guest with pre-loaded content
See a landing page that communicates the product's value
View the optimal layout for the app depending on their device's screen size

These features don't have a spec — you make the product decisions:

Dashboard & progress visualization: How do you organize skills, streaks, hours, and the heatmap into a layout that feels motivating and scannable at a glance?
Session logging UX: How do you design a logging flow that captures meaningful data in under 30 seconds and feels satisfying rather than tedious?

Download the project and go through the README.md file. This will provide further details about the project and help you get set up.

Want some support on the challenge? Join our community and ask questions in the help channel.

🗃Assets provided

Detailed product specification
Brand kit and design guidance
Starter CSS tokens and Tailwind config
Sample data for the guest experience
README to help you get started
Figma design file (not included with product challenges)

💡Ideas to test yourself

Build animated progress rings, streak counters, and heatmap squares with satisfying micro-interactions
Use AI to analyze practice patterns and generate personalized insights and encouragement
Add a built-in session timer with pause, resume, and auto-fill on completion
Go beyond WCAG compliance with customizable preferences, color-blind safe heatmaps, and a fully accessible keyboard workflow
Generate shareable achievement cards for social media — streak milestones, weekly recaps, and hour totals
Build a dedicated skill detail view with individual heatmaps, weekly trends, and full session history

Challenge FAQs

What is a product challenge?
Product challenges are a different format to our design challenges. Instead of providing Figma design files, we give you a detailed product specification, brand kit, and design guidance. You make the UX and design decisions yourself — collaborating with AI if you'd like — and ship a real deployed product. They're a great way to practice the full product development process.
What assets are provided with a product challenge?
Product challenges include a detailed product specification, brand kit with design guidance, starter CSS tokens and Tailwind config, sample data, and a README to help you get started. There are no Figma design files — you're responsible for making the design decisions yourself.
What is the difference between a design challenge and a product challenge?
Design challenges provide Figma design files that you build to as closely as possible. Product challenges don't include any design files. Instead, you receive a product specification and make all the UX and design decisions yourself. Both formats help you improve your skills, but product challenges also develop your ability to make design decisions and ship complete products.
How can I get help if I'm stuck on a challenge?
The best (and quickest) way to get help on a challenge is in our Discord server. There are thousands of other developers in there, so it's a great place to ask questions. We even have a dedicated "help" channel! If you haven't joined yet, you can get an invite to our Discord server here.
How do I submit my solution?
We'd recommend reading our complete guide to submitting solutions. If you get stuck and need help, please feel free to ask questions in our Discord server, and we'll help you submit your project.
Is there an official solution I can take a look at?
We don't provide "official" solutions for the challenges. This is because there is no single perfect way to complete a challenge. Instead, you're encouraged to review other people's code in the community. You can learn so much by seeing how other people have approached the same challenges and giving them feedback.
Do I get a code review when I post my solution?
Frontend Mentor is a collaborative learning community where everyone can give feedback to each other. If you'd like to receive feedback from the community, please be sure to post a question when you submit your solution. The more specific you can be, the better. Being clear with your questions means you're much more likely to receive valuable feedback from others.
Can I use libraries/frameworks on these projects?
Yes! Our challenges provide professional designs but there are no rules on what tools to use. So feel free to use anything you like to build your projects.
Should I use AI tools when working on challenges?
We recommend building strong fundamentals first — understanding HTML, CSS, and JavaScript deeply will serve you throughout your career. Once you feel confident in your core skills, we'd definitely encourage you to practice using AI coding assistants. Modern development workflows increasingly involve collaborating with AI agents, and it's a valuable skill to develop. The key is learning to review, refine, and guide AI output to produce high-quality code — not just accepting whatever it generates. Product challenges are a great place to practice this, as they're designed with AI collaboration in mind.
Can I use these projects in my portfolio?
Definitely! Please do feel free to use whatever you build in your portfolio. Helping developers add professional-looking projects to their portfolio was one of the reasons we created this platform!
How often are new challenges added?
We launch a new challenge every two weeks. We alternate between free and premium challenge launches, so we launch one free and one premium challenge each month.
Can I use these challenges within my own free or commercial content/tutorials/projects?
Please visit our License page to learn more about how our challenges can be used within your own content. If you're unsure about anything, please feel free to contact us at [email protected] and we'll be more than happy to answer your questions.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord