QR Code Component using CSS Flex

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <section class="section-center"> with the main tag, <div class="title"> with <h1> and <div class="desc"> with <p> to fix the accessibility issues. click here for more on web-accessibility and semantic html

  There is no need to give .section-center a max-width value. There is no need to style .qr-card rather give the img a max-width of 100% instead of a width and height values.

  Give .qr-content a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Pwint•30

  @DaisyPwintPosted almost 2 years ago

  @Hassiai thank you for your details feedback. I'm going to try again as you suggest.

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

  I have some recommendations regarding your code that I believe will be of great interest to you.

  HTML 🏷️:

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

  • The <div> tag can be useful for styling and positioning, but it doesn't convey any semantic meaning. Instead, consider using more semantic elements like <p> to better describe the type of content. e.g.: <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>.

  • The text Improve Your Front-End Skills by Building Projects is considered a heading element (h1).

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

  CSS 🎨:

  • Remove the max-width from the .section-center element and allow it to occupy 100% of the screen width regardless of device; otherwise, your solution will not be centered on 4k screens.

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

  Happy coding!

  Marked as helpful

  0

  ---

  

  Pwint•30

  @DaisyPwintPosted almost 2 years ago

  @MelvinAguilar firstly, thank you for your suggestion. I am going to try again following your advice.

  0