time tracking dashboard

Please log in to post a comment
Log in with GitHubCommunity feedback
- @khatri2002
Hi @abdulrrahmann!
The developed solution looks good!
Few suggestions for improvement:
1. Responsiveness
The responsiveness has been handled for mobile devices by setting the breakpoint at
767px
. However, the layout is not optimized for medium-screen devices such as iPad Mini (width: 768px
), iPad Air (width: 820px
), and iPad Pro (width: 1024px
). The grid container extends beyond the device width on these screens. To make the component more dynamic and fully responsive, it’s important to handle medium screen devices as well.I understand that we are only provided with desktop and mobile design references, but it is always a better practice to account for all device sizes to ensure complete responsiveness.
Also, while the layout for mobile devices is handled quite well, one thing seems to be missed. The text for the current and previous value data should appear side by side in the mobile layout, which is currently not implemented.
2. Use of
button
instead ofp
You've used the
p
element to render the textDaily
,Weekly
, andMonthly
. While this works functionally, since these are clickable and trigger an action (changing the view), it is always better to use thebutton
element instead. Buttons are semantically appropriate for interactive elements and come with built-in accessibility features such as keyboard focus and assistive technology support, which improve the user experience and make your code more semantic.
The rest of the implementation looks great! Keep up the fantastic work! 🚀
Marked as helpful - @Andiko-K
The structure looks nice
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