Product preview card using HTML and CSS

Hi @jamilpl! You've done great 💪

Here are some suggestions to improve your code:

• Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.

Click here for more information

Good job, and happy coding!

Well done finishing this challenge, even though there are some area of improvement can be made.

1. Use the semantic HTML Instead of using <div class="container"> to wrap the whole content, supposed you can use <main class="container">. Because with the right and good semantic HTML, you can fix the accessibility of your website, especially for the user with visual impairment, as the semantic HTML will guide them to enjoy the content of your website.

2. In your CSS file, try consistently use 1 unit measurement, like rem, or em instead of pixels. The rem and em will help you a lot when it comes to responsive design. So, in my opinion, you should stick with rem or em units.

Overall it's nice and readable code, and also well-structured (apart from the div container wrapper), I see you trying to implement BEM, but try to look into about it further, you can learn more about BEM here.

Can't wait to see another solution submission from you, cheers mate.