Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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 using HTML, CSS and Flexbox

@Jonhillupperton

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


Hello,

This is my second project, I have taken on the advice from the first one and would love an honest opinion of this to help further my learning.

Community feedback

T
Chamu 13,110

@ChamuMutezva

Posted

Greetings Jon. Nice work you have done here , well done. Here are a few observations from my end.

  • your alt values are informative , well done . The music icon , i think it is more like for decorative purposes hence it can have an empty value (just a personal opinion).
  • a button and an a (anchor) element are interactive elements - they should not be nested. Buttons are mainly used with click events like on a form or click events to open a modal or toggle, where as an anchor element is used for navigation. The question you need to ask on this case is whether you are navigating to another page or section to use an anchor element.
  • line-height should be unit-less , for example line-height: 1.5
  • while you have given a max-width on some elements including the ordercard div and the img, when the screen gets smaller , the site is having issues with responsiveness. Add a width of 100% to the ordercard and the image and to the body adding some padding (eg padding: 1rem) to maintain some space between the body and the elements

happy coding

0

@Jonhillupperton

Posted

@ChamuMutezva

First of all thank you for your feedback, it is appreciated. I am trying to improve with every project.

So would you say it is best practice instead of having a fixed amount of pixels for various elements have width:100% instead with making sure to add padding as well.

I understand about the <a> tag I knew it needed to cancel the order but I believed it was needed, could I put the <a> tag within a <div> instead.

Grace did also say that line-height should be unit less.

I will do another project and the advice and guidance you have given me I will use in my next project.

Thanks

Jon

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