product preview card component challenge using html and css

Hi there, good job on that project! If you don’t mind, I will provide you with some feedback. So I checked your code and it appears that you used <h3> tag before <h1> and <h1> is repeated twice. This is considered a mistake because when using headings we want to stick to the so - called hierarchy. You probably did it because the font size was correct but you can just change it in css in no time. We typically want to start from h1 and move our way to h6. Here is some good resource on that topic:

https://www.contentkingapp.com/academy/headings/

Aside from that the code looks good, you have good naming convention for classes, there is indentation and some good whitespace going on. Very readable and self-explanatory.

Overall great work on that project! I hope I was a little bit helpful for you. Keep going and happy coding!

👾Hello Ian Rioba, congratulations for your new solution!

As an alternative you can manage the images (desktop and mobile) with the tag <picture>to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html

If you're not familiar to the picture tag you can look the documentation to see how to setup it: https://www.w3schools.com/tags/tag_picture.asp

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!