Product Preview Card Component Solution

Community feedback

• 

  Bernardo Poggioni•6,490

  @R3ygoski

  Posted about 1 year ago

  Hello @bennahiaoualid, first of all, I'd like to congratulate you because your project looks really good.

  Regarding best practices, I recommend that you move your inline styles from the HTML to your external CSS file. This way, you enhance the organization of your HTML. Even though it's a small segment, it's always beneficial to keep everything in an external file.

  Another best practice is the use of semantic tags. I noticed that your HTML contains many <div>, elements. Try replacing them with semantic tags. For example:

  • <div class="container">, could be replaced with `<main>` since it contains the main content of your page.
  • <div class="img-holder">, could be replaced with `<figure>` since it contains the main images of your page.

  Here's a tip: use the <picture>, ag to make your images responsive without needing CSS. If you're interested, here's an example:

  <picture>
    <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width:465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
  </picture>
  

  Example taken from: W3School - Picture

  I also noticed one more thing in your HTML: be careful not to skip heading hierarchy. You jumped from <h1> to <h3>. It would be correct to have an <h2> in between so you can then proceed to <h3>.

  • W3School - Heading Levels
  • W3School - Semantic HTML

  Congratulations on completing your project! If you have any questions, please feel free to comment below, and I'll try to help in the best way possible.

  01

  Marked as helpful