Skip to content
Submitted 9 months ago

Time Tracking Dashboard Main

EL harabiy•250
@Mubarak-Adeyemi
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I’m most proud of implementing a fully responsive design and using CSS Grid effectively to create a clean, organized layout. Next time, I’d focus on optimizing JavaScript for better performance and explore adding more interactivity, such as allowing users to customize their tracked activities.

What challenges did you encounter, and how did you overcome them?

I found it difficult to arrange the cards in the desktop view while ensuring smooth accessibility and optimizing SEO. I strictly adhered to semantic tags and ARIA labels. To overcome this challenge, I wrapped all the elements in a container, allowing for better structuring and layout management.

Code

Please log in to post a comment

Log in

Community feedback

  • Ilya Andreev•880
    @NeoScripter

    Hey! I checked your solution and it's nice that you adapted it to different screen sizes. I haven't done this one myself so I'm not sure what functionality it should have. However, one thing I noticed that you can improve is your profile picture proportions. Currently, it's distorted due to the image adjusting to the container size. What you can do is put the image into another div and set on the image the properties object-fit: cover and object-position: center. It should fix the problem. I hope it helps!

    Marked as helpful
  • Graiess_Youssef•410
    @graiess073029

    Hey ! The solution that you made is simply amazing. I was admiring how it was responsive as i opened it from my phone ans it fit perfectly. So, the only advice that i can give you is to increase the height of the main div (the div which contains the time-choosing bar and the card as children) to make it identic to the design. And that’s it, i wish that i helped you.

    Marked as helpful

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