Skip to content
Submitted 7 months ago

Responsive Blog Preview Card using HTML & CSS

Keerty Verma•20
@keertyverma
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • I'm most proud of the clean and semantic HTML structure I implemented, ensuring accessibility and ease of understanding for other developers.
  • Additionally, using CSS custom properties and the BEM model helped maintain a modular and scalable codebase.
  • However, next time, I would focus more on optimizing performance by improving image loading techniques for better page speed.
What challenges did you encounter, and how did you overcome them?
  • One challenge was to achieve the desired layout responsiveness while maintaining code readability and maintainability.
  • To overcome this, I followed a mobile-first approach, utilizing flexbox for layout and employing media queries to adjust styles for different screen sizes.
What specific areas of your project would you like help with?
  • I would appreciate suggestions for enhancing the design and user experience.
  • Finally, feedback on accessibility improvements beyond basic semantic HTML would also be welcomed.

Community feedback

  • Sayeed Munees•130
    @sayeedmuneesPosted 7 months ago

    Amazing, it looks so accurate to the actual design. I think you forgot to add box-shadow transition when hovering over the card.

    Marked as helpful
    1
    Keerty Verma•20
    @keertyvermaPosted 7 months ago

    Thanks @sayeedmunees for the feedback. I appreciate your attention to detail. I have made the required changes to my solution.

    1
    Sayeed Munees•130
    @sayeedmuneesPosted 7 months ago

    @keertyverma Glad you did it, GL in your coding journey

    1

Please log in to post a comment

Log in with GitHub

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