Skip to content
Submitted 9 months ago

Time tracking dashboard

bem, fetch, gulp, sass/scss, semantic-ui
Sylwia•260
@LesSyl
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

The biggest challenge for me during this project was working with data. To understand how various mechanisms work, I had to spend a lot of time reading documentation. Each new piece of knowledge helped me better grasp the structure of the data, its flow, and how I could process and display it. It wasn’t always easy, but patience and determination allowed me to gradually understand the key concepts. Through this process, I learned not only how to solve specific problems but also how to search for the necessary information in technical documentation more effectively.

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

I would like to know if the code I wrote is good and follows best practices. I hope I managed to apply the right solutions and avoid potential mistakes. I want to grow as a programmer, so any feedback or suggestions regarding my code would be extremely valuable to me. I believe that this will help me further improve my skills.

Code

Please log in to post a comment

Log in

Community feedback

  • Bassel || باسل•520
    @Basselfathy

    Hi @LesSyl, you're doing a fantastic job so far—great work on the design!

    I have a few suggestions that could help make the design more responsive and streamline the code:

    • Since you're already using display: grid on the .wrapper, you can simplify:
    grid-template-columns: repeat(4, 1fr);  
grid-template-rows: repeat(2, 1fr);

    by using:

    grid-template-columns: repeat(auto-fill, minmax());

    • This adjustment can reduce the need for media queries, making the design more adaptable.

    • Wrap the grid container inside a <div> and assign it a max-width along with a width of 100%. This helps maintain a consistent layout across different screen sizes.

    • You can also remove the fixed widths and heights from the cards to enhance flexibility.

    • Lastly, it's possible to remove:

    grid-column: 3 / 4;  
grid-row: 1 / 2;

    from the cards, while keeping it applied to the user-card.

    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