Responsive QR code component using Bootstrap

Community feedback

• 

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. 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 generates accessibility error reports due to incorrect usage of semantic markup, which confuses the landmark of this webpage

  ---

  • So fix it by replacing the <section class="section my-5"> with semantic element <main> in your index.html file to improve accessibility and organization of your page.

  ---

  • 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 convey the structure of your page. 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

  ---

  HEADINGS ⚠️:

  • And, This solution had also generated another accessibility error report due to skipping heading levels

  ---

  • We want to avoid skipping heading levels, make sure to start with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that our document has a clear and consistent hierarchy. Read more 📚

  ---

  • Because skipping heading levels is a poor practice from the perspective of information design, whether we are talking about web pages, books, journal articles, or about anything else. You can not only confuse screen readers but all readers when you don't follow a consistent, logical pattern with your heading structure.

  ---

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

  Happy coding!

  Marked as helpful

  1
• 

  Syed Umair•180

  @SYEDUMAIR007Posted over 1 year ago

  Hey friend, Its Syed Umair, first of all I would like to congratulate you for the completion of your project. You can remove the warnings in the validation report by following these steps:

  1. U cant have directly h4 after h1 so use h2 because u always have to come in hierarchy.
  2. Always u should have a main section in your project, so nest the code which is in body tag into main tag and then keep main inside body.
  3. And for having more rounded corners give the div an id and select that div inside css style sheet and give it a border radius of 1.875 rem.

  Hope you like my suggestions helpful.

  Marked as helpful

  1
• 

  P

  Cuong Ly•180

  @cuonglyyPosted over 1 year ago

  Hello Richard!

  Great job on finishing this challenge! Here are some things I can recommend for you:

  • Here's a link to obtain the rounded edges in Bootstrap: Bootstrap border-radius

  • You can use <main> element to define the main content of your document.

  • <div class="attribution"> doesn't have to be wrapped around a <footer> element, you can change <div class="attribution"> to <footer class="attribution">

  Hope this helps! Happy coding (-:

  Marked as helpful

  1