Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Time-tracking-dashboard Vanilla

P

@O-Julia-O

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

@SpartanFranco

Posted

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

P

@O-Julia-O

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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