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-main

@AhmarIftikhar123

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


Please! Check my effort and gave me suggestion for improvement.

Community feedback

@williamboehringer

Posted

Hello, greetings!

In first place, congratulations for completing this challenge.

About my suggestions on your improvement, I think you could improve a lot by taking care of some few details, like adding the right font-families and color scheme to your project. They are all included in the style-guide file in the project starter pack that Frontend Mentor provides. Also, I took notice that you used a solid shadow-box, this isn't really a thing in frontend design, it may be the right choice in some cases, but when you're dealing with something like this challenge you would definetily use hsl color to make it semi-transparent.

Another suggestion is to use "gap" property or "align-content: space between" in your div with "h1" class. By using this properties you can get rid of margins and make things more fluid and responsive. Margins are fixed values, wich are pretty bad and annoying when it comes to make a page responsive.

Well, these are my general advices, I hope you'll find them, helpful! Keep improving and good coding :)

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