Flexbox , responive css, visual-hidden-text , html,css.

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

Proud of: I’m most proud of the way I was able to translate the design specs into a responsive, visually appealing layout. The clean use of CSS and media queries allowed the card to look great on both desktop and mobile screens, and I made sure to focus on details like proper spacing, font sizes, and color usage.

What to do differently: Next time, I would spend more time on the planning phase, particularly breaking down the component structure and file organization. This would help me maintain cleaner and more modular code. Additionally, I’d like to explore using a CSS preprocessor like Sass to enhance maintainability for future projects.

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

One of the biggest challenges was ensuring the image and text layout remained responsive across various screen sizes. Initially, elements like the image and the card content would overflow on smaller screens. To solve this, I used flexbox and grid layouts to create a more adaptive design. I also faced some challenges with proper font scaling on mobile, which I resolved using relative units like em and rem for more flexibility.

Another challenge was debugging some alignment issues where the text content wouldn’t center correctly. I managed to overcome this by carefully adjusting padding and margins and using the align-items and justify-content properties in the parent containers.

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

I’d like help with improving the performance of the card’s image load times, particularly for slower networks. Guidance on optimizing image formats and how to implement lazy loading would be helpful. Additionally, I'd appreciate some advice on best practices for accessibility, especially in terms of making sure the card is fully navigable and readable for screen readers.