Blog preview card

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 7 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. Change .container into a <main>.

  • I would use the <img> element for the top image.

  • "Learning" is not a button, but a paragraph. Give it a display: inline-block and some padding.

  • Remove "Learning" in front of the published date. The published date is also a <p>, and I would wrap the date in a <time> element:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>. If it were a heading, it could not be a <h4>, as headings must always be in order.

  • As this is a blog card, the heading needs a link inside.

  • Do not use words like "image" in the alt text. Screen readers start announcing images with "image", so an alt text of "authors image" would be read like this: "image, authors image". Change it to "Headshot of Gary Hooper".

  • Make "Gary Hooper" a <p>.

  CSS:

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

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

  • Move the properties on.container to .card. Remove display: flex and the margin, as well as the width and height.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • To center the card horizontally and vertically, I would use Flexbox on the body:

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

  • Except for the profile image, remove all widths.

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

  • Images needs display: block and max-width: 100%- the max-width prevents overflowing of the container. Add some border-radius in either rem or px.

  • I'm not sure you need a media query for this challenge. Remember to have them in rem instead of px when you use them.

  0