Skip to content
Submitted almost 4 years ago

Order Summary Solution using HTML, CSS, Grids and Flexbox

Brooke Wargnier•155
@brookewargnier
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • darryncodes•6,350
    @darryncodes

    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

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