QRcode component

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace<div class="container">with the main tag, <h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

  For a responsive content, replace the width in .container with max-width and add a padding value for all the sides to it. padding:16px and give the img a max-width of 100% and a border-radius value , the rest are not needed.

  Reduce the border-radius value.

  Give .text a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1. Give p a margin-top or h1 a margin-bottom value for the space between the text.

  To center .container on the page using flexbox or grid instead of position: absolute,

  • USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  • USING GRID: Add min-height:100vh; display: grid place-items: center to the body

  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0
• 

  Samdevtechnology•130

  @SamdevtechnologyPosted over 1 year ago

  Hello there 👋. Congratulations on job well done! 🎉 🎉 🎉

  • I would like to make some suggestions concerning your code that I might be of help.

  HTML 🏷️:

  • This solution generates accessibility error report: "All page content should be contained by landmarks". This is due to a non-semantic markup, which causes a lack of landmark for a webpage.

  • So fix this by replacing the <div class="container"> element with the semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file.

  • What is meant by landmark ?: They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers. We make use of sematic elements to provide landmarks to our webpage example includes <main>, <aside>, <footer>, etc., instead of relying on generic elements like <div> or <span>.

  • Every webpage should contain one <main> element and it should include all content directly related to the page's main idea, there should only be one per webpage.

  HEADINGS ⚠️:

  • This solution generated accessibility error report: Page should contain a level-one heading. This is due to the lack of a level-one heading <h1>.

  • Headings provide structure to a webpage. It helps Search engines and Users to determine the most important piece of texts in a webpage.

  • Every webpage must have at least one h1 element identifying and describing the main content(text) of the page.

  Well done for completing this challenge 👍

  I hope have been of help, Please feel free to ask any question

  Happy Coding 🎉

  0