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

Order summary card

@oscarmumm

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


My solution for Order summary card chalenge

Community feedback

@asbhogal

Posted

Hi Oscar,

This is great work, well done! The design matches the mockup well. Just a few things I've noticed which are worth considering for refactoring:

  • It's best to use the picture element to handle responsive images, instead of the CSS background-image property. Here's a good article from MDN explaining how to do this Link
  • You can simplify your code by removing the section container, applying these properties to the main and just having the two divs inside this instead (since it's good practice to have both the max-width and width properties on a parent container)
  • Always locally host your Google Fonts for privacy and performance reasons. Here's a good video by Kevin Powell which shows how to do this Link
  • At 320px your main container touches the viewport boundary. It would be worth adding a padding or margin to the sides just to give them some spacing

Hope this helps!

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