Order Summary Component

Community feedback

• 

  Mukesh Mahato•180

  @iammukeshmahatoPosted over 2 years ago

  Hi @anhhuynh1506,

  Congratulaton for completing your first project. You have done a great work.

  Its seems Frontend Mentor have generated some Accessibility Issues, they are:-

  1. Document should have one main landmark
  2. Page should contain a level-one heading

  You can fix this issues by using the following tips:

  1. In your index.html file, you have <section>...</section> tags, wrap the whole section element into a <main>...</main> to fix the landmark issue.

  2. Page should contain a level-one heading: You have use a h2 tag. The heading element should be in order of (h1-h6). To fix this issue simply replace h2 with h1 and use font-size property to set the size of heading.

  My suggeston

  You have used each element to reset its margin and padding, insted doing this, i would like to suggest to use css universal selector to reset. You can do this like

  *{
      margin: 0;
      padding: 0; 
  }
  

  Click Here for more information about css selector.

  If you have any doubt or query, feel free to contact me.

  Keep Coding!!!

  Keep Learnign!!!

  1

  ---

  

  Nguyễn Huỳnh Anh•50

  @anhhuynh1506Posted over 2 years ago

  @mukeshmahato843 Thanks so much. It helps me a lots.

  0
• 

  Deepak Parmar•490

  @deepak-parmarPosted over 2 years ago

  @anhhuynh1506, Visually your work looks so great.

  You just have resolve some accessibility issues...

  • Document should have one main landmark: for this wrap your whole section element using main tag.
  • Page should contain a level-one heading: heading elements (h1-h6) should always be in order and should always start from the level-one heading h1. For your "Order Summary" heading use h1 instead of h2. You already have font-size property set for the heading, so you'll just have to make a few changes there.

  The design won't change a bit, but these changes will improve the accessibility of your component. Again nice work on the challenge. Keep coding! 👍

  0

  ---

  

  Nguyễn Huỳnh Anh•50

  @anhhuynh1506Posted over 2 years ago

  @deepak-parmar Thanks so much for your advices. I will change that.

  0