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

P
Chris 770

@ccccchriz

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


Would love to hear some feedback on my html, i feel like it didn't have to be so verbose

Community feedback

@redstar504

Posted

Nice work Chris!

My only advice is that you may want to avoid getting in the habit of applying too many classes, and using too many DIVs, or other general purpose elements to represent your content. It makes the HTML less readable, and harder to maintain.

It's better practice to take advantage of the vast amount of tags HTML has available and to represent each type of content on the page with them semantically. That way you can simply target the elements using selectors rather than depending on a lot of verbose class tags. I personally try to only add classes or IDs when it's absolutely necessary.

I whipped this example up very quickly to give you an idea of how little markup you could really get away with. Take note of how much more readable it makes the HTML. I did not spend a lot of time refactoring the CSS, so it may not function perfectly. I tested using Chrome on Ubuntu.

https://redstar504.github.io/fm-time-tracking-dashboard/

Marked as helpful

1

P
Chris 770

@ccccchriz

Posted

Thanks @redstar504!

I have started to implement your suggestions, it's already easier to work with and there is still some stuff that is absolutely unnecessary.I will definitely use child selectors more often.

Thanks again for taking time to help me out.

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