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. Since the card container(<section>) is the only "main" content here, you can replace it (change <section>to a <main>) OR add the <main> as a parent of the <section>. I would use a <div> instead of a <section> if you're using <main> as the parent of the card container.

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

  • The headings should be written with normal capitalization. You then use text-transform: uppercase to change the capitalization in CSS.

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

  • You should only set one font-family on the body.

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

  • Remove width and margin on the card container. Add a max-width in rem if needed, so it doesn't get too wide on big screens. To center it horizontally and vertically, use Flexbox on the body:

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

  • Set display: flex and flex-direction: column on the card container. Change it to flex-direction: row on larger screens.

  • Media queries should be in rem instead of px. It should also switch a bit sooner - try around 50rem (equals 800px).

  Marked as helpful

  0