Skip to content
Submitted 2 months ago

Time Tracking Dashboard Main

EL harabiy•250
@Mubarak-Adeyemi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Time tracking dashboard
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

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.

Community feedback

  • Ilya Andreev•750
    @NeoScripterPosted 2 months ago

    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
    1
    EL harabiy•250
    @Mubarak-AdeyemiPosted about 2 months ago

    Thanks, @NeoScripter.

    I tried it out and it works.

    0
  • Graiess_Youssef•410
    @graiess073029Posted 2 months ago

    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
    0
    EL harabiy•250
    @Mubarak-AdeyemiPosted about 2 months ago

    Thanks, buddy!

    1

Please log in to post a comment

Log in with GitHub

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