Skip to content
Submitted about 2 years ago

Product Preview Card Component

Hector Ramirez•350
@hectorlil48
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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
    @DavidMorgadePosted 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
    0
    Hector Ramirez•350
    @hectorlil48Posted 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.

    1

Please log in to post a comment

Log in with GitHub

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