Responsive preview card using flex and grid

Hello developer! I have seen your code and it seems very good to me. Some suggestions I give you:

• Learn and research about mobile first methodology, somehow this will help you how to separate your code and in the same way it will add points in the performance of your website!
• Learn and investigate some HTML5 methodology, I recommend BEM and Utilities, they are the most used. This will help you separate your code, you will understand how the box-model is composed using these methodologies!

I hope my suggestions serve you and continue on that path you are on!

David Rodriguez

👾Hello @Pravin-hub-rgb, Congratulations on completing this challenge!

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

1.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.

2.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-dVGWpOTgWS

✌️ I hope this helps you and happy coding!

Hey there! 👋 Here are some suggestions to help improve your code:

• To identify the main content of you site you will want to encase your entire component inside a Main Element.

• Unfortunately, you used the "design preview" file which is just to show off the design. Move the background color to the Body Element to have It take up the entire screen. You will also want to move the box-shadow to the component's container.

• For this challenge you want to use the Picture Element not the Background Image Property. The Background Image Property is mainly used on decorative images

Picture Element will allow your to switch between images in different breakpoints.

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/

• The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include span element with an sr-only text explaining that this is the old price.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 👻🎃