Blog preview card

Community feedback

• 

  raya•2,870

  @rayaattaPosted 11 months ago

  Hi congratulations on completing this challenge 🎉 I have some tips I think you might find useful.

  1.Your html needs to be more semantic to improve accessibility and SEO is not so good because

  a) <div> is used for sectioning content but it has no semantic value, people using assistive technology like screen readers would not understand what information it portrays take a look at this

  <div class="date">
         Published 21 Dec 2023
       </div>
  

  The text inside should be wrapped inside a <p> element.

  b) 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 click here 2. a) I noticed that you used height:100vh; on your body but this limits the body's height on mobile devices in land scape mode, you should therefore use min-height:100vh; b) Since you used position absolute on the aside. This blocks content on devices with small screes or in land scape mode. You should therefore add position: relative To the body so the footer is absolutely position relative to the parent(body) instead of the view port hence no content blocked. I hope this helps

  Other than that Your project looks awesome 🤩

  Marked as helpful

  1

  ---

  

  OscarC•20

  @OscarCasEscPosted 11 months ago

  Thank you! @rayaatta. I appreciate your comments, I have added changes with your recommendations

  1
• 

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @OscarCasEsc 👋. Good job on completing the challenge!

  I have some suggestions about your code that might interest you.

  General Structure and HTML:

  • Consider using <span> or <time> instead of paragraphs for elements that are not actual paragraphs like "Learning" and "Published...".

  CSS and Styling:

  • Implement CSS custom properties to define and utilize project colors more easily.
  • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
  • Instead of fixed widths, employ max-width and min-width for flexible and responsive design.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".
  • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Greg Hooper".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  1