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 using HTML and CSS

Sonali Negiβ€’ 130

@SONALI-NEGI

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


What are you most proud of, and what would you do differently next time?

.

What challenges did you encounter, and how did you overcome them?

.

What specific areas of your project would you like help with?

.

Community feedback

rayaβ€’ 2,850

@rayaatta

Posted

Hi Sonali-negi, congratulations on completing this challenge πŸŽ‰ I have some tips you might find useful.

1 Every html document must have a main tag that encloses the main page content. Change <div id="card"> to <main id="card"> using semantic markup improves SEO* and user experience for people using assistive technology like screen readers. You can learn more about the main tag in this articleπŸ“°. 1 In order to make your card more responsive, Do not use fixed sizes a you did here width: 385px; this will not display properly on screen whose width is below 385px, in order to solve this problem change this declaration to max-width:min(90%,385px) This means that when a screen is can't display 385px,it will resize the card to 90% of the available width. You can check out this article

Your solution is awesome🀩

Happy coding πŸ™ƒ

Marked as helpful

0

Sonali Negiβ€’ 130

@SONALI-NEGI

Posted

@rayaatta , Thank you so much for the constructive feedback and valuable tips! 🌟 I appreciate your recommendation, and I have made these changes. I'm glad you liked the solution! πŸ₯³

Happy coding to you too! πŸ˜ŠπŸ‘©β€πŸ’»

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