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 - Thoughtful responsiveness & vanilla JS 🖖

Rafal• 1,395

@grizhlieCodes

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


Another one!

I was asked to make a video for this project with vanilla technologies so I just built it. Going to upload a video on my YT channel soon.

One question I have and it's rather technical and requires a CSS geek 🤓:

What would you say is the best practice for defining widths/heights?

The way I've been thinking about it is that height should be set by the content + padding (box-sizing: border-box) effectively. And width should be similar with SOME rules. Perhaps you don't want it too wide so max-width. Perhaps not too small, so min-width. Otherwise I stick to using % whilst defining these rules or simply leaving elements be if they are display: block.

Just curious.

Cheers!

Community feedback

Duyen Nguyen• 950

@Duyen-codes

Posted

Hey, thanks for the video. It's great, just the bg music distracts me from listening to you sometimes. I copied and paste exactly your codes, but still it did not work as expected. In the video, you copied the data into js file instead of fetching it. I think i was applying both and now lost. :(( Feel like crying because i couldnt get this solved. Really! Could you please have a look at my codes and see what i did wrong? I'd really appreciate it. github link: https://github.com/Duyen-codes/Time-tracking-dashboard-FEM

0

Rafal• 1,395

@grizhlieCodes

Posted

@Duyen-codes hehe, there were things/mistakes I'm famous for. Whilst I don't feel like crying I do feel like throwing my screen outside of my window sometimes when I've been at something for AGES and then it just refuses to work. So I sort of understand. Usually the best thing to do is to slow down or just take a break I think.

I cloned your project and just recorded a quick debugging run.

link

0
Rafal• 1,395

@grizhlieCodes

Posted

@Duyen-codes I won't upload another video until I figure out sound - always something to learn 😅 - thanks for the feedback.

0
Duyen Nguyen• 950

@Duyen-codes

Posted

@grizhlieCodes Thanks. I'm watching the video now.

0
Duyen Nguyen• 950

@Duyen-codes

Posted

@grizhlieCodes Your voice and video sound are perfec imo. Just bg music is not neccessary tho. Great video tbh!

Marked as helpful

1
Rafal• 1,395

@grizhlieCodes

Posted

@Duyen-codes Thank you, appreciate the feedback.

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