Product Preview Card Component Solution using Media query

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

I'm most proud of how clean and responsive the final layout turned out. It matches the design closely across different screen sizes, and I was able to apply Tailwind CSS effectively to speed up styling while keeping the codebase neat.

If I were to do this project again, I would focus more on improving accessibility—ensuring that the component works well for screen readers and keyboard users. I’d also like to implement the project using only one styling approach, either Tailwind or Bootstrap, to avoid unnecessary overlap.

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

One of the main challenges I faced was making the layout responsive on smaller screens. At first, the elements overlapped or didn't stack properly. I overcame this by reviewing how flexbox and media queries work, and then applied a mobile-first approach to fix the layout step by step.

Another challenge was deciding when to use utility classes from Tailwind versus writing custom styles. To keep things organized, I stuck mostly to Tailwind but used custom classes only when necessary for clarity and reuse.

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

I'd really appreciate feedback on the following:

1. Responsiveness: Does the layout adjust well across different screen sizes? Are there any breakpoints or devices where it looks off?

2. Code structure and readability: Is my HTML and CSS organized in a clean and maintainable way? Any tips on improving naming conventions or reducing repetition?

3. Mixing frameworks: I used both Tailwind CSS and Bootstrap—was this a good decision, or should I stick to one? What’s the best way to manage or separate styles when combining frameworks?

4. Accessibility: Are there any improvements I could make to ensure the component is more accessible (e.g., better focus states, semantic elements, or alt text usage)?

I’m open to any tips that can help me improve as a front-end developer, especially in real-world projects like this!