Submitted almost 2 years ago

Product Preview Card

Keo Lamola• 60

@KeoLamola

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

Community feedback

Lucas 👾• 104,420

@correlucas

Posted almost 2 years ago

👾Hello @OekPhlesym, Congratulations on completing this challenge!

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

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

2.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

3.Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. 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 desktop + mobile.

Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

See the example below:

<picture>
  <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
  <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
</picture>

👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

✌️ I hope this helps you and happy coding!

Marked as helpful

Keo Lamola• 60

@KeoLamola

Posted almost 2 years ago

Hi @correlucas , thank you very much for your help. I m currently going through the docs you recommended and learning a whole from your feedback. Really appreciate your assistance.

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

Hey @OekPhlesym, some suggestions to improve you code:

To center you content to your page, add the following to your Body Element:

body {
    min-height: 100vh;
    display: grid;
    place-content: center ;
}

It us best practice to have separate files for your HTML and CSS code. It helps in keeping your code organized and easier to maintain.
The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.
This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.

Here is an example of how it works: EXAMPLE

Syntax:

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

More Info:

https://www.w3schools.com/html/html_images_picture.asp

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

There is only one heading in this challenge and that is the name of the perfume, “Gabrielle Essence Eau De Parfum”.
Your button is not styled the way it should be; It needs take up the width of the container, needs some padding and border-radius.

Happy Coding! 👻🎃

Marked as helpful

Keo Lamola• 60

@KeoLamola

Posted almost 2 years ago

Hi @vcarames, thank you for taking out your time to review my code, I really appreciate your assistance. I m following step by step on your out-line regarding fixing the code, your advice is honestly helpful. "This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this." I was battling on adding a second picture at a breakpoint, didn't think it was even possible... I m currently following the attached links attached , thank you very kind.

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