This is a time tracking dashboard project, inspired by the Frontend Mentor challenge. The goal of this project is to create a responsive user interface that allows the user to view time spent on different activities over three time periods: daily, weekly and monthly.

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

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: [(https://github.com/Ataize/Time-tracking)]
• Live Site URL: [(https://ataize.github.io/Time-tracking/]]

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Sass

• Using CSS Grid: I learned how to use CSS Grid to create responsive layouts, using grid-template-columns and minmax to define the layout columns;
• Responsive Design: Use media queries (@media) to ensure the design is adaptable to different screen sizes;
• Embedding External Fonts: I learned how to import and use custom fonts from Google Fonts;
• Modular CSS Structure: I used CSS variables to easily manage cores and other values ​​used in the design;
• Interactivity with JavaScript: I added interactivity using JavaScript to load data, switch views, and generate dynamic content.

• FreeCodeCamp - [(https://www.freecodecamp.org/Ataize)]
• Frontend Mentor - [(https://www.frontendmentor.io/profile/Ataize)]
• CodeAcademy - [(https://www.codecademy.com/profiles/ataizeFeitosa5951637940)]