3 column preview card component

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 9 months ago

  HTML:

  • The icons are decorative, so the alt text should be empty: alt="".

  • There should only be one <h1> on a page. Given there are 3 similar headings, I would change all of them into a <h2>.

  • "Learn More" would navigate to another page, hence it is not a button but a link.

  • Delete the footer if you're not going to include it. If you do, its text must be wrapped in <p>.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • Add around 1rem of padding on the body, so the card container doesn't touch the edges on small screens.

  • This article explains why you should not change the font-size on html.

  • Remove height on img.

  • Change font-size on .attribution from px to rem.

  • Media queries should be in rem, and it is common to do the mobile styles first, then use media queries for larger screens.

  1

  ---

  

  gauravgorane•340

  @gauravgoranePosted 9 months ago

  @Islandstone89 Thank you for looking over my code. I will remember everything you said, and kindly keep checking my code so I can identify any errors.

  1