QR Code Component

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted over 1 year ago

  Hi! Great work out there! I just noticed that you are using position absolute on .main to center the component vertically. However, I have a suggestion. Instead of using position absolute, you can use d-flex and other properties it offers to align the component in the center. This approach provides more flexibility and responsiveness for centering content. I hope this suggestion helps and works. Happy coding!

  body {

  add this 
  background-color: hsl(212, 45%, 89%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  

  } .main {

  border-radius: 20px;

  width: 380px;

  height: 570px;

  you can remove this
  /* margin: auto; */
  /* position: absolute; */
  /* top: 50%; */
  /* left: 50%; */
  /* display: flex; */
  /* transform: translate(-50%, -50%); */
  

  background-color: hsl(0, 0%, 100%);

  }

  Marked as helpful

  1

  ---

  

  icewonn•30

  @icewonnPosted over 1 year ago

  @AkoToSiJeromeEh Thank you so much. I take into account what you said.

  0
• 

  Wayne Johnson•40

  @wjwebdevPosted over 1 year ago

  Hello! Nice work!

  **Feedback: (Adding an image in HTML) I noticed you added the qr code image using the background-image css property. Another good alternative would have been to use the html <img> tag which requires you to add a src attribute which you can then specify the location of your image like this <img src="images/image-qr-code.png">

  another benefit to using the html img tag is that you're able to use the alt attribute which allows you to add alternative text that will appear if the browser for some strange reason doesn't load your image. here's an example of using the alt attribute <img src="images/image-qr-code.png" alt="qr code image"> This also benefits people that have to use screen readers on websites.

  Hope this helps :)

  Overall excellent work! I look forward to seeing your next project!

  Marked as helpful

  0

  ---

  

  icewonn•30

  @icewonnPosted over 1 year ago

  @wjwebdev Thanks for your feedback! I take into account what you said.

  1
• 

  Enes Eken•540

  @enesekenPosted over 1 year ago

  Merhaba Mert 👋

  Kodun süper , <div class="main"></div> yerine HTML5 ile gelen "Semantic Elements" özelliğini kullanabilirsin. Bunun içinde <main></main> etiketini kullanmalısın.

  Ayrıca <div class="qr"></div> yerine <img/> kullanırsan daha doğru olur.

  Websitemi Ziyaret Et 🌐

  Marked as helpful

  0

  ---

  

  icewonn•30

  @icewonnPosted over 1 year ago

  Merhaba, @eneseken geri bildirimin için çok teşekkür ederim. Dediklerini dikkate alıyorum ve öğrenmeye devam ediyorum.

  0