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

Blog Preview Card

@ayushyadavz

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

P

@Islandstone89

Posted

Hi Ayush. Good job!

A few tips:

HTML:

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

  • Since this is a blog card, the heading should have a link inside.

  • Profile image needs a short, descriptive alt text, like "Headshot of Ayush Yadav".

CSS:

  • Make a habit of including a CSS Reset at the top.

  • 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.

  • max-width on the card should be in rem.

  • Media queries must also be in rem.

2

@ayushyadavz

Posted

@Islandstone89 Done and thanks for giving these feedbacks.

1

@ayushyadavz

Posted

@Islandstone89 Please check my latest Recipe Page challenge in which I've used a little bit of Bootstrap. Do check and give your suggestion/ feedbacks in comments of Recipe page challenge.

0

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