Blog preview card

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 🤩

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!