Skip to content

jordon-young/fem-activity-tracker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Activity Tracker ⌚👩‍🔧⚽🏋️

Website Status

HTML5 CSS3 JavaScript JSON

Visual Studio Code Designed in Figma

This is a solution to the Time Tracking Dashboard Challenge by Frontend Mentor.

Activity Tracker Dashboard

📖 Table of Contents

📋 The Challenge

✅ The Solution

🔗 Links

📋 The Challenge

⬆️ Table of Contents

Brief

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

FEM Provided Resources

My Goals

  • Responsively Transition from Mobile to Desktop
  • Use Mobile First Media Queries
  • Read Data from JSON
  • Improve UX with Interactions and Transitions

✅ The Solution

⬆️ Table of Contents

Original Design vs. Solution

Breakpoint Original Solution
Desktop Desktop Original Desktop Solution
Mobile Mobile Original Mobile Solution

Additional Solution Layouts

Breakpoint Layout
Mobile Wide Mobile Wide
Two Column Two Column
Three Column Mobile Wide

🔗 Links

⬆️ Table of Contents

Author

Project

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published