Skip to content
Submitted about 3 years ago

Order Summary Solution using HTML, CSS, Grids and Flexbox

Brooke Wargnier•155
@brookewargnier
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'd really love suggestions on better ways to organize code and make it more legible. Also any additional suggestions regarding how to make the transition from mobile to desktop more smooth.

Community feedback

  • darryncodes•6,390
    @darryncodesPosted about 3 years ago

    Hi Brooke,

    You've smashed it, great solution!

    A few concepts for you that makes my life a lot easier:

    • using relative units not absolute units for responsive design. This is an excellent albeit brief - best practice guide. It's just the tip of the iceberg and I recommend doing some more research
    • SASS adds lots of additional functionality to CSS like variables, nesting, partials and more which can make writing CSS easier, faster and more legible
    • BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copying and pasting

    All the best!

    Marked as helpful
    1

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