Blog Preview Card using html, css flexbox

Solution retrospective
I'm most proud of how clean and visually accurate the design turned out, especially the box shadow, border radius, and overall layout. It helped me solidify my understanding of CSS fundamentals.
Next time, I would improve the responsiveness of the design for different screen sizes and consider using semantic HTML tags more carefully, I'd also explore using CSS variables or a utility framework like Tailwind CSS to speed up styling and keep the code DRY.
What challenges did you encounter, and how did you overcome them?One of the main challenges was getting the box border and shadow to match the design exactly. It took a few tries to adjust the box-shadow, and padding to make it look right. I overcame this by inspecting similar designs, testing different values, and using browser developer tools to preview changes live.
I also faces some alignment issues with the text and image at first, but reviewing the box model and practicing with margin and flexbox helped me fix those quickly.
What specific areas of your project would you like help with?I'd like help improving the responsiveness of the layout, especially making it look good on smaller screens. I'm also open to feedback on how to write cleaner, more maintainable conventions or structuring the CSS more efficiently. Additionally, suggestions on how to enhance accessibillity and semantic HTML, would be greatly appreciated.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Adam Abdallah's solution.
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