product-preview-card

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

I'm most proud of how I implemented a clean and responsive card layout that works well on both mobile and desktop views. I paid close attention to spacing, typography, and color contrast to ensure the design was both accessible and visually appealing. I also added hover effects and a slight animation to improve interactivity, which made the final result feel more polished and professional.

If I were to do this project again, I would start with a mobile-first approach and use CSS variables for colors and font sizes to make the code more scalable and easier to maintain. I'd also consider using BEM naming conventions or a utility-first CSS framework like Tailwind to keep my styles organized and consistent.

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

One of the main challenges I faced was aligning and centering elements both horizontally and vertically within the card, especially the avatar image and text content. It took some trial and error using Flexbox properties to get everything positioned correctly.

Another challenge was understanding how to make the layout responsive for different screen sizes. I initially relied on fixed widths, which didn’t work well on smaller or larger devices. To overcome this, I used percentage-based widths with a max-width and added media queries to better handle layout changes between mobile and desktop views.

I also had to learn how to properly import custom fonts using @import from Google Fonts and apply different font weights, which helped me match the design more closely.

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

I’d like help with improving the responsive design, especially how to make the layout adapt more smoothly between mobile and desktop views. I’m also unsure if I’m using Flexbox and spacing techniques in the most efficient way—sometimes things feel a bit messy or inconsistent.

Additionally, I’d appreciate feedback on how to organize my CSS better, including best practices for class naming, layout structuring, and how to manage hover or focus styles more cleanly.

Finally, any tips on improving accessibility (like contrast ratios, keyboard navigation, etc.) would be really helpful to make my projects more inclusive and polished.