QR code component with HTML, CSS

Community feedback

• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted over 2 years ago

  Congratulations on finishing your challenge! 🎉

  I have some feedback on this solution:

  1. Reduce the accessibility Used this code.

  <div class="card"> to <main class="card">

  2.<div class ="attribution"> to <footer class ="attribution">

  Used this property to center the card body{ display:flex; justifiy-content: center; align items: center; min-height:100vh }

  and card class used this proerty .card{ align-self: center } if my solution has helped you do not forget to mark this as helpful!

  Marked as helpful

  1
• 

  Oskar•330

  @slothmast3rPosted over 2 years ago

  Hey man! Great work. I studied your code and what I recommend is to be more consistent in your styling (or just use classes). Your styles are all over the place. Some in DOM elements e.g. style="..." some in <styles>.... </styles and some in file style.css. Just use one and be consistent

  Marked as helpful

  1

  ---

  

  Oskar•330

  @slothmast3rPosted over 2 years ago

  @slothmast3r preferably style.css :D

  0

  

  Shivlal Sharma•30

  @sshiv5768Posted over 2 years ago

  @slothmast3r Thanks for the feedback. I will surely keep it in my mind.

  0
• Account deleted

  Hello there! 👋

  Congratulations on finishing your challenge! 🎉

  I have some feedback on this solution:

  • Always Use Semantic HTML instead of div like <main> <header> , etc for more info

  • Give The body these properties to center the element display:flex justifiy-content:center align items: center min-height:100vh

  if my solution has helped you do not forget to mark this as helpful!

  Marked as helpful

  0

  ---

  

  Shivlal Sharma•30

  @sshiv5768Posted over 2 years ago

  @Old1337 Thanks for the feedback.

  1
• 

  Rio Cantre•9,690

  @RioCantrePosted over 2 years ago

  Hello there! Good job in completing this project. Looking at your solution, I would suggest the following for you...

  • Import the attribution style in CSS file and remove style tag
  • Wrap the whole content of card with specific tag like main and attribution with footer. For HTML structures, refer it with this one Semantics
  • Instead of inline style, import the style in CSS file
  • Include description in the alt in img tag, like this line <img src="images/image-qr-code.png" alt="" style="width: 90%">
  • Clean the whitespaces in the code
  • Adjust the margin in .card with margin: 7rem auto;
  • Add font-size: 22px;, margin: 0; and padding: 0 1rem; in h2 rule set
  • Add padding: 0 1.1rem; in p rule set
  • Add padding-bottom: 1.8rem; in .container rule set
  • Remove margin-top: 10px; in img and replace it with margin: 1rem;

  Above all, you did good and Keep up the good work! Hope this helps!

  1

  ---

  

  Shivlal Sharma•30

  @sshiv5768Posted over 2 years ago

  @RioCantre Thanks for this brief feedback. I will definitely try this.

  0

  

  Rio Cantre•9,690

  @RioCantrePosted over 2 years ago

  @sshiv5768 No worries! I would appreciate it if you mark it also as HELPFUL! Cheers!

  0