Blog Preview Card Challenge

Solution retrospective
I'm most proud of how clean and close to the original design I was able to get the layout, especially using only HTML and CSS. The final result looks polished, and I paid close attention to spacing, alignment, and typography, which helped meet the challenge of coming as close to the provided design as possible.
If I were to do it again, I’d probably start by setting up a mobile-first responsive structure so the design adapts to different screen sizes better - when looking at the mobile version it looks a little bit bigger than it does in the provided examples. I’d also consider using a CSS preprocessor or utility framework like Tailwind CSS for faster styling, which is something that I'm currently looking into offline.
What challenges did you encounter, and how did you overcome them?One challenge I faced was making sure the layout remained vertically centered while also allowing the attribution text to sit below the card instead of being centered along with it. Initially, the attribution was stuck in the middle of the screen due to flexbox settings on the body. I solved this by switching the layout to a column-based flexbox and adjusting padding and height to allow natural flow.
What specific areas of your project would you like help with?I’d love some feedback on how to make the layout more responsive, particularly for smaller mobile devices and large desktop screens. Additionally, I’m curious about best practices for accessibility in a design like this. For example, are there ARIA attributes or semantic improvements I should be including to make the preview card more screen-reader friendly?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @jacobkho
I think that your code looks clean and well formatted and easy to read. I think that if we were to get nit picky I would look into semantic html so that your code is even easier to read as they give guidance on how to label your divs.
I'm also new to coding and starting for mobile first is backwards to me but makes a lot of sense as we mostly use our phones for web viewing.
Marked as helpful
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