Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 4 years ago

Order Summary Component | HTML CSS Sass

accessibility, lighthouse, sass/scss, bem
Vanza Setia•27,715
@vanzasetia
A solution to the Order summary component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Grace•32,130
    @grace-snow
    Posted almost 4 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
  • Hafizan Adli•1,190
    @hafizanadli
    Posted almost 4 years ago

    Wah keren, hampir perfect!!

    Marked as helpful
  • Azka•480
    @Azkanorouzi
    Posted almost 4 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
  • Chamu•13,740
    @ChamuMutezva
    Posted almost 4 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.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub