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?