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

responsive website using CSS grid and flex

Hananaโ€ข 170

@meantoes

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'd appreciate your feedback or tips for my subbmission or code soo muchโญโญ anything I need to know to improve my code huhu๐Ÿ™†๐Ÿปโ€โ™€๏ธ

Community feedback

@MelvinAguilar

Posted

Hello there ๐Ÿ‘‹. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

HTML ๐Ÿ“„:

  • Wrap the page's whole main content in the <main> tag.
  • Avoid using uppercase text in your HTML because screen readers will read it letter by letter. You can use the text-transform property to transform the text to uppercase in CSS.
  • The breakpoint 1440px is too big to switch views, I'm using a computer and viewing the mobile view.

Alt text ๐Ÿ“ท:

  • The alt attribute should not contain underscores or hyphens, it must be human readable and understandable.
  • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.
  • Not all images should have alt text. The cart-icon is a decorative image, it does not add any information to the page. You should use an empty alt attribute instead of a descriptive one. You can read more about this here ๐Ÿ“˜.

    If you want to learn more about the alt attribute, you can read this article. ๐Ÿ“˜.

I hope you find it useful! ๐Ÿ˜„ Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

1

Hananaโ€ข 170

@meantoes

Posted

@MelvinAguilar Hi! thank you so much for the feedbackโญ It is so much helpful and I'll definetly try to improve my code with it๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

1
Hananaโ€ข 170

@meantoes

Posted

updated-- using the feedback from @MelvinAguilar ๐Ÿ™‡๐Ÿปโ€โ™€๏ธ

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