Mobile and Desktop QR code component HTML and CSS solution

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months 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 🏷️:

  • Wrap the page's whole main content in the <main> tag.

  • 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.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  0

  ---

  

  Luke Song•150

  @luke-songPosted 11 months ago

  thanks for the comment! I have pushed a new code after implementing your feedback.

  One question.

  how do you avoid using <br> and convey semantic? is there other tag?

  @MelvinAguilar

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  @luke-song Hello,

  you can achieve the same effect using CSS, avoiding additional HTML tags. The most commonly used property for this purpose is max-width with values in "ch" (abbreviation for characters, where 2ch is equal to 2 characters) to limit the width of the paragraph and create the desired line breaks.

  For example, for your <h2>:

  Your html:

  <h2>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level!</h2>
  

  css:

  h2 {
    max-width: 30ch;
  }
  

  Marked as helpful

  0