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 using HTML and CSS

@blurridge

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


I have been struggling to be consistent with maintaining responsiveness. Went for a mobile-first approach here and did media queries instead on desktop. I started to use relative units like em and rem over px. Can I get some inputs on my unit usage (em, rem, %, etc.) and overall, my CSS structure since I feel like they are redundant but I do not know where to start refactoring. Thank you!

Community feedback

Zdravko 350

@Zdravko93

Posted

Hello @Zach !!! Congragulations on your efforts, and you did a good job on this project! Looks very much like the original design. Also, after reviewing your code I have noticed:

  1. you have a little bit of a redundant code(specifically in the media query section in my opinion) like .container {...} , button {...} etc

  2. in the .container code where you put .container { position: absolute, top.... } you could instead use a more 'modern' solution like using its parent container(In this case <body> element) and put on it something like body { display: flex; justify-content: center; align-items: center} to center a .container div OR you could also use: .container { margin: 0 auto; max-width: ...(whichever you want it to be max)},

  3. You could put 'font-family....' on body element and ofc if needed, also on button separately, instead of putting it on p, h1, h2 etc, because this way you will be more general with it

  4. Also, with selectors that have the same values , in your case h1, h2 you could wrap them like: h1, h2{ font-weight: 900; }

All in all, these are not some 'huge' mistakes you made or anything like that, it's just a suggestion for slight improvement and making a code a little bit more cleaner and easier to read in my personal opinion. And again, you did a good job on this one @Zach! Wish you all the best, and keep coding!!!

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