Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pug JS, SCSS preprocessor, CSS Grid, CSS Flexbox

@krypton225

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

raya 2,850

@rayaatta

Posted

Hello 👋Khaled Mohamed, congratulations on completing this challenge 🎉.

I have some suggestions you might find interesting.

1 In your html I noticed

<p class="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📑.

2

a The alt tag should not contagious n the word image. Replace alt="Image avatar of the box." with alt="Greg Hooper"

b Since the illustration image is decorative its alt attribute should be left empty.

"Images with no semantic meaning—such as those which are solely decorative—or of limited informational value, should have their alt attributes set to the empty string (""). " - Mdn webdocs

You can check out this article.

Otherwise your solution looks great 😉

Happy coding ✌️

Marked as helpful

1

@krypton225

Posted

@rayaatta

I really want to thank you for your great comment. I will do what you said in my project. Thank you very much.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord