QR code submission

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

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

  • Change the name of the file qrcode.html to index.html to access the solution only using https://cyclone3603.github.io/qr-code-component-main/. by default when typing a url the file index.html is displayed and that's why you had to manually write the file name.

  HTML 📄:

  • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

  • Always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>).

  CSS 🎨:

  • 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. You can read more about this here 📘.

  • Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport.

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

  Happy coding!

  Marked as helpful

  0

  ---

  

  Cyclone3603•90

  @Cyclone3603Posted almost 2 years ago

  @MelvinAguilar I named the file qrcode.html because I want all my projects to be in one giant website. https://cyclone3603.github.io is the main website with links to all the rest of them, that's why the naming is off.

  I didn't know that something like a <main> tag existed. Will remember for next time, I'll edit the code. I'll also remember the the heading levels for next time.

  How do I make the text break and go to the next line within the same <h1> tag without using a <br> tag?

  I'll remember the units for next time, do these help with responsiveness too?

  Thanks for all of your inputs! I'll be sure to include all of them in my next project!

  0

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  @Cyclone3603 Hi

  • That is valid, but it is a standard to set the name of the main file as "index.html", I share this repository with many challenges where in each one the file is called as index.html, you will see that there is no problem in using that name:

  https://github.com/elaineleung/frontendmentor

  When using many index.html what matters is the folder, not the name of the file, plus it has fewer letters.

  before: https://cyclone3603.github.io/product-preview-card-component-main/productreview.html

  after: https://cyclone3603.github.io/product-preview-card-component-main/

  • Testing with your solution, currently if I remove the <br> tag I don't see a difference but if it has problems I personally set a maximum width and try to center it with margin, e.g. (Random values):

  p {
      max-width: 15ch;
      margin: 0 auto; /* If you don't use flexbox in the component, to center it use margin auto. */
  }
  

  Marked as helpful

  0

  

  Cyclone3603•90

  @Cyclone3603Posted almost 2 years ago

  @MelvinAguilar Ohhh, it's only the folder that matters? So I can just link the folder instead of the HTML?

  max-width seems like an interesting property. I'll have to play around with it. Thanks for letting me know!

  0
• 

  Ansly•290

  @Median21Posted almost 2 years ago

  Hello there! You did a good job following the designs and completing the challenge 😀

  Here are the problems I would like to address:

  - Don't start your code by putting it in a <div> even though it is still acceptable, since this challenge only requires one content, it is still a good practice to use semantic elements like <header>, <main>, and many more. So that it is easier to be seen in search engines and makes it more specific.

  - The <br> tag is not a semantic element. If a screen reader user is reading the page, they will hear "line break", which breaks the flow of the content. Instead, use CSS properties like margin and padding to add vertical space between elements. (I got this tip from a feedback, so I also wanted it to share to you)

  Overall, you did a very good job! Knowing that you just came back from coding 💪

  1

  ---

  

  Cyclone3603•90

  @Cyclone3603Posted almost 2 years ago

  @Median21 Thanks for the support!

  1