Product preview card component

Community feedback

• 

  Francisco•210

  @antoniomontoiaPosted about 1 month ago

  Semantic HTML: The solution could improve its use of semantic HTML. Consider wrapping the product details in a <section> tag to indicate that it is a self-contained piece of content. Using <main> for the main content area would also enhance the document structure.

  Accessibility: The alt attribute for the product image should be more descriptive.

  Responsive Design: The CSS includes a flexible layout, but media queries should be implemented to adjust styles for different screen sizes. For example, you could change the alignment of elements for mobile sizes to ensure a better user experience. The image is not currently responsive. Consider using the <picture> element to serve different image sizes based on the viewport, which allows for better optimization and loading times.

  Code Structure: The HTML and CSS are generally well-structured and readable. However, consider using more descriptive class names for better clarity: check out BEM (https://getbem.com/introduction).

  JS was not needed for the hover state. I recommend you to used a :hover pseudo-element to attain that effect.

  Design Precision: The solution differs considerably from the design specifications. It is crucial to read the style guide and match the colors provided with the solution. Being more precise with details, such as using styles like letter-spacing, would enhance the overall appearance.

  As the project instructions suggest, starting with the mobile design first can be helpful. This approach allows for a better understanding of how the layout should adapt to different screen sizes and ensures that the design is consistent from the beginning.

  Marked as helpful

  0