Skip to content
Submitted 12 months ago

Responsive Dashboard

P
Aaron Smith•260
@medic-code
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Getting the JS to work properly. Not sure there is much I'd change differently, process to creating this was actually relatively smooth. I'm not sure I did the overlapping cards particularly well as i had to constrain them quite abit it felt like there was probably a smarter way.

There's a few parts of the design like icon placement i'd individually place using position absolute maybe and few parts where alignment is a little off.

What challenges did you encounter, and how did you overcome them?

Not too many challenges, mostly smaller ones around overlapping cards and overflow.

What specific areas of your project would you like help with?

HTML semantics CSS - Structure, refactoring potential, feedback on the overlapping cards JS - syntax and approach to the problem.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Matt Pahuta•670
    @MattPahuta

    Hey there. Great job on this challenge. You've matched the design comp really well and have incorporated some good semantic elements and modern, responsive styles. Your JS code is straightforward and efficient. You also interpreted the ui pattern here correctly as a tab interface. So good on that. I completely failed to recognize that myself when I worked on this project.

    I remember having trouble getting the overlapping cards to behave as well and just ended up using various padding values, not unlike your solution. I'm sure there's a more elegant way to achieve the effect but It's beyond me at this point.

    All that said, I did flag a few small things for you:

    1. The alt description on the user's avatar should be more descriptive and shouldn't include words like 'image' or 'picture' because they are already an image role.
    2. I believe the card icons here are decorative so the alt attributes can be empty.
    3. You're skipping some heading levels, moving from an h2 to an h4 and back to h2.
    4. The ellipse images are meant to be buttons. I'm guessing in a real-world app they'd open up a modal or another menu of some kind. It's not a detail I incorporated in my solution either but it's on the list for a future revision item.
    5. You still have the hard-coded data in your index.html file, so you should be able to delete that since you're populating values via JavaScript.
    6. For the JS, your 'work' variable isn't being used for anything I can see and can be deleted.

    Again, great work on the challenge. Cheers!

  • Aaliyan10•190
    @Aaliyan10

    Nice work

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