Skip to content
Submitted about 2 years ago

Order Summary using HTML and CSS

Zach Riane Machacon•40
@blurridge
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

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•420
    @Zdravko93Posted about 2 years ago

    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

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