QR Code Challenge

Community feedback

• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  Hay ! Jawaad Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  -> Always use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with img tag.

  -> Learn more on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  Marked as helpful

  0

  ---

  

  Jawaad•100

  @jaawPosted over 2 years ago

  @Crazimonk Thx

  1
• 

  Rio Cantre•9,690

  @RioCantrePosted over 2 years ago

  Hello there! Good job in this challenge. Viewing the solution, I think you should consider the following as well…

  • Wrap the whole content with the class of fond with specific tag like main. For HTML structures, refer it with this one Semantics
  • Add the background-color: hsl(213, 89%, 90%); in the body rule set
  • Inside the .fond rule set, remove width: 90%;, padding: 30px;, margin-top: 50px; and margin-left: 30px; . Add margin: 8rem auto;
  • Remove border-color: white;, border-style: solid;, display: block;, padding: auto;, margin-top: 100px;, font-size: 13px; and margin-bottom: 30px;. Adjust the size with width: 300px; and add padding: 1rem;
  • Remove margin: auto;, display: block;, and padding-top: 10px;. Adjust the following: width: 300px; and border-radius: 10px;
  • Add font-size: 22px; in the strong rule set. Alternative is to use h1 or one of the heading hierarchy.
  • Add font-size: 16px; and padding: 1rem; in .grey-text rule set
  • Remove media query if needed

  Above all, Well done! Keep it up and Hope this is helpful!

  Marked as helpful

  0

  ---

  

  Jawaad•100

  @jaawPosted over 2 years ago

  @RioCantre Wow awesome thank you ! I'm gonna try it !

  0

  

  Rio Cantre•9,690

  @RioCantrePosted over 2 years ago

  @jaaw Awesome! I would appreciate it if you mark it as helpful! Cheers!

  Marked as helpful

  0
• 

  Amish Verma•25

  @amishvermaPosted over 2 years ago

  Hey Jawaad,

  1)First of all, you did a good job in achieving the design. If you are working for responsiveness then try using relative units of CSS that is rem or em instead of px.

  2. You could have used the display flex property instead of adding too much margin which affects the overall responsiveness.

  0

  ---

  

  Jawaad•100

  @jaawPosted over 2 years ago

  @amishverma Thx. Ok I'm gonna try this for the next challenge

  0

  

  Amish Verma•25

  @amishvermaPosted over 2 years ago

  @jaaw

  2. You could have used the flexbox to achieve the card in the center rather than applying too much margin which affects the responsiveness

  Marked as helpful

  0
• 

  Hexer•3,660

  @EmmanuelHexerPosted over 2 years ago

  Great work. You can also checkout mine to see how i did it.

  0

  ---

  

  Jawaad•100

  @jaawPosted over 2 years ago

  @Phalcin Thx I appreciate.

  0