Blog preview card using flexbox

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 6 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. Make .container a <main>.

  • Use class instead of id.

  • Headings should always be in order, so you never start with a <h3>. The main heading for a page should be an <h1>. However, this card would likely be one of several components on a page - hence it should be a <h2>, as there can be only one <h1>.

  • Change the alt text on the profile image to "Headshot of Gary Hooper".

  • "Greg Hooper" is a <p>.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • Remove padding-top on .container.

  • Add min-height: 100svh on body, so the card gets centered vertically.

  • Except for the profile image, remove all widths and heights.

  • Add a max-width of around 20rem on the card, to prevent it from getting 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.

  • Add display: inline-block on "Learning", so it doesn't take up the full width. Add padding to create space around between the text and the border.

  • Remove the margin-left and margin-right - instead, add padding on all sides of the card:padding: 1rem.

  • On the top image, remove the margin. Add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

  0
• 

  A T Shakib•60

  @atshakibPosted 6 months ago

  j

  0