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

Time tracking dashboard using grid layout

@marianefelix

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


I'm still learning about CSS Grid Layout concepts, so I had some difficulties building the page to match the layout of the design. So, is there an easier way to do the layout desktop (using css grid or not)?

Community feedback

bunee 2,060

@buneeIsSlo

Posted

Hi! @marianefelix, Congrats on completing your first challenge! Your solution looks great and the code is super clean too.

The only alternative to CSS grids would be CSS flexbox. I understand that working with grids is a bit tricky, but with some more practice, you should get the hang of it. Here are some resources to get better at it:

Hope this helps :)

Marked as helpful

2

@marianefelix

Posted

hiii, @buneeIsSlo, thank you so much for the feedback! Thanks for the links too, I'll make sure to check them out! :)

1
Sky 945

@Skyz03

Posted

Hi Mariane, Great work on completing the challenge. There a some other ways to achieve same thing in grids as bunee mentioned about grid template areas. Here is another official resource from MDN web docs I would like you to refer where all available methods with video explanations plus. A quick go around grid template area is available. Have a look its a good place to start. Link: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

Marked as helpful

0

@marianefelix

Posted

@Skyz03, thanks for your comment! I'm gonna take a look at this resource too. :)

0

@imadatyatalah

Posted

It looks really nice tho, Make sure to add a hover state to ellipsis icon to achieve that you can use the SVG directly and then add hover state in your CSS code by using fill property

Marked as helpful

0

@marianefelix

Posted

oh, I had issues with that, actually. Thank you, @imadatyatalah!

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