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 ana
(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 of100%
to theordercard
and the image and to thebody
adding some padding (eg padding: 1rem) to maintain some space between the body and the elements
happy coding
@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