Skip to content
Submitted about 2 years ago

Order Summary UI

Avinash DV•150
@avinashdv
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 used SASS variables and @mixins to create this UI and it is one fun project. No difficulties were faced instead modifying for responsiveness is quite meaningful with SASS. I do know the folder structure can be improved for the project and I will work on it in my next project.

Community feedback

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

    Hi, Avinash! 👋

    Congratulations on finishing this challenge! 👏

    I wrote an article about Sass mixins, "5 Handy Sass Code Snippets" article. In that article, you will find some useful @mixin to help you write Sass.

    Here are some suggestions for improvements.

    • For images that are used only as decorations (they do not give users any information and serve only an aesthetic purpose), the alt tag should still exist but should be left empty: alt="". This will tell the screen reader to simply skip over the image.
    • Always specify the type of the button. In this case, set the type of it as type="button". It will prevent the button from behaving unexpectedly.
    • For the BEM class names, I recommend renaming orderSummary__card-details--heading to orderSummary__heading. It's not a modifier for the orderSummary__card-details element.

    I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

    I hope this helps! Happy 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