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 Card Solution

John Evansβ€’ 20

@JohnPalmTree

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


Still pretty new to front-end material, so any feedback would be appreciated!

Community feedback

@garcialexco

Posted

Hello! Great job completing the challenge! πŸ”₯

There's a couple parts of your code that I might be able to help with:

  • It's best to link fonts in the HTML file, and then assign in CSS wherever necessary. This makes the page load a bit faster!

  • Centering things are super difficult , here's a tip to center an element in the middle of the page:

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  • Be sparing in your use of div, here's a hand article about semantic HTML in regards to div usage: https://dev.to/kenbellows/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i

Hope this helps, and keep up the great work! πŸ‘ Happy Coding!

Marked as helpful

0

John Evansβ€’ 20

@JohnPalmTree

Posted

@garcialexco Thank you for the feedback! I found the article really helpful & I'm going to integrate your help into my work going forward.

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