QR scanner designed using html and css

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  QR iMAGE ALT TEXT 📸:

  • The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.

  ---

  • The alt with QR_code is not even explaining for what the QR image need to be used.

  ---

  • So update the alt with meaningful text which explains like QR code to frontendmentor.io

  ---

  • Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0
• 

  Arif Faisal•580

  @arifaisal123Posted over 1 year ago

  Good work! Flexbox is an important concept which you can use to center your div elements both vertically and horizontally.

  In your code, instead of hardcoded value like using margin to position the box_1 element, you can put this box_1 element inside a container div element.

  I have refactored your HTML as below:

  <div class="container"> <div class="container"> <div class="box_1"> <div class="image"><img src="./image-qr-code.png" alt="QR_code" class="QR_img"></div> <div class="content"> <h4>Improve your front-end skills by building projects</h4> <p>Scan the QR Code to visit Frontend <br> Mentor and take your coding skills to <br> the next level</p> </div> </div> </div>

  Now your box element is inside the container div element. After that, add the following style code in your style element.

  .container { display: flex; justify-content: center; align-items: center; min-height: 100vh; }

  This code will ensure that all its child elements are centered horizontally and vertically. Finally I removed the hardcoded margin value from your box_1 class.

  Other ways of centering you can explore are "top bottom transform: translate" and "CSS grids system"

  0