Submitted 11 months ago

Mobile-first Time Tracker Challenge using NextJS

Frida 🌼• 90

@FridaWaldt

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Time tracking dashboard

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

One of the questions I had for this project was if there's a better way to place the images in the banners than I did by using #id for each and adding a background-image? I'd love any feedback really regarding best practices in any capacity, I'm here to learn and improve! Thank you all in advice for being so kind to review my work.

Community feedback

Mtalafa• 350

@Mtalafa

Posted 11 months ago

Hi, well done on completing this challenge.

I`m not very good yet with JavaScript but I did have a quick look at your CSS.

You can add this: transition: all 0.3s; to everything that changes on hovering, like for example the .lastweek

This will make the transition from the original color to the hover color more smooth.

Marked as helpful

Frida 🌼• 90

@FridaWaldt

Posted 11 months ago

@Mtalafa Thank you so much for reviewing my CSS Mtalafa! I tend to forget to add transitions, thank you for pointing this out, it's great help. 😊

Kenny Ng• 400

@kennylun123

Posted 11 months ago

Hi Frida,

I hope you're doing well! I wanted to take a moment to congratulate you on completing the coding challenge. Great job! 😊

I also wanted to provide some feedback on your code:

Imagine that each of your category-card is a reusable component. Inside of it you just need one div for category-card-stats. And you could set background image to category-card (parent container). You could either set the background using in-line style or assign an id to each component and use CSS selector as you did. After that you can finish the category-card-stats.

Keep up the great work! I'm looking forward to seeing what you'll create next.

Best regards,

Kenny

Marked as helpful

Frida 🌼• 90

@FridaWaldt

Posted 11 months ago

Thank you so much @kennylun123 ! Just the feedback I needed, I'll try this solution, I truly appreciate you taking the time to look at my code. :)

Please log in to post a comment

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