Product card made with flexbox, and design firts mobile (CSS+BEM)

Community feedback

• 

  Criztian Jade M Tuplano•140

  @CriztiandevPosted almost 2 years ago

  Hey 👋, the report notice that you havent put alt element to your image tag, I encourge you to always keep alt tag to the image for several reasons, first what is alt?

  "alt", also known as alternative text or alt descriptions, is an HTML attribute that is used to describe the contents of an image in a web page. Including alt text in an <img> tag is important for several reasons:

  1. Accessibility: Alt text provides a text description of an image for users who are visually impaired or use screen readers. This helps ensure that everyone has access to the information on your website, regardless of their ability to see the images.

  2. SEO: Search engines cannot see images, but they can read the alt text. Including descriptive alt text can improve the visibility of your website in search engine results and make it easier for users to find your content.

  3. Usability: If an image fails to load for any reason, the alt text will be displayed in its place. This helps ensure that users can still understand the context and content of the image, even if it is not displayed.

  4. Improved User Experience: Alt text also helps to provide context for images and improve the overall user experience on your website. By describing the contents of an image, you can give users a better understanding of what the image represents and why it is important.

  In summary, including alt text in your <img> tags is an important best practice for web development. It helps to make your website more accessible, improve search engine visibility, ensure that your content is still accessible if images fail to load, and improve the overall user experience.

  Marked as helpful

  0

  ---

  

  YanlDev•170

  @YanlDevPosted almost 2 years ago

  @Criztiandev thank you, I will always take into account the accessibility of the resources I use for my future web projects.

  0
• 

  Muhammadh•1,140

  @Mr-jawPosted almost 2 years ago

  Hello 👋

  Here are some tips that you can use to improve accessibility and better practice

  HTML 📄

  • replace <p> with <h1> in <p class="card__paragraph subtitle">PERFUME</p> since it is the main heading of the component. And we don't usually use <p> to display short texts. In this case, since it is the important text preferably using <h1> is better

  • and replace <h1> with <h2> in <h1 class="card__title">Gabrielle Essence Eau De Parfum</h1> since we gave the <h1> for the PERFUME text we can give this a second-level heading which is <h2>

  • as i mentioned above avoid using <p> to display short texts (i.e <p class="card__best">$149.99</p> and <p class="card__worse">$16.9.99</p>). In this case, you can use something like <em>, <strong>, or <small>. It will improve accessibility as well.

  CSS 🎨

  • It will always be a good practice to use relative units like em or rem for margin, padding, width, and height for more responsiveness. avoid using px which is an absolute unit.

  Other than that your implementation looks good 👍

  Great job on completing the challenge. HAPPY CODING 🔥

  0