Submitted over 2 years ago

Responsive Order Summary Component

#bootstrap#chakra-ui#material-ui#fetch

Buddhadeb Chhetri• 110

@Buddhad

Preview site View code

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

How is it let me know guys ;)

Community feedback

Rio Cantre• 9,710

@RioCantre

Posted over 2 years ago

Hello there! Awesome job with this project! You even made some adjustment with the button hover state. I think you should considered the following as well....

Add some additional properties inside the body tag, include background-position: center; and background-size: cover;
Wrap the container with main tag and attribution with footer tag
Add this <html lang="en"> under the Doctype to emphasize the type of language used

Once again, Great job and Keep up the good work!

Marked as helpful

Buddhadeb Chhetri• 110

@Buddhad

Posted over 2 years ago

Thank you @RioCantre for your suggestion

Naveen Gumaste• 10,480

@NaveenGumaste

Posted over 2 years ago

Hay ! Good Job you made it look nearly perfect to the preview

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body like it should be your container

-> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

-> But use header tag only once in main heading element.

-> Add <html lang="en"> under the Doctype [This is for Html issue]

Keep up the good work!

Marked as helpful

Buddhadeb Chhetri• 110

@Buddhad

Posted over 2 years ago

Thank you @Crazimonk bro for your suggestion it's really helpful :)

Please log in to post a comment

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