Skip to content
Submitted over 1 year ago

Responsive Mobile-First time-tracking-dashboard

Barbara Ward•1,160
@bward67
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was a huge challenge for me. I first inserted the images on the cards as background images and placed them in the correct places BUT then when it came to the JS and I was appending a new section for the cards I realised I must insert them in my HTML rather than in my CSS. I had also used Flexbox on the cards but had to change them to Grid as it worked so much better when switching to a larger screen size.

The JS was an enormous challenge and so I eventually watched a youtube video from Seer Studio and it was really good - I learned sooooo much! Thank you Seer Studio - you should make more videos!. This is the link to Seer Studio: https://www.youtube.com/watch?v=l9Qw8y3LfCY

In the end it is not absolutely perfect as there is a very slight colored outline around the cards but maybe I will awake up in the middle of the night some time soon with the solution on how to fix it :) - ahh come on - we've all done that!!

Code

Please log in to post a comment

Log in

Community feedback

  • Arne•1,140
    @Dudeldups

    Hello!

    Good looking solution! Let me give you a few tips:

    The single pixel tearing in the corner of the card is a common issue with those wrapped elements with different background colors. I solved it by changing the color of the colored card to a linear gradient. So at the top you have the custom color and at the bottom the dark blue color, something like this:

    linear-gradient(cardColor 0%, cardColor 75%, blue 75%, blue 100%);

    Regarding your HTML, the h1 of a site should be the main heading of a site. Using Jeremy's name is not really appropriate here, it should be something like "Time tracking dashboard" or similar, visually hidden with CSS. Yeah I know, the smaller component-sized FEM challenges don't provide proper h1 headings. The headings inside the six cards should be "work", "play", etc. and not the time. You only created divs there, divs with only text are not semantically correct. Pure text should be wrapped inside a <p> or <span> or similiar, as needed.

    The site is missing a <main> element (usually a child of the <body>).

    In your CSS, you are setting the body's font size in px while you should do this with rem. If a user changes the default browser font size, your site will not adjust so the user won't see any changes.

    Using !important in a CSS file is generally bad practice, just as using id selectors. The selectors have different specificity, id selectors have the highest, then class selectors and then element selectors. If you use id selectors you end up having problems to overwrite this style (for example for .active classes, :hover states etc.). If you try to keep it to class selectors, the need for !important should be gone.

    When you look at the container between 565px and 1200px, it is missing space to the corner of the screen (you removed its margin at the breakpoint).

    And one small thing, you forgot to center the dashboard vertically 🤓😀

    Hope this helps, happy coding! 👾

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