QR Code Attempt Number 1

Community feedback

• 

  Natasha Pierre-Louis•280

  @natashaplPosted about 2 years ago

  Hi Sadas! Welcome to Frontend Mentor. I'm new to this platform as well and recently uploaded the same solution. I took a look at your solutions and it's pretty good. I have a few suggestions.

  1. Consider wrapping your content in the main tag. It helps screen readers and is semantic HTML. You can learn more about the benefits of semantic tags here:

  HTML5 Semantic Tags: What They Are and How to Use Them!

  2. Once you place your content in that main tag, you can use it to center you content vertically and horizontally. You can remove the position: relative and "top" and "left" from the "background" since you won't need them for positioning . Here's a CSS rule you can try for the main tag:

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

  3. once all your content is centered with the main tag, you can also remove all relative position styles from the content. For example, the qrcodeimage can become:

  .qrcodeimage { max-width: 100%; width: auto; border-radius: 10px; }

  The max-width: 100% is to ensure that the image is fluid.

  4. Consider hanging the headerone div to an h1 tag. It is best practice to always have an h1 tag on your web page.

  I hope this helps.

  2

  ---

  

  Ahmed Kamel•1,190

  @hmadamkPosted about 2 years ago

  @natashapl wow! finally someone who knows about the thing called accessibility I thought I was the only one who's left

  1

  

  sadas•10

  @jaggycodesPosted about 2 years ago

  @natashapl Thank you so much! This is so helpful.

  0

  

  Natasha Pierre-Louis•280

  @natashaplPosted about 2 years ago

  @jaggycodes You're very welcome! If it was helpful, please consider marking it as helpful. Thanks! 😊

  0
• 

  Ahmed Kamel•1,190

  @hmadamkPosted about 2 years ago

  • make sure that all of your page is contained by a landmark examples of landmarks are

  header for the top section
  main for your main section
  section with aria-label to describe why you added this section
  footer for the bottom section
  
  

  1

  ---

  

  sadas•10

  @jaggycodesPosted about 2 years ago

  @hmadamk Thanks so much! Really appreciate the feedback

  0

  

  Ahmed Kamel•1,190

  @hmadamkPosted about 2 years ago

  @jaggycodes if this helped you consider marking it as helpful it really cheers me up

  0