Product-preview-card-component-solution

hey @samarth. congratulations on finishing the project. I have gone through your code and have some suggestions. To start with its not proper to put your main content in a div and in a span tag. Semantic tags make it clear to the browser what the meaning of a page and its content is. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries. For the main content. you could use the main tag as a container so that you can be able to flex the items that you have. please go through this playlist it will give you a better idea on the Semantic HTML and all the basics that you need.https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G

1. border-radius is the css property that makes the curved edges.
2. for the button to be small. in html instead of using a p tag . instead use button . then manipulate it to the desired size using margin and padding.

happy coding!

you have to put the image and text in container and grid them for edges use border radius

Hi Samarth Kulshrestha, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

As you know this page is just a component, so it doesn't even need an h1! because we don't know how important the other components of the site will be! but it's always good to prevent accessibility errors so I think it would be good for you to add an h1 in this component, besides being a good practice for when you are developing larger sites, don't worry forget about h1.

If we see how the layout is behaving at higher resolutions, with the help of google dev tools, we will see that it is stretching a lot, to solve this we can use a max-width with the value we want the content to stop growing and to center use a margin: 0 auto;

The rest is great!

I hope it helps... 👍

Hello, @samarth0605. First, you have to put the image in one block element such as <picture>, and the text content in another block element such as <div>, and then you put the two into a container, you can make edges by border-radius propriety and overflow propriety on the container, then align them by CSS grid. ... Good luck.

👾Hello @samarth0605, Congratulations on completing this challenge!

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

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!