Skip to content
Submitted 3 months ago

BEM responsive Javascript Time Tracking

#bem
Sebastián Márquez•260
@sebamarques
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 really liked this project, in the future i'm going to think how to write the code differently, i have it in my head but i dont have the knowledge to do it the way i want it,

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

I used grid area and for me was the most difficult part, i did excercises with a similar design but this one it was difficult for me

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

Whichever area you see i need to practice more or some tips to do it in a different way!!.

Community feedback

  • Jay Khatri•4,250
    @khatri2002Posted 3 months ago

    Hi!

    In the design reference for desktop resolution, the gap (both row gap and column gap) between the cards is consistent. However, in your solution, this consistency is missing.

    Currently, you’ve implemented two grids:

    1. Container Grid: Holds the user card and activity cards.
    2. Child Grid: Specifically for the activity cards.

    This can be simplified by using a single grid.

    • Use a single grid layout for all cards.
    • Apply grid-row: span 2 / span 2; to the user card. This allows the user card to span two rows, creating the layout you need without additional nested grids or manual adjustments.
    • Avoid setting widths or margins manually for grid items, as they can make maintaining consistency challenging.

    Great work so far! Keep up the awesome coding! 🚀

    Marked as helpful
    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