Product Preview card

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

I’m most proud of improving my understanding and application of media queries and flexbox. This project gave me hands-on experience with creating responsive layouts, and it was rewarding to see the design adapt smoothly between mobile and desktop views. Additionally, I’m happy with how I managed to implement hover states and accessibility improvements, making the card both functional and user-friendly.

Next time, I would focus more on refining the spacing and alignment of elements to match the design more precisely. I struggled a bit with getting margins and paddings just right, so improving those skills would be a key focus for me. I’d also explore more advanced CSS layout techniques, such as CSS Grid, to handle layout complexity more efficiently and gain a deeper understanding of how to handle responsive designs.

By applying these learnings, I aim to improve both the aesthetic precision and the structural flexibility of future projects.

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

One of the main challenges I faced was understanding and applying media queries for the first time. Initially, I struggled to switch between the mobile and desktop images and to adjust the layout for different screen sizes. To overcome this, I researched media queries and experimented with a min-width of 600px to create a responsive layout. Through trial and error, I learned how to structure my HTML and CSS to ensure that the design looked good across various devices.

Another challenge was getting the spacing and alignment of elements correct, especially when using flexbox. I found that certain elements weren’t lining up as expected, so I spent time tweaking the margins and padding. By testing the layout in different browsers and devices using Firefox’s inspect tool, I was able to identify where adjustments were needed and eventually achieve the desired result.

These challenges provided valuable learning experiences in both responsive design and layout control.

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

Spacing and Alignment: I struggled with getting the spacing between elements to match the design, especially when transitioning between mobile and desktop layouts. Any advice on how to better manage spacing using flexbox, margins, or padding would be greatly appreciated.

Media Queries: While I was able to implement a basic media query to switch between images, I’m not sure if I’ve set it up in the most efficient way. I’d love feedback on how to optimize my media queries for better performance and flexibility across more screen sizes.

Accessibility Improvements: I’ve made an effort to improve accessibility by using semantic HTML and visually-hidden content for screen readers. However, I’m new to accessibility best practices, and I would like advice on any additional steps I could take to make my project even more accessible.