Skip to content
Submitted almost 3 years ago

Using CSS flexbox

Nightcode16ā€¢110
@Nightcode16
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've finished another one šŸ˜. Any suggestion on my code?

Community feedback

  • Vanza Setiaā€¢27,775
    @vanzasetiaPosted almost 3 years ago

    šŸ‘‹ Hi Nightcode16!

    šŸŽ‰ Congratulations on finishing this challenge! I hope that you had fun building it! I have some feedback on this solution:

    • Accessibility
      • šŸ‘ Well done on using main and footer landmarks correctly!
      • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (by using Tab key) easily.
      • Every page should only contain one h1. In this case, make all the h1 to h2 instead and if you want, you can have a hidden (visually) h1 (commonly known as sr-only styling).
    <body>
  <main>
    <h1 class="sr-only">3 column preview card component challenge</h1>
    the card content goes below the heading one...
  </main>
</body>
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
    • Changing the html or root font size can cause huge accessibility implications for those of the users with different font size or zoom requirements. Read what an accessibility expert (Grace Snow) has said about it.
    • Styling
      • For padding, I strongly recommend using rem or em unit instead vh unit because it can give an unexpected result (may be too big or too small depending on the user screen size).
      • I would recommend giving a max-width on the main element to prevent the cards become too wide on the large screen.

    That's it! Hopefully, this is helpful!

    Marked as helpful
    0
    Nightcode16ā€¢110
    @Nightcode16Posted almost 3 years ago

    @vanzasetia thank you very much it was really helpful šŸ’—

    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