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. Change .container to a <main>.

  • It's best practice to use classes instead of IDs.

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

  CSS:

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

  • To center the card container horizontally and vertically, use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  

  • Hence, you can remove the marginfrom the card container.

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

  • You don't need to declare flex-direction: row, as that is the default value.

  • Similarly, the default font-weight on paragraphs is 400, so no need to declare it.

  • Remove all fixed widths and heights.

  • max-width should not be in percentages, use rem.

  • "Learn More" should have cursor: pointer.

  • Media queries should be in rem instead of px. It is common practice to do mobile styles first and use media queries for larger screens.

  0