QR code component using basic CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @AlifB 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  I have some suggestions you might consider to improve your code:

  • Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.

  • Additionally, you can use the <article> tag instead of div to the container card: <div class="card">.

  • The <br> tag is not a semantic tag, so you should not use it. Also, if a screen-reader reads the text, it will break the flow of reading at the line break tag, so it should not be used to add vertical spacing. There are only a few cases where it is necessary (for example, in a poem or an address), and it is possible to avoid them by applying padding and margin styles via CSS. More information here.

  • Use an h1 tag for your solution. The <h1> element is the main heading on a webpage, also, there should only be one <h1> tag per page. Swap the <h3> tag with <h1>.

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

  Above all, the project is done well 👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  2
• 

  Jonathan•510

  @corjonPosted about 2 years ago

  Here's a great resource on padding vs margin. Basically, padding is the space around an element and margin is used to separate elements.

  Marked as helpful

  1