Responsive 3-column preview card component using HTML and CSS

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted about 1 year ago

  HTML:

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

  • There should only be one <h1> at a page. Change them into <h2>.

  • Remove the .empty. Use margin or padding when you want space between elements.

  • "Learn More" would navigate you to another page, so it should be a link.

  • .attribution should be a <footer>.

  • The text in the footer must be wrapped in a <p>.

  CSS:

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

  • Performance-wise it's better to link the fonts in the head of the HTML instead of using @import.

  • There shouldn't be a transition on every element. You can use a transition on the :hover.

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

  • Remove all positioning.

  • Remove all percentages.

  • max-width on .container should be in rem.

  • Media query should also be in rem.

  • Put this on the body, outside the media query:

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

  • Remove margin: 30px auto on .container.

  Good luck 🙂

  Marked as helpful

  0

  ---

  

  Joseph Uchechukwu Kingsley•120

  @KingsleyChukwuPosted about 1 year ago

  @Islandstone89 Thanks so much for the feedback. I will effect the necessary corrections..

  1