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

Product preview card component

@ferdinandoaspro

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

@AymaneOnline

Posted

Your solution is too close to the actual design, congrats! I've got some things to point out, I advise you to add some margin-top on the card to make some space on top of the image when the mobile screen doesn't have enough height you could test with the iPhone SE to see what I'm talking about.

For accessibility purposes, you need to add the alt attribute on your images, This may enhance the experience for users of assistive technology.

Also, you could add Meta descriptions on your HTML file to improve SEO.

Another thing is that you could use the Lighthouse extension on your browser, as it shows you the quality of your page regarding (Performance, Accessibility, Best Practices, and SEO).

1

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