QR Code component

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted almost 2 years ago

  Hello Mihail, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  A document ought to have one primary landmark, and the absence of a main tag around the page's primary content is the root of this issue. On this page, there is no other element that is more important than the one that this challenge is based on, so to solve it, wrap all the content in the'main' tag.

  It's always a good idea to pay close attention to the proper use of semantic html elements because they are crucial for screen reader users to understand what the main content of the page is in the case of the'main' tag!

  You could have used a h1 to make the project more accessible. Every page must have a level 1 header that identifies the primary title and follows the h1-h5 format for screen readers.

  <h1>Improve your front-end skills by building projects</h1>

  The remainder is excellent.

  I hope it's useful. 👍

  Marked as helpful

  1

  ---

  

  Mihail•160

  @mihail-soltanPosted almost 2 years ago

  Hello @AdrianoEscarabote! Thank you for the valuable feedback! I'll make sure to add a main tag and headers :)

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @mihail-soltan, how are you? well done for completing this challenge, you did a good job. Checkout these: To center the content on q page in the body declare the following : body{ min-height-100vh; display: flex; align-items: center; justify-content: center;} or body{ min-height: 100vh; display: grid; place-items:center;} . You dont need to delare display : flex and its proper ties in the main , by default it is display block or display: flex; flex-direction: row;. There is no need for .qr-code div in the html because everything is already in the main. if you remove .qr-code div in the html. in the main you only specify the width value , padding value , border-radius value and background-color. in the media query give the body a width of 90% 0r 80%: body{width: 90% 0r 80%;}} this should be good for your mobile design. Hope am helpful. Happy coding.

  Marked as helpful

  1

  ---

  

  Mihail•160

  @mihail-soltanPosted almost 2 years ago

  Hi @Hassiai ! Thank you a lot for the feedback and tips! You've been very helpful :) Happy coding!

  0