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

Submitted

Order Summary Component solution

#styled-components
Agnar 220

@agnar-nomad

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


This was my very first challenge from frontendmentor and I did it based on a YT tutorial. Very good exercise.

Community feedback

@lawal2000

Posted

This is a nice work, keep it up. But, it is cool to note that it isn't a nice way of practice to use px in your work rather than rem or em. "Rem and pixel (px) are two units of measurement frequently used in CSS and HTML to define font size, margin or image size for example. However, the two units have a big difference in terms of web accessibility, because a pixel is not responsive and that's why it's better to use REM." Also, you shoudn't have used a fixed width on the card. you could have used stuff like (width: min(90%, 22rem);). Also, you forgot to give the button with the class of "cancel" a padding. do that

0

Agnar 220

@agnar-nomad

Posted

@lawal2000 Hi

thank you for your feedback. I will keep your notes in mind with my next projects. Cheers

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