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

React time tracking

@Valentin-Dr

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


Hey,

while making this project, I've used a grid layout for the first time, as I've been used to use flex instead. I tried to make it look good but I've had some issues making the biggest section's height equal to the two rows combined.

As I'm still pretty bad with grid layouts I'd love to hear your tips to have a clean layout !

Community feedback

@tesla-ambassador

Posted

Hey Valentin D. Wow! This is a stupendous solution! You really nailed it, your grid layout is really fine here's a few tips that I think might be useful:

  • Instead of declaring grid-columns like this grid-template-columns: 1fr 1fr 1fr 1fr;, you could use grid-template-columns: repeat(4, 1fr);
  • At the screen width of 900px, instead of using 1 column, You could try 3 or 2 columns and then you later move on to 1 column when your screen becomes to small to handle multiple columns.
  • You might want to include a level one heading (an <h1> tag) most preferably on the name "Jeremy Robson" in your case. This will fix your accessibility issue. I think you nailed it with your grid! Keep up the good work and happy coding!

Marked as helpful

1

@Valentin-Dr

Posted

@tesla-ambassador Thank you so much for your kindness and your tips, I indeed forgot the h1 tag, which is pretty embarassing...

And I did not know about using repeat in my grid-template-columns property, that will be useful for sure !

Thank you :)

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