HTML, CSS - Order Sumary Card

Community feedback

• 

  Juveria Dalvi•1,375

  @Juveria-DalviPosted about 3 years ago

  Clean code contains semantic tags check out your accessibility issue click

  Marked as helpful

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome job on this one. Layout in general looks fine.

  Regarding your queries, i'll just address them here in the suggestions :>

  • Wait, why are there a h element? The data starting from the meta tag and link all of those should be inside the head element of the html. In the starter files for each project, the index.html already have a template you just need to populate, did you customize it?
  • On the body tag or in any other large element container, avoid using height: 100vh, this will limit the height of your element, based on the remaining screen's height. Instead, you can just remove this or replace it with min-height: 100vh.
  • Always have a main element on each webpage. On this one, the .card selector could use the main instead of using div.
  • The alt for the vector image should have been left empty like alt="" and with aria-hidden="true", if an image only acts as a decoration, use alt="" on it, but if the image adds content, then use a meaningful alt value. Also, when using alt on img, avoid using words that relates to "graphic" like "image, icon, logo.." , assistive tech will handle those for you.
  • The music icon as well should be using alt="" on it and aria-hidden="true".
  • The "proceed to payment" and "cancel order" could use anchor tag a because it doesn't look like the component is a form or built like a form.

  Aside from those, great job on this one.

  0