Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Component | HTML CSS Sass

#accessibility#lighthouse#sass/scss#bem
Vanza Setia 27,855

@vanzasetia

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P
Grace 27,910

@grace-snow

Posted

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,855

@vanzasetia

Posted

@grace-snow Thanks for your feedback once again!

0
Hafizan Adli 1,190

@hafizanadli

Posted

Wah keren, hampir perfect!!

Marked as helpful

0

Vanza Setia 27,855

@vanzasetia

Posted

@hafizanadli Terima kasih!

1
Azka 480

@Azkanorouzi

Posted

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,855

@vanzasetia

Posted

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

0
P
Chamu 12,970

@ChamuMutezva

Posted

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

P
Chamu 12,970

@ChamuMutezva

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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