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.
Note: Delete this note and update the table of contents based on what sections you keep.
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.
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
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- HTML
- Flexbox
- CSS Grid
- Javascript
- Sass - JS library
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.
- Frontend Mentor - @wafflegum