Skip to content
OverviewSolutions
7
Comments
6

Tom

@tomhineManchester, UK290 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Tom•290
    @tomhine

    Hey Khaizter, this is great! I particularly like the animations on the filter dropdown. Really gives it a finished feeling.

  • Tom•290
    @tomhine

    Hi Claire, really nice job with the desktop view!

    I noticed a couple of issues with your mobile view;

    • You're setting your body element to height: 100vh. This breaks on mobile because your card list height is much larger than this. I'd reset that on mobile.
    • You also need to change the body padding on mobile. Honestly i'd probably move this padding onto your main element.
    • As for the mobile layout, I'd probably just swap to using flexbox with a colum direction and a gap.

    Hope this helps 👍

  • Tom•290
    @tomhine

    Hi @Surgetin, z-index only works on positioned elements. So, you need to make the position of the text you want to overlap either absolute, relative, sticky or fixed.

    Check out this link for more info.

    Great job with the design by the way!

    Marked as helpful
  • Tom•290
    @tomhine

    Hi Paola, this solution looks really good. Well done!

    You'll probably want to add some conditional styles for the green left hand border as they should only be coloured on the featured jobs.

    The filtering is definitely tricky, I've put together a simple demo of how I would do it and pushed it to github if you'd like to look at it.

    The basic gist is that only the filters that are active need to be tracked in useState as the filtered jobs can be built from those active filters and the original jobs. I would put the active filters in a array in useState as this makes it easy to add and remove them.

    The array.filter method returns the new filtered array leaving the original array untouched, so you don't have to keep the original in state as this never has to change.

    I hope this helps, definitely try cloning that example repo and mess around with it!

    Marked as helpful
  • Tom•290
    @tomhine

    Hey Bashar, great job with this challenge it looks really good! There are a couple of design things that could be improved though;

    • I think everything looks quite big, definitely bigger than the reference maybe try adding a max-width to the main container?
    • The links and the avatar image both shift on hover because you're adding the border when the elements are being hovered. You could try adding the border to the element permanently but make it transparent, then just change the colour on hover.
    • Your plus and minus buttons on the cart are the wrong way round.

    Again, really good job with this and I hope this helps.

    Marked as helpful
  • Tom•290
    @tomhine

    Hey Kianip,

    Great job with the challenge, looks really good! I particularly like the attention to detail with the profile image border colours.

    I have a few suggestions;

    • The max width on your .main-grid could probably be wider, it would allow each grid item to take up more horizontal space as they look a little tall.
    • I think the font size on the names needs to be smaller and the colour needs to be brighter
    • Looks like your grid item shadows need to have a larger blur radius.
    Marked as helpful