Flexbox Product Card Preview

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • Wrap the page's whole main content in the <main> tag.

  • Having two or more h1 tags in a webpage is not recommended because it can be confusing for search engines. Search engines use the h1 tag to determine the main topic of a page. You can read more about this here 📘.

  • The element <div class="add-to-cart-button"> should be a button and not a div, since an element is considered an interactive element (buttons, links, etc).

  • In HTML it is invalid to have a title (h5) inside a <s> tag, you can confirm this with this website: https://caninclude.glitch.me/caninclude?child=h5&parent=s

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

    The word "perfume" is written as separate letters, which does not convey the meaning that this text is a single cohesive unit of content. This can be confusing for users and for screen readers, as it can be difficult to understand the meaning of the text.

    Example:

    <p>Perfume</p>
    
    p {
        text-transform: uppercase;
        letter-spacing: 0.3em;
    }
    

  • The alt attribute is used to provide a text description of the image which is useful for screen reader users, assistive technology users, and search engine optimization. Add the alt attribute to the <img> tag of the product.

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. Source 📘.

  • Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport.

  • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

    .wrapper {
        background-color: hsl(30, 38%, 92%);
        /* padding: 25vh 28vw; */
    
       /* NOTE: Using grid layout to center the component */
        min-height: 100vh;
        display: grid;
        place-content: center;
    }
    
    .card {
        display: flex;
        overflow: hidden;
        border-radius: 16px;
       /* NOTE: Use this to prevents the element from becoming larger than the specified value*/
        max-width: 600px;
    }
    

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

  Happy coding!

  Marked as helpful

  1

  ---

  

  Luzefiru•80

  @LuzefiruPosted almost 2 years ago

  @MelvinAguilar a huge help and I wish I had posted my solution earlier into my journey to learning CSS.

  I'll keep these in mind in my future projects. Thank you!

  0