Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@Lescano713

Posted

Your data management is excellent. Another way to handle it is by using fetch to retrieve data from a JSON file and then dynamically creating and adding elements to the DOM. However, you have some issues with adapting the content to different screen sizes. I noticed that you divided the content into two containers. If you start coding with a mobile-first approach, you can use media queries for widths above 420px to set the boxes-container with 'grid-template-columns: repeat(auto-fit, minmax(13em, 1fr))'. This way, the boxes will occupy the full width of the boxes-container, and the rows will automatically adjust.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord