Blog preview card

What are you most proud of, and what would you do differently next time?

I’m most proud of how well I was able to structure and style the layout, ensuring it looks clean and consistent across different screen sizes. The use of semantic HTML and well-organized CSS with variables for colors, spacing, and typography made the code more readable and maintainable. I’m particularly happy with how the card's design matches the original Figma design and maintains visual balance on both desktop and mobile devices.

If I were to do something differently next time, I’d pay closer attention to edge cases in responsiveness, particularly for very small screen sizes. I noticed some styling issues, like the border-radius on images, that only became apparent during testing on narrower viewports. Moving forward, I’d include more rigorous mobile testing earlier in the process and refine my approach to handling image scaling and overflow within constrained containers.

What challenges did you encounter, and how did you overcome them?

One of the biggest challenges I encountered was ensuring the design remained consistent across different screen sizes, particularly on smaller devices with widths under 375px. The issue with the border-radius on the blog image disappearing at smaller breakpoints was especially tricky to troubleshoot. Initially, it wasn’t clear whether the problem stemmed from the image itself, its container, or a combination of both.

To overcome this, I revisited my CSS, focusing on properties like overflow: hidden and ensuring both the container and the image had explicitly defined border-radius values. I also utilized object-fit: cover to ensure the image scaled correctly while respecting its rounded corners. Testing across multiple devices and refining the mobile-specific styles in my media queries ultimately resolved the issue. This process reinforced the importance of thorough responsiveness testing and double-checking how parent and child elements interact at different breakpoints.

What specific areas of your project would you like help with?

I’d appreciate feedback on how I handled responsiveness, particularly for very small screen sizes (under 375px). While I addressed the issue with the image’s border-radius, I’m curious if there are more efficient or scalable ways to handle image scaling and overflow in constrained containers. Additionally, I’d like guidance on improving accessibility, especially in terms of ARIA roles, and focus states for interactive elements. Lastly, if there are any best practices I might have missed for structuring CSS with variables and media queries to make the code even cleaner and more maintainable, I’d love to hear those suggestions.