QR code component design using tailwind & flex

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi @im-abhijit, 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:

  Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.

  The main heading has the tag <h2>, in this case, you should replace it with <h1> since this heading is the main title on this page. Remember that every page should have one <h1> to declare which is the most important title and that you should follow the hierarchy using the heading sequence (h1, h2, h3, h4, h5) and never jump a level.

  Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.

  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

  1

  ---

  

  Abhijit Shankhdhar•320

  @im-abhijitPosted about 2 years ago

  @correlucas thanks a lot for having a look and pointing out things will definitely make changes

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey , some suggestions to improve you code:

  • Stay away from using libraries until you fully grasp the fundamentals. This is the purpose of this challenges.

  • When you use images/icons, you want to include an Alt text tag with them. Inside that Alt Tag you want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.

  If the image/icon is decorative, then you will leave the Alt tag blank; alt=“”

  Happy Coding!

  Marked as helpful

  0

  ---

  

  Abhijit Shankhdhar•320

  @im-abhijitPosted about 2 years ago

  @vcarames thanks for having a look and pointing out changes , will implement them

  0