This is my solution to this fun qr-code challenge!

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="div-master"> 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

  Add the alt attribute alt=" " to the img tag and give it a value to fix the error issue. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

  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.

  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.

  For a responsive content:

  • Give .div-master a fixed max-width, max-width: 320px and replace the height with a padding value for all the sides. padding:16px. -Give the img a max-width of 100% and a border-radius , the rest are not needed.

  To center .div-master on the page using flexbox or grid instead of margin:

  • 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
• 

  RabicaTahir•500

  @RabicaTahirPosted over 1 year ago

  @peredopr. 🎯Congratulations on completing the challenge !

  💬I have some suggestions about your code.

  HTML 🔔:

  ▪ It's necessary for images to have short, descriptive alt text so screen reader users clearly understand the image's contents and purpose. Click and Change

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

  ▪ It is advisable that you place all your main site content in a landmark element <main>. Wrap the body code in main tag. Click & Wrap

  <div class="div-master">

  ▪ Best practice is to ensure that the beginning of a page's main content starts with a h1 element. Click & Replace

  <h2>Improve your frond-end skills by building your projects</h2>

  CSS: 🎨

  📍▪ Instead of using pixels in font-size, using relative units like em or rem is a good practice.

  I hope you find it useful! By the way, the solution was great. 🙌💯

  Enjoy coding, Stay Safe! 🤞

  0