Product Preview Component With Bootstrap

👾Hello Eddy Sea, Congratulations on completing this challenge!

Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

1.A better way to work this solution image, the product image is by using <picture> to wrap it on the html instead of using it as <img> or background-image (with the css). Using <picture> you wrap both images (desktop and mobile) and have more control over it, since you can set in the html when the images changes setting the screen size for each image.ote 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.

2.Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

✌️ I hope this helps you and happy coding!

Hi Eddy, congratulations on completing the challenge, great job! 😁

Some little tips for optimizing your code:

• add main tag and wrap the card for improve the Accessibility
• use h1 for the title instead of a p
• use min-height: 100vh to .box .row class instead of height, otherwise the content is cut off when the browser height is less than the content
• add transition on the element with hover effect
• instead of using px use relative units of measurement like rem -> read here

Hope this help! Happy coding 😉