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-card using css html

@satyamnewale

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


Community feedback

P

@TorCanHack

Posted

Hello Satyam, congratulations on finishing the order summary competition 👏🏽 🎉.

I noted some observations you might find worthwhile.

Reviewing your code, I noticed you do not have a header element, particularly a h1. It is important to state that header's improve the structure and readability of your web page since they provide hierarchical order, additionally headers enhance the accessibility and navigation of the webpage for users who rely on assistive technology, such as screen readers.

Your use of <div> is more than necessary, as the div with the class "frame" could have held the img tag, the "Order Summary" in a <h1> element and the "para" class would have been nested in a <p> element all within the "frame" <div>. The div tag is used to define a division or section as it group elements in a web page and it should be used on "a need to use bases".

The <button> tag is really helpful and easier to use than makeshifting a <div> tag as a <button>, and it helps with accessibility also. I noticed you used the <div> element there instead of a <button>.

Nonetheless, good work!

I hope you find this helpful.

Happy coding 🥂

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