Skip to content
Submitted almost 3 years ago

Product Preview Card using HTML and CSS

Andrew•20
@am4188
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Any general tips for improvement would be really appreciated. This is my first project here and I know the code is a mess so I'm sure there's a lot of room to improve. Also, I started with the desktop version and then worked on the mobile (and was later told that it's best to do the desktop version first)-- when I started working on mobile, the button was the only part of the bottom div (.preview) that was out of the position with part of it outside of the container. I tried to fix it properly but couldn't figure out the root cause so I just added some negative margins on the left side. Any idea why it was leaking out of the container in the first place?

Code

Please log in to post a comment

Log in

Community feedback

  • Chamu•13,820
    @ChamuMutezva

    Greetings Andrew and welcome to Frontend Mentor.

    HTML

    • use semantic elements such as header, main , footer etc instead of traditional elements such as divs. Semantic elements makes your site accessible among other things. Those are some of the issues that have been raised in the automated feedback.
    • when you are given images for various screen sizes , the recommended methods to display those images accordingly falls under responsive images. You can find out more here on mdn responsive images. Using css to hide and display images is not one of them - it is considered expensive for the user as it wastes bandwidth on the images that the user will not see.
    • it is very important for a site to have a heading element with the h1 being the first heading element and following a sequential order without skipping headings

    CSS

    • The body has height: 100vh - that restrict your content so that you can scroll the page if the content does not fit on the page. Changing it to min-height: 100vh will fix that issue. Apply paddings as well on the top and bottom to have some space between the body and the content
    • font sizes should not be in px , rather use rems. px values create serious accessibility barriers such as overruling the font size preferences set by users. You can get a detailed explanation here Why designers should move from px to rem (and how to do that in Figma)

    Happy coding

    Marked as helpful
  • Kate•170
    @YayoKB

    I've only glanced at this for a bit so forgive me if this isn't incredibly constructive or helpful. :)

    1. You're using fixed widths (pixels instead of rem / em or vh, vw etc). This decreases the levels of accessibility and responsiveness, too.
    2. I haven't come across using spans the way you did. Is there any reason you did so?
    3. For some reason, .preview does not follow the same widths as its parent. That is why your button has strange sizing - it's simply following .preview which is bigger than your .container. I could be wrong though - I'm just starting out on here too.
    Marked as helpful

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