Advanced Rest-Country App solution using React js

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Assalamu Alaikum Warahmatullah 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HTML 🏷️:

  • This solution lacks semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

  ---

  • For example:
    • The <main> element should include all content directly related to the page's main idea, so there should only be one per page
    • The <footer> typically contains information about the author of the section, copyright data or links to related documents.

  ---

  • So resolve the issue by replacing the react root node <div id="root"> element with the semantic element <main> in your index.html file to improve accessibility and organization of your page.

  ---

  WIDTH 📐:

  • The width: 100vw property for body element is not necessary. because body is a block level element which will take the full width of the page by default.

  ---

  • So feel free to remove width: 100vw style rule from body

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  web weaver•310

  @servant-of-AllahPosted over 1 year ago

  wa alaikum assalam wa rahmatullah brother. thanks for your feedback. i will make the Necessary changes in sha'a Allah. but the div with id root that includes all the elements is there because it is a react app. and it is recommended that in react app there should be a main div with id root which works as the parent container.@0xAbdulKhalid

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  @servant-of-Allah

  • Brother we can change it as <main id="root"> because every page must contain a main element as direct child of body

  ---

  • If we nest it inside the div then the accessibility issues will arised. So that i request you to change the <div id="root"> into <main id="root">

  ---

  .

  Hope am helpful, Barakallahu feek ! 🤠

  Marked as helpful

  0