Product preview card component

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

I’m most proud of successfully building a responsive product preview card using HTML and CSS. I was able to structure the layout properly and make the design match the given layout for both mobile and desktop screens. I also implemented different images for mobile and desktop views and aligned the content and image side-by-side using Flexbox.

Next time, I would like to write cleaner and more organized CSS and use better naming conventions for classes. I also want to practice using semantic HTML elements and improve my responsive design approach.

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

One of the biggest challenges was making the layout responsive for both mobile and desktop screens. I initially struggled with placing the image and content in a row for desktop while keeping them stacked on mobile.

I solved this by learning how to use CSS Flexbox and media queries. I also had some difficulty switching between the mobile and desktop images, but I fixed it by using CSS to show and hide images based on screen size.

Another challenge was pushing my project to GitHub, but after learning the basic Git commands, I was able to successfully upload my project and deploy it using GitHub Pages.

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

I would appreciate feedback on the following areas:

Whether my HTML structure is semantic and well organized

If my CSS could be written in a cleaner or more efficient way

Best practices for responsive design and layout structure

Suggestions on improving my GitHub project structure for multiple frontend projects

Any advice on improving my code quality and frontend development workflow would be very helpful.