Skip to content
Submitted about 2 years ago

Order Summary Card Solution

Scott•50
@Scott-321
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

Hi everyone,

It would be great to have some general feedback.

I have tried to incorporate semantic tags in my markup. Feedback on what I could improve on would be appreciated.

Also, any tips on my naming conventions and use of classes would be appreciated - Could I streamline my CSS or combine classes to make my CSS more efficient or easier to read?

Thanks Scott

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    Hi, Scott! 👋

    Congratulations on finishing this challenge! 🎉

    Avoid using header and section for the card content since it is not a complete website. This is one chunk of content that all belong together and in a real website would sit with other content.

    So, all of the card content should live inside the main landmark.

    Use the em unit for media queries. It adapts when the users change their font size setting. Here are some references.

    To place the card in the center of the page, I recommend using flexbox or grid. These modern techniques are more robust than absolute positioning and require less code to implement.

    Never limit the height of the body element. It will not allow the users to scroll the page if the page content needs more height. You can see the issue by looking at the site on a mobile landscape view. So, my recommendation is to use min-height instead.

    I hope this helps! Happy coding!

    Marked as helpful
    0
    Scott•50
    @Scott-321Posted about 2 years ago

    @vanzasetia

    Thank you so much for the feedback.

    Some very good tips and the references were very helpful.

    Thanks

    0
    Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    @Scott-321 You are welcome!

    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