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 using Flex

@M0hamedF

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


I would love to hear your feedback 😄

Community feedback

Rio Cantre 9,690

@RioCantre

Posted

Hello there! Awesome work with this one. Looking at your solution, I think you should considered the following as well...

  • Add the background image in the body rule set with background-position:top and background-size: cover/contain;
  • Include description with the alt in img tag
  • Remove the commented code like to keep it clean

Overall you did well. Hope this helps and Keep it going!

Marked as helpful

1

@M0hamedF

Posted

@RioCantre I forgot all about the background image 😂. I will add it and remove unnecessary comments 👍

1
Naveen Gumaste 10,460

@NaveenGumaste

Posted

Hay ! Good Job Mohamed Fathy

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.

-> Always use h1 first and then h2, h3 and so on

Keep up the good work!

Marked as helpful

1

@M0hamedF

Posted

@Crazimonk So all I have to do is adding h# to every section got it 👍. Thanks

1

@Kamasah-Dickson

Posted

Your solution looks great keep it up👍

1

@M0hamedF

Posted

@Kamasah-Dickson Thanks 👍

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