Product Preview Card Component

👾Hello Sidessh, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

1.To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem here's the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

2.Something that can be a time saver for you is to use a CSS RESET to remove all default settings for 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 Siddesh, congratulations on completing the challenge! 🚀

Just a few points I've noted in your design:

• Adjust the line-height of your h1 element so as to reflect the given design better.
• Use some other tag than <article> for your image section so as to be more semantically correct.
• The card takes up more than the view height on mobile view. You can fix this by adjusting the padding, font-size and margin of your text content.
• Maybe utilize a mobile first design strategy next time.

That's all I have to offer. I hope it helps. Thank you!

Hello Sidessh More, Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

• You might want to use semantic tags like the <main> to wrap your code, instead of div. like

<main>
<div></div>
</main>

This would help improve accessibility.

• I saw in the style.css that sometimes you use px & rem. To optimize your speed when resizing fonts for various displays and devices, substitute rem or em rather than px. These components work better to improve the accessibility of your website. REM applies to all sizes, not just the font size.

I hope this helps you. Happy Coding!