![](https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_900/Screenshots/cykixedirhbjza3oamao.jpg)
Design comparison
Solution retrospective
I built a responsive blog preview card as part of the Frontend Mentor challenge. The card displays an article's title, publication date, author, and description in a visually appealing way. I used HTML and CSS for the structure and styling. The card has a modern design with rounded corners, shadows, and flexible layout. This project helped me practice creating responsive designs and structuring content effectively.I learned how to use Flexbox to center content on the page, which made the layout responsive across different screen sizes. I also improved my understanding of box-shadow and border-radius properties to give the card a clean and modern look.
What challenges did you encounter, and how did you overcome them?One of the challenges I faced was making the design responsive while maintaining proportions across devices, which I resolved by adjusting padding and max-width settings. This project deepened my understanding of CSS design principles and how to structure components more efficiently.
What specific areas of your project would you like help with?I would like help with optimizing the responsive design of my project, particularly for smaller screens such as smartphones. While the card layout adapts to larger devices, I feel the spacing, padding, and text scaling could be further refined to improve readability and overall presentation on mobile. Additionally, I'd appreciate guidance on improving accessibility features, such as ensuring adequate color contrast and implementing best practices for screen readers. Lastly, any advice on performance optimization—especially for minimizing page load times and handling assets like images more efficiently—would be greatly appreciated to enhance the user experience across different devices.
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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