Blog card preview challenge

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 8 months ago

  HTML:

  • Remove the commented text.

  • 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. Wrap the card in a <main>.

  • Always use the alt attribute on images. Decorative images, like the top image, should have empty alt text:alt="". The profile image needs a short, descriptive sentence, like "Headshot of Gary Hooper".

  • "Learning" is not a button, but a <p>.

  • Use the <time> element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

  • Headings should always be in order, so you never start with a <h3>. Change it into a <h1>.

  • Change .avatar to a <div>, and wrap "Gary Hooper" in 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.

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • Remove all widths and heights. You can give the profile image a fixed size.

  • 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 and add some padding on "Learning".

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

  0

  ---

  

  Azizbek Dulobov•150

  @azizbektest011Posted 8 months ago

  @Islandstone89 ok thank you for your thought

  1