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 dashboard using SCSS and vanilla Javascipt with JSON

#accessibility#sass/scss#bem
Elaine 11,420

@elaineleung

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'd be interested to know what the others use in their HTML for the clickable/interactive components (e.g., the timeframe selectors and ellipsis) in such a dashboard component, and I wonder what's the best practice for accessibility in this case

Community feedback

Naleeka 470

@Naleeka

Posted

All of your solutions are pixel perfect. How do you align them so perfectly ? Do you use any Software to get widths and heights correctly ?

1

David 8,000

@DavidMorgade

Posted

@Naleeka she probably uses this chrome extension

1
Naleeka 470

@Naleeka

Posted

@DavidMorgade u r a real savior

0
Elaine 11,420

@elaineleung

Posted

@Naleeka I just use my eyes really! All I do is put the designs next to each other and compare them, no rocket science or black magic here 😊

Thank you @DavidMorgade for sharing the extension, which I've heard about, but sadly I use Firefox; hopefully there's a Firefox one out there!

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