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 created with react and vite✨

@Karrar-Hussein

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


Been very happy to finish this project, please write me feedback if there is a better way to include the icons of each card rather than including them as a background-image. Also feel free to inform me if there are any mistakes or bad practices that I can improve😁✨.

Community feedback

@Remy349

Posted

Hi @Karrar-Hussein, the result you achieved in the challenge is excellent, very well done.

Just a little tip to improve your structure when writing HTML and get a semantic improvement for your future projects and challenges:

  • Note that you used many <div> tags, which in the end led you to the desired result but my recommendation is that you try using other tags such as the <main> tag for all the main content of the page and the <article> tag for the cards, specifically the ones with the <div class="card banner"> classes.

This will improve the way you write HTML and the semantics of the pages, I leave these links for you to learn more about its use.

HTML <main>

HTML <article>

Keep learning :)

Marked as helpful

0

@Karrar-Hussein

Posted

@Remy349 Thank you very much, I will make sure to keep this in mind when building my next projects :)

1

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