3-column preview card component

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 10 months ago

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Make flex-container a <main>.

  • The icons are decorative, so the alt text should be empty: alt="". When you do need alt text (on meaningful images), never use words like "image" or "photo" - screen readers automatically recognize it as an image.

  • 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.

  • .attribution should be a <footer>.

  • The footer text needs to be wrapped in a <p>.

  CSS:

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

  • If you want zero margin on the body, write it like this: body { margin: 0; }

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • line-height must also never be in px. You can use %.

  • Remove the widths and heights.

  • Add a max-width in rem on the card container, to prevent it from getting too wide on larger screens.

  • p has a default value of font-weight: 400, so there is no need for that declaration.

  • Media queries should be in rem, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens (min-width instead of max-width).

  0