Skip to content
Submitted 9 days ago

Time tracking dashboard

Maren Ehlers•220
@MarenOelixtown
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?

It was an interesting refactoring process how my js-file grew. From a rather hardcoded time-tracking-element to a mostly dynamic one.

💡I will take a break more often in the future while coding, it seems useful to me...

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

It is always an exciting question for me how to structure the html appropriately. And also how to deal with accessibility correctly.

In this case, these links were a help to me.

👉ARIA: tab role

👉Example Tab Group

What specific areas of your project would you like help with?

About any other ideas on accessibility and html-structure I am pleased to find out.

Community feedback

  • Fikerte Tesfaye•210
    @Fikerte-TPosted 9 days ago

    hi @MarenOelixtown Your solution looks amazing. You did a great job. Just few things to improve it 😊😊 Removing the margin for larger screen size in your main margin: 10rem auto; and then adding

    display: flex;
justify-content: center;
alight-items: center;

    to the body will position your grid at the center both vertically and horizontally.

    Great job!! happy coding 😊😊😊

    Marked as helpful
    0
    Maren Ehlers•220
    @MarenOelixtownPosted 9 days ago

    Many thanks @Fikerte-T for the hint ... I'll have a look right away👍

    0

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