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

@EduTavaress

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

@Alexandru736

Posted

Hi there! I looked over your final design and code and looks like a pretty neat design! However, I have some improvements you could do to make the project be even better:

  • I don't see the mobile design in your code. Generally, when you start working on a website, you should apply a mobile-first workflow. This is where you apply media queries
  • Another thing is that I see you used quite a lot margins. Generally it's not that bad. Personally, I don't think it's a must that your design should have the same px values as in the mock-up picture. This is why I find it more important to use relative units(like em and rem). When the screen size changes your solution is going to blow up and won't have the same proportions.
  • The last thing, this is not a big deal but can improve your workflow, and that is to use CSS variables. Use them to store the color values so that you can apply them easier whenever there is an opportunity. Keep up the good work!
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