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

#accessibility#angular#bootstrap#cube-css#jquery

@FSwebdeveloper

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


All Feedback is Well Come.

Community feedback

David 8,000

@DavidMorgade

Posted

Hello Achinta, congrats on finishing the challenge!

I would suggest you to set the background pattern as a brackground-img in your CSS instead of putting it as an html img, in this type of cases it fits perfectly to it in your CSS files instead of your html.

Also try to use more semantic tags, you could put all of your content inside a main tag, instead of just using a div, you could also use section tag to divide the parts of your card that are semantically related!

Hope my feedback helps you for future projects, good job!

Marked as helpful

0

@FSwebdeveloper

Posted

@DavidMorgade thanks you for your advice. This advice really helpful for me.

1

@dazzlerabhi30800

Posted

Put your whole component inside main tag and use heading levels raised by one only that will take care of the accessibility issues.

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