Skip to content
Submitted 3 months ago

Responsive Time-tracking-dashboard Vanilla

🔅 Yuliya 🐈•240
@O-Julia-O
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 proud that I was able to create working tab switching and extract data from a JSON file.

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

It was challenging to adjust the cards to match the specified design. I added margins, paddings to the text, and line height, which helped align the card properly.

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

I need help with grid layout and also with the JS code. Did I place the styles correctly, and is my JS code clear? What can I improve?

Community feedback

  • dinixtus•140
    @dinixtusPosted 3 days ago

    Hello Yuliya, I think you can change spacing-81 to 9.063rem by root in your style.css file. I changed it, and grid looks good. Have a nice coding!

    0
  • SpartanFranco•250
    @SpartanFrancoPosted 3 months ago

    Hello in layout, @media screen and (min-width: 70rem) { .hero__details { margin-bottom: 8rem; ---remove this rule; } .card__item { height: 300px;---- > height: 15rem; lower the px or change it to this measurement, which is more advisable to use relative measurements,

    but you have to play with the height of -.hero_container- to make it as similar as possible; if you are using grid, you could enclose - hero_container- inside cards as well and declare .cards{ grid-template-columns: repeat(4,1fr ); grid-template-rows: 1fr 1fr; }

    already:

    hero_container { grid-row:1/span 2 } and then you wouldn't have to play so much with the height of the cards and the hero_container

    } But still...Good job!!

    0
    🔅 Yuliya 🐈•240
    @O-Julia-OPosted 3 months ago

    hello, @SpartanFranco ! I wish I knew what you wrote here...

    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