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

• Frontend Mentor - Time tracking dashboard solution
  • Table of contents
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
  • Author

Screenshot

Links

• Solution URL: Frontend Mentor
• Live Site URL: Github Pages

My process

First, I mapped out where I wanted data to reside in my components and how I wanted data to flow. While I'm not using live data, the data flow is intended to work as if I am fetching actual data (i.e. from Dashboard down to DashboardAvatar).

Second, I approached the layout using a mobile-first perspective. Much of the mobile layout makes use of the default styling, at least for the panels themselves. The inner parts of the panels did require a bit of CSS for more accurate styling. The desktop layout makes use of an outer grid to divie the longer avatar panel and the group of activity panels. The avatar group is then made into its own grid.

Built with

• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library

What I learned

This project helped me reinforce my overall structuring of my CSS as well as CSS in React. I think I was able to maintain a good seperation of global CSS in index.css (utility/baseline styling) and component specific styling.

Author

• Website - Michael Schultz
• Frontend Mentor - @ms097530