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 Responsive Webpage using Flexbox

@jearrington

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 really appreciate any feedback. What I could have done better? Whatever you can teach me I would love to learn. Thank you so much! 👍

Community feedback

Emad Jaber 130

@emad2411

Posted

hi Jason,

good work , there are few comment which will improve your code:

  • as you can see you have an Accessibility issues like you are using h5 instead of h1 since heading can be increased by one only .
  • wrap your html code with main and footer.
  • you can use css variables for colors : :root { --pale-blue: hsl(225, 100%, 94%); --bright-blue: hsl(245, 75%, 52%); --very-pale-blue: hsl(225, 100%, 98%); --desaturated-blue: hsl(224, 23%, 55%); --dark-blue: hsl(223, 47%, 23%); }
  • pay attention to your margins for the cancel order link
  • add transitions to your interactive links so when you hove on them you have a smooth transition between colors.

I hope my comments are useful

Marked as helpful

1

@jearrington

Posted

@emad2411 Thank you for your feedback. I'll research and implement these suggestions into my code now and in the future.

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