QRcode component

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

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 🎉