QR Code solution

Community feedback

• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 10 months ago

  Hello @akari08-mp4!

  Your solution looks great!

  I have a suggestion for improvement:

  • For semantic reasons, use <main> to wrap the main content instead of a <div>.

  📌 This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Greetings! you have done a great job 😎

  📌 Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container">

  📌 Some suggestions

  • I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
  • I leave you the task of researching the reset CSS and the box-sizing: border-box
  • If you didn't apply the reset, you can add margin: 0 to your body, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply the margin again using media querys
  • You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
  • Apply max-width: 100% to your img so that it occupies the correct width within the container. Remove width: 300px

  Marked as helpful

  0