QR code component

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

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

  HTML

  In order to fix the accessibility issues:

  • You need to replace <div class="container"> with the <main class="container"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
  • Each main content needs to start with an h1 element. Your accessibility report states page should contain a level-one heading. So, you need to use a <h1> element in the <main> tag instead of using <h3>. You can replace your <h3>Improve your front-end skills by building projects</h3> element with the <h1>Improve your front-end skills by building projects</h1> element.

  CSS

  • If you want to center it easily, you can add min-height to thebody:

  body {
    min-height: 100vh;
  }
  

  • then, you don't need to give margin to .container . This .container is the updated version:

  .container {
      height: 470px;
      max-width: 300px;  // max-width makes it responsive
      background: #ffff;
      border-radius: 5%;
  }
  

  Hope I am helpful. :)

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

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

  There is no need for the center tag in the html.

  To center .container on the page 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;
  }
  

  For a responsive content,

  • Replace the width in .container max-width and the height with a padding value for all the sides padding:16px which is 1rem/em
  • Give the img a max-width of 100% and a border-radius value, the rest are not needed.

  Give h1 and p the same font-size of 15px which is 0.9375rem, text-align: center,the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  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

  Marked as helpful

  0