Skip to content
Submitted almost 2 years ago

Product card using flexbox

Ayomide Olaniyan•50
@Ayomidejhay
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I'm open to corrections in all areas and best practices.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Ayomide Olaniyan! 👋

    Here are some possible improvements.

    • Alternative text should not be hyphenated.
    • Those car icons are decorative images. So, leave the alternative text empty.
    • Remove <div class="container"> and <div class="box-container">. Use <main> element instead as the container of the cards.
    • Set max-width to the container of the cards instead of width.
    • Remove <div class="button">. You don't need to make the <button> as a flex child element.
    • <button> element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons
    • Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.
    • Remove min-width: 100vw from the <body> styling. It is not needed.
    • Don't remove the outline of the <button> elements. Keyboard users rely on the outline as the focus styling to know where they are currently at the page. Learn more — Quick tip: Never remove CSS outlines

    I hope this helps. Happy coding! 😄

    Marked as helpful
    0
    Ayomide Olaniyan•50
    @AyomidejhayPosted almost 2 years ago

    @vanzasetia Thanks a lot for the corrections

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord