main qr code component using flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi Edvan, 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:

  • Don’t use id to give the style of your elements, it's not a good idea because id is a too specific selector used for forms and Javascript code. Instead, use class for styling and let the id for much specific stuff. It's also 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. Even if you don't have more than one element with that style right now, it might come later.
  • Replace the <p> 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.
  • Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

  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!

  Marked as helpful

  0
• 

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  Hi Edvan Barbosa, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is.

  to improve project responsiveness prefer to use relative measurement units at lower resolutions, or in the case of this challenge, you can do this:

  main {
      max-width: 375px;
      width: 100%;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0