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 Grid and Flex Box

@missbaah

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


Any ideas to make my code cleaner ? Feedback is welcome!

Community feedback

@jschuh23

Posted

@missbaah Great job on the project!! I have yet to work on this one, but plan to jump into the challenge soon :)

I noticed a few accessibility issues that were identified in the FEM report. Most of these should be easy fixes.

  • All page content must be contained by landmarks The rule description states - "it is best practice to contain all content excepting skip links, within distinct regions such as the header, nav, main, and footer." I would suggest that you either wrap your section class="container" in a main element or change this section element to a main element. That should fix 3 of your accessibility issues.
  • Page should contain a level one heading My suggestion here would be to change your current h2 to an h1 and then resize the h1 in your css. Finally, to follow semantic HTML I would change your div class="attribution" to a footer element.

Again, great job on this challenge!!! Keep up the good work!

Marked as helpful

0

@missbaah

Posted

@jschuh23 Thank you so much for the feedback !!!

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