3-Column Preview Card

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Welyn Cespedes ,

  Congratulation on completing this challenge,

  Excellent work! I have few suggestions regarding your solution if you don’t mind:

  HTML

  • To tackle the accessibility issue: Page should contain <h1>. In this challenge , as it’s not a whole page , you may use <h1> with the class sr-only which is visually hidden but present for assistive technology.

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

  • Imagine what would happen when the user clicks on those learn more ? Clicking those "learn more" likely would trigger navigation not do an action so button elements would not be right.

  CSS

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

  • Consider using rem for font size. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  • To center the component on the middle of the page, You can use the flex or grid properties and Use min-height: 100vh to the body.

  • Really important to keep css specificity as low/flat as possible. The best way to style the html elements is single class selectors.

  • There are so many repeated styles (like the ones have the cards in common or the ones have the links in common ) , so consider using reusable classes for that

  Overall, your solution is great. hopefully this feedback

  Marked as helpful

  0

  ---

  

  Welyn Cespedes•50

  @Smailer022Posted over 2 years ago

  @PhoenixDev22 Thank you very much for the advice, I will keep it pending for the next projects

  1