3 column preview card

Community feedback

• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 12 months ago

  Hey, Armoretech!

  Your project looks nice!

  Here's one tip:

  You can place your card in the middle of the page doing this:

  body {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  

  Hope it helps!

  Marked as helpful

  2

  ---

  

  ARMoretech•90

  @ARMoretechPosted 12 months ago

  Thanks alot@danielmrz-dev

  1
• 

  P

  Øystein Håberg•10,490

  @Islandstone89Posted 12 months ago

  Hi, here is some feedback.

  HTML:

  • You need a <main>, this is important for accessibility. It can also be the container here, meaning the element that wraps all the cards.

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

  • Do not use <br> to wrap the text. All styling should be done in the CSS.

  • .heading should, as you imply, be a heading. Since there are several headings, they should all be <h2>.

  • Remove the input around "Learn More`` - it would navigate to another page, so it's only a link.

  • .attribution should be a <footer>.

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

  CSS:

  • Use the style guide to get the correct fonts to use.

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

  • Remove flex-wrap on body, and add flex-direction: column and min-height: 100vh.

  • Remove all text-align: left as that is the default value.

  • Font-size must never be in px. Use rem instead.

  • Remove font-family: para and font-family: head - these are not valid values.

  • Remove the fixed width and height on the cards. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.

  • Add a max-width in rem on the container(<main>), to prevent it from getting too big on larger screens.

  Hope this is helpful - good luck!

  Marked as helpful

  1