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 Card

@ks5ks

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


I am not sure of the proper way to handle the button and link. Is it better to embed the button in the link, or, vice versa?

Community feedback

@MelvinAguilar

Posted

Hello again 👋. Good job on completing the challenge !

  • None of the options ⚠️, It's not recommended to embed the <button> element within the <a> element, as it can create confusion for screen readers and other assistive technologies, also, it can create unexpected behavior and is not semantically correct.

    You can review this here: https://caninclude.glitch.me/caninclude?child=a&parent=button

    The proper way to handle the button and link depends on the context:

    • If the button is used to initiate an action, such as submitting a form or triggering a specific event, it is better to use the <button> element
    • If the button is used to navigate to another page or to a specific section on the same page, it is better to use the <a> (anchor) element.

    There is a debate about what is the best type of elements for this challenge, but in my opinion, the "change" element should be a button and not an anchor tag, buttons are used to trigger an action. In this case, the action is to change the plan of the order, so a button would be more appropriate.

Happy coding!

Marked as helpful

0

@ks5ks

Posted

Hi @MelvinAguilar Thanks for your feedback, as always, it is greatly appreciated. Thanks for the link. Kimball Sumney

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