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

Rudolph 130

@rudyjm3

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


This took about 3 - 4 hours to complete. The css style property "filter: drop-shadow" is a very good alternative to "box-shadow: values; " depending on the scenario. Would love any feed back. Thanks

Community feedback

@MojtabaMosavi

Posted

  • Using <div aira-hidden="true"></div> you can hide elements from accessibility API because is purely decorative and to somebody using screen reader does not mean anything.  

  • Both of the cancel order and proced to payement are semantically and logically described better as links, here is the way I see it, A button is something you use activate and deactivate something, it could be a lamp or a button on a UI but here the purpose fo those two is to take the user to different pages.

Keep coding :=)

Marked as helpful

1

Rudolph 130

@rudyjm3

Posted

@MojtabaMosavi Thanks for the feed back :) I believe the 1st part of your comment has to do with the box that contains the payment button and cancel order link. Good to know. I like how you explained the use of links and buttons, makes sense. :)

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