QR Code Competent Feat. Flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello averagedeveloper, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!

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

  1.Use <main> instead of <div> to wrap the card container, its better to use <mai> in this case because you’re indicating that’s the main block of content of this page and also because <div> doesn’t have any meaning, it's just a block element.

  2.Add the correct size to avoid the container growing more than it should. In this case the QR CODE component size is max-width: 320px.

  3.Don't forget to use the alt text to allow screen readers to recognize that img. Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image.

  ✌️ I hope this helps you and happy coding!

  1

  ---

  

  averagedeveloper•40

  @mpgithubcodePosted about 2 years ago

  @correlucas Thanks lucas. That was super helpful as I had trouble positioning the div. you are right, the QR Code element was centered in my browser, but I guess in this view the true div component did not have the correct size

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @mpgithubcode I'm happy to hear that bro! Keep it up =)

  1