Product preview card component with HTML and CSS

Community feedback

• 

  S MD suleman•3,530

  @sulemaan7070Posted almost 2 years ago

  hey 😄, congratulations on completing your first challenge... here are a few tips to make your site better.

  1.I see that you have used .container -> height:90vh ...using height:90vh 🚫 is a bad practice you can use min-height:90vh✅ or 100vh.

  2.Using the picture element for responsively switching between Images is considered as best practice

  <picture>
    <source media="(min-width: 650px)" srcset="img_food.jpg">
    <source media="(min-width: 465px)" srcset="img_car.jpg">
    <img src="img_girl.jpg">
  </picture>
  

  more about picture element here📚

  Hope that helps, happy coding🔥🔥

  Marked as helpful

  1

  ---

  

  Kure-ru•120

  @Kure-ruPosted almost 2 years ago

  @sulemaan7070 Hi, thank you so much for your feedback!

  I learned a lot thanks to your comment! 😁

  2
• 

  Abraham•270

  @AbeeujahPosted almost 2 years ago

  Hello, Nice Solution you've got.. Here's some tips to improve it

  HTML :

  Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

  Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

  CSS : You can use Intrinsic Sizing or an accurate Extrinsic Sizing to handle Overflow on your component

  Marked as helpful

  0

  ---

  

  Kure-ru•120

  @Kure-ruPosted almost 2 years ago

  @Abeeujah Hi Abraham, thank you so much for your feedback. It's very helpful!

  1