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

HTML5 markup, CSS properties, Flexbox and Mobile-first workflow.

@AntonioPedro04

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


Hey everyone, I'm starting my journey in software development and this is my first ever project made entirely from scratch. I'd be glad if someone could give some feedback about my project, mainly on how I could improve it, thank you so much for the support.

Community feedback

@betaluis

Posted

Antonio,

Congrats on completing your first project from scratch. My feedback is to notice the padding around the content and within the button. Make sure it stays consistent from mobile to desktop.

Marked as helpful

1

@AntonioPedro04

Posted

Thx you so much for the support Luis, it is nice to hear from more experienced developers. So you are suggesting that I should always set the same padding within the elements on the page even tough there are different reponsiveness configurations on my website, is that correct?

0

@betaluis

Posted

@AntonioPedro04

Of course, happy to help. Hmmm not sure if I'm understanding what you mean by that. What I'm saying is that whenever you're coding up a project from a design, make sure your padding/margins align with the design. For example, in desktop, your button is right up against the bottom, and the padding between content looks a little too large. In medium sized screens your button loses the left/right padding, and the content is right up against the edges. Same on mobile screens. Also, I'd try and make sure that the cart and "add to cart" stay on the same line in mobile instead of breaking to a new line.

Try and figure all that out on your own. Lmk if you need more help.

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