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

hitmorecode 6,270

@hitmorecode

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had problems with the image file. On small screen there was too much white space on the top and bottom of the image. Had to do a workaround it to fix it.

Community feedback

@bccpadge

Posted

Hello @hitmorecode. Congratulations on completing this challenge!!!🎉

I have a few tips to improve your solution.

When I did this project, placed the img in my index.html file and used the CSS default styles display: block; and max-width: 100%;

You can improve the publish date by using the time - The (Date) Time element

Example:

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

Here is my solution to this challenge - Blog preview card

I hope you find this useful and don't hesitate to reach out if you have any questions

Marked as helpful

0

hitmorecode 6,270

@hitmorecode

Posted

@bccpadge Thanks for the suggestion I never thought of using time like this.

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