Skip to content
Submitted over 3 years ago

Order Summary Component | HTML CSS Sass

Vanza Setia•27,775
@vanzasetia
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

Hello Everyone! 👋

Newbie challenges are tricky challenges. 😬

Now for the questions:

  • I used button element for Change and use anchor tags for Proceed Payment and Cancel Order. Do you think it's true or not?
  • For the Order Summary words, do you think it can be a heading or other tag?
  • I tried to use TalkBack on my Android phone and I understood what it has spoken to me. Could you try it using your screen reader? I want to know that you understand what's going on.

Of course, other comments or any issues that you may find, feel free to write it down.

Also if you want me to give my feedback on your solution, feel free to give me the link on the community feedback! I will be glad to help you too!

Thanks!

Community feedback

  • Grace•31,250
    @grace-snowPosted over 3 years ago

    Hi

    I think this is a great solution! If it was a multi-step form, I'd be more tempted to use buttons for those elements, but it's fine as it is for an individual component. Those kinds of decisions you can only make once it is part of a larger journey so you know what they are doing.

    The only thing I would change on this is the faint color on focus on the Change CTA and the Proceed button, particularly when focus-visible. I would keep the original color on focus-visible, as at the moment it is making it hard to read when I'm focused with keyboard

    Marked as helpful
    1
    Vanza Setia•27,775
    @vanzasetiaPosted over 3 years ago

    @grace-snow Thanks for your feedback once again!

    0
  • Hafizan Adli•1,190
    @hafizanadliPosted over 3 years ago

    Wah keren, hampir perfect!!

    Marked as helpful
    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 3 years ago

    @hafizanadli Terima kasih!

    1
  • Azka•480
    @AzkanorouziPosted over 3 years ago

    good job ✌️🙌 please take a look at my solution for this challenge and let me know if you have any feedback I would be appreciate 😊 your feedback has been helpful for me last time .

    Marked as helpful
    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 3 years ago

    @Azkanorouzi Thank you, I am happy to help you 🤗.

    0
  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago

    This is tricky indeed. The order summary i would make it a heading , an h2 in this case. My first heading an h1 would be visually hidden - would give a general idea of what the site is all about. The anchor and buttons here are really giving me a tough time. Do there open external pages? I will go for buttons for all of them.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 3 years ago

    @ChamuMutezva I don't know, but I followed what Grace has said on this solution from other person

    1
    Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago

    @vanzasetia, it makes sense to have the proceed as an anchor

    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