Order Summary using HTML, CSS and Flexbox

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 2 years ago

  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

  ---

  

  Jon Hill-Upperton•150

  @JonhilluppertonPosted over 2 years ago

  @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