Order summary component using HTML and CSS

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 3 years ago

  There are a few issues that needs fixing according to the report, they might include the following:

  • Elements like header, main ,footer, nav are semantic elements and where possible should be included. Some of the errors will be cleared by having a main element, you can change the div with a class of card into your main element. The div with a class of attribution can be changed into a footer element. Follow the link provided in the reports to get a better explanation of why such elements are important
  • the first heading element of a site should be an h1 element, headings should follow a sequential order - h1, h2, h3 without skipping headings
  • if an image is decorative , use an alt="" otherwise your alt value should be descriptive to aid assistive technology users to visualize the message that is being put across. The following in my opinion the alt value is shallow and secondly it can be just a decorative image , <img src="./images/icon-music.svg" alt="icon-music" class="icon-music"/>
  • Look again at the elements below, they are interactive elements - an a element can do. Using a div in the place of an interactive element will require a lot more code for assistive technology users to be able to use it

  <div class="payment">
    Proceed to Payment
    </div>
    <div class="cancel-order">
      <h5>Cancel Order</h5>
    </div>
  

  Marked as helpful

  0
• 

  Kristiana12•425

  @Kristiana12Posted about 3 years ago

  Hey there Gabriela,

  nice outcome!!

  A couple of things that I think you could improve are:

  • you can use more HTML semantics, for your buttons for example do not use 'div' but 'button' instead. Also instead of div class=card you can use main.

  • Do not use pixels, instead use rem or em units. If I have trouble reading the text cause the font is too small and I want to scale the website, I will not be able to because pixels are not scalable, rem and em units are.

  Keep up the good work :)

  Marked as helpful

  0