Frontend Mentor - Time tracking dashboard solution

This is a solution to the Time tracking dashboard challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
  • Built with
  • What I learned
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

A responsive timetracking website using CSS grid and CSS flex. This is just a front-end project from FrontEnd Mentor to hone my web dev skills.

The challenge

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

Screenshots

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

Built with

• HTML
• Flexbox
• CSS Grid
• Javascript
• Sass - JS library

What I learned

I'm really proud of learning grid! Before this, I found grid useless as I really like how flex works. Now I've learned that flex is more of a responsive display-type and grid will be more of a fixed or structured display-type.

I've learned for of and Object.entries, which I think will help me in the future! Although I don't think I can implement it on the spot, it's good that I have been introduced with it by ChatGPT. I've also learned how to fetch JSON data from external files, which was quite a headache to learn as it's really a different approach.

Author

• Frontend Mentor - @wafflegum