Creating that QR code with Javascript.

Community feedback

• 

  David Gichuru•360

  @dxiDavid

  Posted over 2 years ago

  Hello @Julian-Carlosama 👋🏾

  Congrats on completing the challenge 🎉

  I have a few suggestions on how you can improve your code:

  1. HTML📃

  • Make sure your content is wrapped inside a <main> landmark tag. If you want to learn more about semantic HTML tags you can find that here.
  • Make sure that your images have alt text for screen readers which will improve accessibility for your future websites. Try to have descriptive text so that the person knows exactly what the image is.

  2. CSS📄

  • Avoid setting fixed values for dimensions like width and height. Instead set a max-width and max-height for your elements
  • Avoid using absolute units like px for anything other than border-radius or box-shadow. Use responsive units like em and rem which will make your projects more responsive.
  • To center your card you can try the following methods

  1. Using grid

  body{
       min-height: 100vh;
       display: grid;
       place-items: center;
  }
  

  2. Using flexbox

  body{
       min-height: 100vh;
       display: flex;
       flex-direction: column; 
       justify-content: center;
       align-items: center;
  }
  

  Another useful tip is to build a habit of setting custom properties for the styles found in the style guide and any other styles you might re-use.

  You might also want to set up utility classes for centering things to avoid repeating yourself throughout the code.

  Your solution looks great

  I hope you found this helpful 😁

  Happy Coding 🥂

  10

  Marked as helpful