Responsive product preview card (HTML/CSS)

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • Implement a "Mobile First" approach 📱 > 🖥

  Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect on all mobile devices.

  More Info: 📚

  Mobile First

  • For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using this unit gives users the ability to scale elements up and down, relative to a set value.

  • The image’s alt tag description needs to be improved upon ⚠️. Assume that you are describing the image to a someone over the phone.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • This component requires the use of two images 🎑 at different breakpoints ⚠️. The picture element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:📚

  https://www.w3schools.com/html/html_images_picture.asp

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted almost 2 years ago

  Hi there 👋. Good job on completing the challenge !

  I have some feedback for you if you want to improve your code.

  If you have many components like this in your solution, you should consider changing your <h1> to <h2> and not to <p>, since the perfume's name can be considered the component's title, rather than another paragraph.

  However, to maintain the page's main title, you can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">Product preview cards</h1>

  Here are some suggestions:

  • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

  If you want to learn more about the alt attribute, you can read this article.

  • The aria-label attribute works very well with interactive elements such as buttons or links, but with divs or <del> it usually causes problems, for example the "Previous price" text is not read by my screen reader.

  • To avoid security issues you should use the rel="noopener" or rel="noreferrer" attribute when you use the target="_blank" attribute. This will prevent the new page from gain any kind of access to the original page. You can read more about this here.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1