Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive tip calculator using React

Leonardo 150

@leodsc

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Shraddha 485

@5hraddha

Posted

Hi @leodsc, First of all, congratulations for completing the challenge. It is a great job indeed.

There are a few observations that I would want to share and suggest some improvements therefore.

  1. The webpage should have a main heading - <h1> tag. You have kept the page header in <header> tag which is a section tag. That means it just defi es and landmarks a particular section of your webpage as a header. It is more similar to a container. Now inside that container, you have to also wrap the heading in a <h1> tag. That would remove one of the error in the report.

  2. Ensure headings are in a logical order. For example, check that all headings are marked with h1 through h6 elements and that these are ordered hierarchically. For example, the heading level following an h1 element should be an h2 element, not an h3 element..

  3. You have <label> for the <input> in your code but you have not associated them. You can use id and htmlFor attributes to do the same.

Thank you!! ⭐️

Marked as helpful

1

Leonardo 150

@leodsc

Posted

@5hraddha Thank you for the advices, Shraddha! I didn't know that headings should follow a specific order, neither that I had to include headings inside <header>, but thinking about it know it makes a lot of sense to keep semantic to HTML.

1
Shraddha 485

@5hraddha

Posted

@leodsc You are welcome. Merry Christmas 🎄

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord