QR code using basic html & css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have other suggestions about your code that might interest you.

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

  • The <br> tag is often used to create line breaks, but it doesn't convey any semantic meaning. When a screen-reader reads the text, it will break the flow of reading at the line break tag, which can be confusing for users. More information here.

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1

  ---

  

  AlbertoT93•10

  @AlbertoT93Posted 11 months ago

  @MelvinAguilar Thank you for your help!

  0
• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 11 months ago

  Hello, @AlbertoT93!

  Your project looks great!

  About responsiveness:

  • This project is not responsive since both mobile and desktop versions are the same, so in this case you don't need to worry about that. Responsiveness will be a challenge on the next projects!

  • Also, I noticed that you used margin to place your card closer to the middle of the page. I have two easier and very efficient ways to do that without using margins:

  You can apply this to the body:

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

  or you can apply this to the element you wanna center:

  .element {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
  }
  

  I hope it helps!

  Other than that, you did a great job!

  Marked as helpful

  1

  ---

  

  AlbertoT93•10

  @AlbertoT93Posted 11 months ago

  @danielmrz-dev Thank you for your help!

  1