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

Submitted

Mobile First | I didn't expect to be so challenging

BBualdo 540

@BBualdo

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi!

2 things: 1. I didn't expect to have opportunity to practice fetch with this challenge. I'm sure I could do it better to avoid writing HTML structure render 4 times. Close it in a function or something. But I consider OOP as one of the hardest JS topics... 2. I used font-size: clamp(); on most problematic texts on the page, but it only helped avoid collapsing grid elements by ~100px (before using it, it started to collapse about 1200px width, now it starts about 1100px width) so I had to increase media query width from 600px to 1100px. Is there a better way to make grid elements responsive?

Anyway, this challenge gave me much practice and fun 😀

Feel free to point out mistakes and give some advice to OOP.

Thank you!

Community feedback

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