Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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

VSCODE/HTML/CSS

@CyberNotesDev

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


The areas of code that I'm unsure of is mostly anything that is involving the image and when you put it into mobile with the media queries.

Community feedback

Alexandra 510

@Alexandra2888

Posted

Hi! Congrats for finishing challenge. Things I think you can improve:

  • start CSS from mobile (0-768px) and after that increase width,

  • you need a wrapper for image and text for mobile .wrapper { display: flex; flex-direction:row;} for bigger .wrapper {display: flex; flex-direction: column;}

  • use more relative units, we should use px only for very small lengths or when coding for magazines/newspapers,

_- implement BEM naming convention, it will help you in larger projects to keep readability and cleaner code and also when you will use SCSS at nesting classes. Happy coding!

1

@CyberNotesDev

Posted

Thank you so much for the tips! I will surely use them the next project that I do! 😁 @Alexandra2888

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