A QR code component created with HTML & CSS.

Community feedback

• 

  Azeem Saifi•370

  @saifion33Posted about 2 years ago

  Hi Sahil.

  Your solution is nice, however there is some issue if you want to improve check following tips.

  1. Wrap <div id="box"> into <main> tag.

  2. Use h1 tag instead of h2 and there is no need of <b> tag <h1 class="Highlighted-text">Improve your front-end skills by building projects</h1>

  3. You have separate stylesheet so don't set image height and width with inline css <img class="img" src="images/image-qr-code.png" alt="image-qr-code" > set image height and width in style.css

  4. Don't use <br> tag because isn't best practice.

  5. Remove ```<div class="footer"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="https://github.com/Sahil-Sayyad/QR-code-component">Sahil Sayyad</a>.

  </div>``` it's not importent

  6. Don't center div like this margin-top: 100px; and margin-left: 490px;

  For more reference see my solution

  I hope you find this helpful

  Happy Coding😊

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi @Sahil-Sayyad, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!

  Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

  1.Add <main> instead of <div> to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.

  2.Replace the <b> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.

  3.Instead of using ID to give style to your elements, use CLASS that’s better, note that with id these styles are not reusables, so prefer to use ID forms and Javascript and CLASS for styling.It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again.

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

  ✌️ I hope this helps you and happy coding!

  0