QR Code Component Challenge Using HTML And CSS

Community feedback

• 

  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="white-box"> to a <main class="white-box">

  📌 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
  • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

  body {
        background: hsl(212, 45%, 89%);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
  }
  

  Marked as helpful

  0

  ---

  

  P

  enrightc•60

  @enrightcPosted 10 months ago

  Thank you for your detailed response, it is really appreciated. I am going to take a look at each of your points now and work my way though them. Many thanks :-) @Blackpachamame

  0
• 

  Mevindu-Dev•10

  @Mevindu-DevPosted 10 months ago

  This looks great compared to the original but the box shadow was hard to notice compared to the original. The originals box shadow is from the bottom while yours is from every side. I'm learning from your code as we speak looking at padding and box shadows in depth.

  0

  ---

  

  P

  enrightc•60

  @enrightcPosted 10 months ago

  @Mevindu-Dev Thank you! I will go back and take a look at the box shadow.

  0