Product preview card using Flexbox, ::before, picture and srcset

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

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

  • The best way to create two columns in CSS is to use the grid layout 📐. Using the grid layout, you can create two columns by setting the display property of the parent element to grid and then defining the number of columns you want with the grid-template-columns property.

    Example:

    <div class="container">
      <div>Column 1</div>
      <div>Column 2</div>
    </div>
    
    .container {
      max-width: 650px;
      display: grid;
      grid-template-columns: repeat(2, 1fr) /*  Creates two columns with equal width  */
    }
    

  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.

  • You could use the <del> tag to indicate the price that was before the discount. Additionally, you can use a sr-only class to describe the discount. This will help screen reader users to understand that the price was discounted.

    Example: <del><span class="sr-only">Old price: </span>$169.99</del>

  Alt text 📷:

  • 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. 📘.

  CSS 🎨:

  • Avoid using uppercase text in your HTML because screen readers will read it letter by letter. You can use the text-transform property to transform the text to uppercase in CSS.

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

  Happy coding!

  Marked as helpful

  1
• 

  Dani Feelshot•370

  @FeelshotPosted almost 2 years ago

  Congratulations on your recent programming exercise! I am sure you have worked hard and it has been a great achievement for you. Keeping up with the schedule can be a challenge, but your efforts have paid off. I'm excited to see how you develop as a programmer in the future. Good job!

  1