Skip to content
Submitted about 2 years ago

Product Preview Card using HTML and CSS

Sandesh G.C.•60
@gcsandesh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello @SandeshGC, Congratulations on completing this challenge!

    Your solution its almost done and I’ve some tips to help you to improve it:

    Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

    Using <picture> you’ve more control over the elements and its better than using the product image as <img> or background-image. Look that for SEO and search engine reasons it isn't a better practice to import this product image with CSS since this will make it harder to the image. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    1
    Sandesh G.C.•60
    @gcsandeshPosted about 2 years ago

    @correlucas Thank you for your feedback, I will work on it!

    0
  • バレンタイン 😈•64,190
    @VCaramesPosted about 2 years ago

    Hey @SandeshGC, great job on this project!

    Some suggestions to improve you code:

    • For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

    • When using buttons/links alongside the “hover” effect, you’ll run into the problem where the hover effect gets “stuck”. To prevent this, you’ll want to add the @media (hover: hover) to your CSS code and include within the query all the classes that are using the hover effect. Since not all devices support hover effects this query will then check to see if it is or not.

    When using different sized images for responsiveness, it’s far more efficient to use the <picture> element.

      <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

    https://web.dev/learn/design/picture-element/

    Happy Coding!

    Marked as helpful
    1
    Sandesh G.C.•60
    @gcsandeshPosted about 2 years ago

    @vcarames I appreciate your precious feedback. Those are new ideas to me and I will definitely consider them for my next challenge. Thank you.

    0

Please log in to post a comment

Log in with GitHub

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