Skip to content
OverviewSolutions
0
Comments
4
P
Zarak
@zarak

All comments

  • ItsZubek•130
    @ItsZubekSubmitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    I would probably use the Figma file next time since it's a bit hard to guess what the exact spacings and sizes are, but I think it came out alright considering not having the Figma file available.

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

    I learnt something new when it comes to the tag. I've always used tags and disabled/enabled them by using media querries. However using picture and multiple sources based on screen width is a much easier and more readable way of doing things.

    Product Preview Card

    1
    Zarak•60
    @zarakPosted 20 days ago

    This looks great! You used the picture tag for semantic HTML. It is very responsive and works on a variety of screen sizes. Nice use of flexbox to ensure the spacing/layout stays responsive. The use of srcset for changing images based on screen width is quite neat!

    Not much else to say really. Great work!

    Marked as helpful
    1
  • Zarak•60
    @zarakPosted 25 days ago

    Nice use of CSS grid! The layout looks great on small screen sizes as well as large - it's small enough that it doesn't need adjustment on smaller screens, which looks great.

    That said, the design spec asked for a slightly larger card (in terms of pixels) on tablet sized screens, so making the layout responsive to accommodate tablets according to the design could be one area of improvement.

    The animation on hover looks great! One enhancement you could make is to support using the keyboard - you can do this with :hover selectors. The styling could be similar to the hover effect.

    Great work!

    0
  • Zarak•60
    @zarakPosted 25 days ago

    This looks great - I love the hover effect on the entire card!

    You might be able to organise your CSS slightly better by using variables for things like colours and spacing. The solution looks quite similar to the design. You didn't neglect to include the solid border on the card like I did, so you definitely have an eye for detail. Great work!

    0
  • Zarak•60
    @zarakPosted 27 days ago

    Hi!

    The card could use a bit of a box-shadow to look more like the design spec. The border radius could be a little higher for the card as well, as the design seems to have rounder edges. The border-radius of the image itself looks good though! The h1 font size is a bit small compared to the design. You could also experiment with giving it a font-shadow.

    Apart from that, the colours look good! And the font styles are correct. You may wish to experiment with the line-height but that might be a minor detail. You could try using CSS variables for the colours, although for a project this small it's probably not needed.

    Great work!

    0