(Desktop) Product Preview Card Component

Community feedback

• 

  Muhammadh•1,140

  @Mr-jawPosted almost 2 years ago

  Hello there 👋

  Congratulations on completing the challenge

  I have some tips for you on improving accessibility and semantic coding.

  HTML 📰

  • avoid using the <span> tag element to display text since it is used mostly to group inline elements. You can replace the <span> tag in <span id="span-title">PERFUME</span> with the <h1> tag, and replace the <h1> in <h1>Gabrielle Essence Eau De Parfum</h1> with and <h2> tag. so you will be having a top-level heading which is <h1> and a second-level heading which is <h2>. which will improve accessibility as well

  • Avoid using hyphens or underscores in the alt attribute of the <img> tag. Since it should be humanly readable text. You are most welcome to use space

  • use <em>, <strong> or <small> tag dispplay short texts. rather that using <span> tag. i.e <span id="price-1">$149.99</span> and <span id="price-2">$169.99</span>

  Learn more about Semantic HTML here

  Learn more about Accessibility here

  CSS 🌈

  • I think you forgot to make it for mobile version. Maybe try doing that with media queries

  Nothing to say about your CSS. You have done a great job on utilizing CSS custom variables and relative units 🔥👍

  I hope this was useful 😊

  HAPPY CODING

  1
• 

  P

  Rafael Dias•910

  @rafaeldgeoPosted almost 2 years ago

  Hi Sezimar, Congratulation for you job!

  I noted the add to cart button broke the line.

  <div class="button"> <button type="submit"> <img src="./images/icon-cart.svg" alt="icon-cart" />Add to cart </button> </div>

  You could use <span> Add to cart </span>, then there will be two elements that can be organized with flex.

  I hope that I helped you!

  1