3-column preview card component | HTML, SCSS

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 8 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 a page's "main" section. Wrap .container in a <main>.

  • The icons should be placed using the <img> element, with an empty alt text, since the icons are decorative: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:

  • Remember to constrain the width of images in your CSS Reset:

  img {
    display: block;
    max-width: 100%;
  }
  

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

  • To center the card container, put this on body:

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

  • Remove the margin on .container.

  • Remove the width and height on the cards.

  • Give the card container a max-width in rem, so it doesn't stretch too wide on larger screens.

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

  • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

  • Media queries must be in rem or em, not px.

  Marked as helpful

  0

  ---

  

  Akanyu•170

  @readj4vvatPosted 8 months ago

  Thank you for your kind advice.

  1