Responsive Blog preview card

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

I'm proud of my perseverance in making the website responsive. Despite facing challenges and struggling to find the right solutions, I remained committed to ensuring that the site looked and functioned well across different devices.

Next time, I would approach the problem with a more proactive mindset. Instead of hesitating and overthinking my options, I would experiment with the various solutions I come across more readily.

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

One of the main challenges I faced was making the card component responsive without relying on media queries. This was particularly difficult as I wanted to ensure that the design remained consistent across various screen sizes.

To tackle this challenge, I utilized the calc() function along with viewport width (vw) units to create a width-based responsive solution for the font sizes. This allowed the text to scale appropriately with the card's size. Additionally, I implemented min-width and max-width properties for the card itself, ensuring that it maintained a visually appealing layout regardless of the screen size.

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

I would appreciate guidance on improving the HTML structure of my project to enhance accessibility. Any best practices or recommendations for semantic HTML and ARIA roles would be very helpful.

I’m looking for advice on how to create more maintainable styles: any tips on organizing CSS, would be valuable.

If there are simpler or more efficient methods to achieve responsive design for the card and font sizes, I would love to hear about those.