Product preview card component

Community feedback

• 

  P

  Jaylen Baxter•300

  @JYLNPosted about 2 months ago

  This is a good start! However, there are quite a few things you can do to your HTML markup to improve this:

  • The point of this challenge is to practice different layouts on different screen sizes. Your solution simply shrinks and becomes difficult to view on smaller screen sizes. Consider utilizing a custom breakpoint or Tailwind's default breakpoints to help shape a better layout and viewing experience for the user when viewing this from a non-desktop screen.

  • Consider using semantic HTML tags to assist with accessibility and document outlining. For example, this card could be in an article element.

  • Your prices are using heading elements, but there's no other context for them to be headings. Consider using a p element or a span.

  • Consider giving your overall container a min-height rather than a static height. This will help with responsiveness and will not cause things to be cut off if you have overflow.

  • You have unnecessary classes within your markup. For example, you have img-container and 'design-container` as a class, but there's no styles defined in your markup or CSS for these classes. You should define styles under these classes or remove them from your markup.

  • You're missing the other font from this design. The style guide has a link to the font, but there are other resources like fontsource that has this font.

  • Your image has the wrong border radius. It's rounding its corners at the top of the element and does not fit the design

  There are more things I could point out, but these are just a few things you can do to improve on your solution. Good start again!

  0