Submitted about 2 years ago

Product Preview Card Component Using HTML/CSS

Markus• 240

@mhjarvis

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I would love any feedback on best practices - am I making things too complex or, are there better approaches I could get familiar with? Thanks for any feedback!

Community feedback

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

👾Hi Markus, congrats on completing this challenge!

Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:

You've done the design for the wrong image, when you download the starter files the folder comes with 3 files (preview card, desktop and mobile) you've created the solution based on the preview and you should consider only the mobile + desktop images.

Remove the background-color from the container and add it to the body to make sure this color background will display it full screen.

Something you can do to improve the image that needs to change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. 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

Markus• 240

@mhjarvis

Posted about 2 years ago

@correlucas Thanks Lucas. I'm looking into the <picture> element as I've not used it before!

バレンタイン 😈• 64,190

@VCarames

Posted about 2 years ago

Congrats @mhjarvis on completing this challenge!

Your card looks good!

To clean up your code and make it semantically correct, you can set you your code in this manner:

   <body>
      <article>
        <picture>
          <source media="(min-width: )" srcset="" sizes="" />
          <img src="" alt="" />
        </picture>
        <div class="Main-Content">
          <span></span>
          <h1></h1>
          <p></p>
          <div>
            <p>Current Price</p>
            <p>Old Price</p>
          </div>
          <button></button>
        </div>
      </article>
    </body>

Marked as helpful

Markus• 240

@mhjarvis

Posted about 2 years ago

@vcarames Thanks for the feedback, looking into this and will start using these in my projects!

バレンタイン 😈• 64,190

@VCarames

Posted about 2 years ago

@mhjarvis I updated the code with more detail... I wrote the first one last before before going to sleep

The new one shows the <picture> element. Its better to use this element when using picture that need to be responsive between mobile and desktop (and vice versa)

Heres more info on it **https://www.w3schools.com/html/html_images_picture.asp

Marked as helpful

Markus• 240

@mhjarvis

Posted about 2 years ago

@vcarames Gotcha, thank you. Lucas mentioned the <picture> element as well, so I need to look into using it.

Please log in to post a comment

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