Frontend Mentor | Product Preview Card Component coding challenge solution

Solution retrospective

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

I did this over a year ago. And I’m proud that I can look back and understand what I was coding. I would use responsive units for my text and won’t use a big CSS reset like Idid.

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

Going from a 2 column layout to a one column on mobile. But I did my best with what I knew.

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

Using more responsive units and planning out how I’m going to code my pages.

Community feedback

David• 8,000

@DavidMorgade

Posted about 2 years ago

Hello Hector, congrats on finishing the challenge! you did a pretty good job using bootstrap!

If you don't mind I would like to give you some feedback about your solution.

Your Bootstrap classes and CSS seems fine for me, there is just a little problem on mobile sizes that the component takes the full screen, maybe try getting it a bit 'compact' and reduze a bit the width and the height.
Regarding your html, I suggest you to try using some more semantic html tags, for example you could wrap your whole card on a main tag instead of a div, and use some sections to separate the image from the text. Also I noticed that you used a p with two spans on the prize part of the card, instead of that try using only one span with the modified prize like this: <p> first prize <span> second prize </span></p>.

Hope my feedback helps you! I like a lot your porfolio made in wordpress, good job with this project!

Marked as helpful

Hector Ramirez• 290

@hectorlil48

Posted about 2 years ago

@DavidMorgade Thank you for the feedback, I will definitally go back and try to rework my code. This is my second attempt using CSS, this feedback helps.

Product Preview Card Component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community