QR Code Component with HTML CSS and FLEXBOX

Community feedback

• 

  Kyrylo Haiduk•420

  @superpooperxxxPosted almost 2 years ago

  Hi, good job on making this project🔥

  • You are using <section> incorrectly. <Section> is some huge part of website, for instance "Testimonials", "Contacts", "About us" and so on. In this project you actually have only one section which is this hole project.

  <section class="qr-image">❌
    <img src="images/image-qr-code.png" alt="" />
  </section>
  <section class="text">❌
    <h1>Improve your front-end skills by building projects</h1>
    <p>
       Scan the QR code to visit Frontend Mentor and take your coding
       skills to the next level
    </p>
  </section>
  

  ✅
  <section class="container"
   ...
  </section>
  

  • Always give alt description to image elements. Those are crucial, as they replace the image if it is broken or cannot load with text in alt.

  ✅
  <img
    src="images/image-qr-code.png"
    alt="QR code to move to frontend mentor website"
  />
  

  Happy coding❤️ Hope this was helpful

  Marked as helpful

  1

  ---

  

  Adnan Haydir•70

  @adnanhaydirPosted almost 2 years ago

  @superpooperxxx thanks!

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

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

  To center .container-box on the page, replace the height in .container with min-height:100vh.

  There is no need to give .container-box a height value, replace that with a padding value for all the sides. padding: 15px. there is no need to style .qr-image, give the img a max-width of 100%.

  Add a font-size of 0.9375rem which is 15px to .text this will be the font value for both h1 and p, There is no need to give h1 and p font-weight values.

  Use relative units like rem or em as unit for the padding, margin and width 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

  1

  ---

  

  Adnan Haydir•70

  @adnanhaydirPosted almost 2 years ago

  @Hassiai thanks!

  0