qr-code-component-main

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  In order to fix the accessibility issues:

  • Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <p>Improve your front end skill by building project</p> element with the <h1>Improve your front-end skills by building projects</h1> element.
  • The <img> tag should include alt ="" attribute. You can apply like this:

  <img src="images/image-qr-code.png" alt="qr-code"/>
  

  After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

  Hope I am helpful. :)

  1

  ---

  

  Popoola Habeeb•10

  @PopsjrPosted over 1 year ago

  Thank you, much appreciated. @ecemgo

  1
• 

  Ana Milanezi•190

  @anamilaneziPosted over 1 year ago

  Hi Slovak! Congratulations on completing this challenge 🥳

  I'm not sure if this answer your question about the body wrapper, but you could use the universal selector to do a basic reset on the page, removing default padding and margin and also box sizing to border-box, like this:

  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  

  Then you could set the body display to flex to make the content centered in the page, and use the viewport height unity to take the full height of the page:

  body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
      margin: 0;
  }
  

  This is a boilerplate for CSS that I like to use when starting my projects.

  There is a nice explanation for this concept here in this freeCodeCamp post

  As a second note, I would suggest to you consider using <h1> for the heading instead of a <p>.

  Hope this is helpful for you, happy coding! ⭐

  0