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

Tailwindcss

P
KMS56135 120

@KMS56135

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Kaczupinko 170

@Kaczupinko

Posted

Semantic HTML: Your code generally uses the right HTML elements, but you could improve it by wrapping the title and description in a <header> tag for better structure.

Accessibility: It's pretty accessible, but adding some aria-label attributes to the button would make it even better for screen readers.

Responsive Design: Your layout adjusts nicely across different screen sizes. The use of Tailwind's responsive classes makes it easy to manage.

Code Structure: Your code is clean and easy to read, thanks to Tailwind. However, the inline SVG in the button might be better as a reusable component.

Design Consistency: You did a great job sticking to the design. The spacing and alignment are spot on.

Improvements:

Use <header> and <section> tags to better structure your content. Add aria-label attributes for better accessibility. Consider moving the SVG icon into a reusable component. Overall, your code is solid, responsive, and well-organized. Just a few tweaks, and it’ll be even better!

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