This is a solution to the Time Tracking Dashboard Challenge by Frontend Mentor.
From the Time Tracking Dashboard Challenge page on Frontend Mentor's website:
Your challenge is to build out this dashboard and get it looking as close to the design as possible.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
If you would like to practice working with JSON data, we provide a local data.json file for the activities. This means you'll be able to pull the data from there instead of using the content in the .html file.
Your users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Switch between viewing Daily, Weekly, and Monthly stats
- Starting File Structure
- Minimalistic Style Guide
- Images Included in Design
- Design Screenshots (Desktop, Active States, Mobile)
- Responsively Transition from Mobile to Desktop
- Use Mobile First Media Queries
- Read Data from JSON
- Improve UX with Interactions and Transitions
Breakpoint | Original | Solution |
Desktop |
![]() |
![]() |
Mobile |
![]() |
![]() |
Breakpoint | Layout |
---|---|
Mobile Wide | ![]() |
Two Column | ![]() |
Three Column | ![]() |
- Github Profile - Jordon Young
- Frontend Mentor - @jordon-young