Order Summary Component

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!!!

@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! 👍