QR Code component

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. 👍

@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.