Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive product preview card component

@ei-abdullah

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I'm proud that I made my product preview card look good on different screen sizes. Next time, I want to take on more challenging designs that work well on any device.

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

I faced challenges in ensuring my product preview card looked good across all screen sizes. Using CSS Flexbox and media queries, I structured the layout flexibly and applied specific styles for different screens, achieving a responsive design.

Community feedback

P

@joshhovis

Posted

Hi Abdullah, your project looks good. Frontend Mentor is making me leave feedback here as part of the learning path but I don't really have any feedback to give, everything looks pretty good to me. Only thing I noticed was that you used a lot of hard-coded px values for sizing of things, this is fine for something small like this but I would ideally in the future use % or vw units for box/container sizing as that makes it a bit more responsive without having to do extra work like playing around with and setting the specific pixel size everywhere.

0

@ei-abdullah

Posted

@joshhovis Hello Joshua, I appreciate your feedback on my work. Thanks a lot for considering my work and giving valuable insights. Surely, I'll keep these responsive units in mind for better responsive designs for my next job. Thank you.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord