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 - SASS, Bootstrap

Lucas Exequielβ€’ 200

@arrejoria

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


Hi there, lets matear πŸ§‰ 😁 This is my solution for the Product Preview Card

Solution Repo:octocat:

I'm very happy doing this kind of project to improve my performance skills.

  • I used SASS to improve my skills in CSS and minified the file to get better performance. πŸš€
  • I got %88 of Performance in PageSpeed Insights.
  • Used BoilerTemplate HTML5 to get better compatibility and accesibility for users.
  • This project is responsive for desktop, tablets and mobile using bootstrap and custom media queries.

For the last please feel free to leave your feedback or advice and thanks for reading!πŸ’ͺ

Community feedback

P
Fluffy Kasβ€’ 7,735

@FluffyKas

Posted

Heyo,

That looks great! I haven't completed this challenge yet, so not sure if it includes some hover styles for the button, but regardless it would be nice to see some, even if you had to come up with it yourself ^^

You also have a somewhat unnecessary alt text on your cart icon (its just a decorative image), you could leave the alt text empty so screen readers don't read it out needlessly.

The border-radius is also a tiny bit messed up in mobile view (works fine in desktop view, so I guess just needs a media query).

So overall really well done, it's a neat solution!

1

Lucas Exequielβ€’ 200

@arrejoria

Posted

@FluffyKas thanks for the advice. It was really late, when i commited the solution i dont realice that my layout in mobile was that bad haha

Very happy for your comment! ❀️

PS: in the layot the button has an active style, only change bg color

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