3-column-preview-card-component-main

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @audinastgg,

  Congratulation on completing this challenge,

  I have some suggestions regarding your solution:

  HTML

  • About <h1> it is recommended not to have more than one h1 on the page .You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). Then you can use <h2> instead of those <h1>.

  • For any decorative images, each img tag should have empty alt="" as you did and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images . In this challenge , all the images are decorative.

  • Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right. And for future, it is essential if you include a button in a form element without specifying it's just a regular button, it defaults to a submit button, so it's a good idea to make a habit of specifying the type. So use the <a> .

  • To make the card perfectly in the middle of the page, you can make the body element as a flexbox container and give it min-height: 100vh.Remove the margin

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

  • If you make each column into a flex column. and set everything inside the cards to have some margin in one direction margin-bottom: ;.only the link wouldn't need it and use margin-top: auto on the learn more link that will push it to the bottom of the cards.

  • It's recommended to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

  On the hover on the links , they go up . It's not normal . so for that you can use border:2px solid transparent ; for .btn and on the hover they will be border:2px solid white;.

  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.

  • Check the responsiveness again .

    hopefully this feedback helps.

  Marked as helpful

  0