Skip to content
Submitted over 2 years ago

3-column-preview-card-component-main

Josh•40
@jokings
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

Hello guys, I just completed this challenge

Any feedback is welcome. Thanks

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    Hello Josh,

    Great work on this one! I have some suggestions regarding your solution:

    HTML

    To tackle the accessibility:

    • You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

    • Use the <footer> landmark to wrap the attribution, as using landmarks is important improve navigation experience on your site for users of assistive technology.

    • In this challenge , all the images are decorative. 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 .

    • Imagine what would happen when the user click those learn more? Clicking those "learn more" would likely trigger navigation not do an action so button elements would not be right. So you should use the <a>. For future use , it's a good idea to make a habit of specifying the type of the button .

    And it is essential that interactive elements have focus-visible styles as well as hover styles. These need to be really clear and obvious as they are needed to help a keyboard user know where is focused on the page.

    CSS

    • border-radius andoverflow hiddento the main container that wraps the three cards so you don't have to set it to individual corners.

    • Consider using min-height: 100vhto the body, that will let the body grows taller with the component outgrows the visible page.

    • In order to center the card on the middle of the page , you can use the flex or grid properties and min-height: 100vh to the ``<body>`. Add a little padding to the body that way it stops the component from hitting the edges of the browser.(remove the margin from the <main>)

    General point: Really important to keep css specificity as low/flat as possible. The best way to do styling purposes is single class selectors.(not IDs as IDs have a much higher specificity than classes) IDs have many uses in a webpage aside from being a CSS selector. For example as page anchors, fragment identifiers or to link labels to form fields.

    • There are so many repeated style rules , better to use reusable classes.

    Aside these, your solution is good. Hopefully this feedback helps.

    Marked as helpful
    0
    Josh•40
    @jokingsPosted over 2 years ago

    @PhoenixDev22 Thank you very much I really do appreciate this feedback

    1
    PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    @jokings You’re welcome

    Marked as helpful
    0

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