QR Code challenge using HTML and CSS

Replace<div class="container">with the main tag, <h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. Add the alt attribute alt=" " to the img tag to fix the error issue. the value of the alt is the description. click here for more on web-accessibility and semantic html

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

To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

To center .container on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

To center .container on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hi Miloš Dikić👋 Great job on completing this challenge! 🥳

• I have one suggestion for improvement is to take advantage of CSS cascading to limit the number of CSS selectors used in the code. For example, instead of using the .text h2 selector and the .text p selector to format the heading and the paragraph, you could add a class to the heading and paragraph elements in the HTML, and then use that class as a selector in the CSS. This would make the code more readable and maintainable.

html
<div class="text">
  <h2 class="card-heading">Improve your front-end skills by building projects</h2>
  <p class="card-paragraph">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>

.card-heading{
    margin-bottom: 20px;
    color: hsl(218, 44%, 22%);
    font-weight: 700;
}

.card-paragraph{
    color: hsl(220, 15%, 55%);
    margin-bottom: 20px;
    font-weight: 400;
}

Overall, this is a very well done solution to the challenge. Great job!

Hope I'm Helpful! 👍

Keep up the good work! 😊❤️