Blog Preview Card

Community feedback

• 

  raya•2,850

  @rayaattaPosted 10 months ago

  Hello 👋Vanessa Ayer, Cool 😎 solution.

  I have some simple tips you make ght wanna need.

  1 The avatar image should have an alt attribute with the name of the person on the pic.i.e alt="Greg Hooper" Alt attributes should not contain words such as picture,photo,image,headshot etc as these are indicated by the image tag itself.

  2 I noticed font-size: 16px; in your code. You should never use pixels when setting font related properties. Setting font sizes in pixels causes accessibility problems with people who adjusted their default font sizes on their computers.

  The best units for setting font size are relative units such as rem and em which can adjust with the user preferences. Checkout this article why font size should never be in pixels

  3 In your html I noticed

  <p class="published-date">Published 21 Dec 2023</p>
  

  When a screen reader is reading the above it will pronounce 21 Dec 2023 as it is. This should be wrapped in

  <time datetime="2023-12-21">21 Dec 2023</time>
  

  This is machine readable therefore it is more accessible. To find out more about the time tag check out this article📑.

  I hope this helps 🙃

  Your solution looks great 😉

  Happy coding ✌️

  Marked as helpful

  3

  ---

  

  P

  Vanessa Ayer•90

  @vanessa-ayerPosted 10 months ago

  @rayaatta Very helpful! Updated the alt text and value units for the font size to em! :) working on #3 for future use!

  Thank you!

  2
• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 10 months ago

  Hey, well done :) Here are a few suggestions.

  HTML:

  • The main heading on this card is "HTML & CSS Foundations", so change that into a <h1>. "Learning" is not a heading, it's more like a "subject-tag" - it could be a link, or just a <p>.

  • I would wrap the date in a <time> tag and add a datetime attribute, like this: <time datetime="2023-12-21">21 Dec 2023</time>.

  CSS:

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

  • Remove margin: 0 auto on .container - it is already centered using Flexbox on the body.

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

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

  • Media queries should not be in px, but in rem.

  Marked as helpful

  2

  ---

  

  P

  Vanessa Ayer•90

  @vanessa-ayerPosted 10 months ago

  Thank you so much @Islandstone89! Very helpful! Applying those updates as we speak 😊👍 much needed

  1