QR-code-component-solution

Community feedback

• 

  FaberBenjamin•270

  @FaberBenjaminPosted almost 2 years ago

  Normally, if you have a div element in your body and nothing else, the body will adjust its size to its content[children]. (simplified.: the body will have the same height and width as the element inside, even if it smaller then the screen-size. You can check it in the dev-tools to see if your actual body is smaller than your visual screen)

  To overcome this, you can set the body height manually with height or min-height. The latter is more preferred because the first one can cause overflow issues. As mentioned before you can also set the body to flex and adjust accordingly or play around with the display: inline-block or grid selectors.

  Actually it is more hard to grasp than it seems (even I tend to be "lazy" about it from time to time.) If you need more help, you can find me on github/twitter so we could talk more about it.

  Your project looks nice btw. Keep going on!

  Marked as helpful

  1
• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Hello 🙌🏻 Your solution looks great however here are a couple of things you can improve which I hope will be helpful! 😎

  Centering things can be done in various ways and it depends on your preference and on the structure of the HTML or what you plan to do with it in the future. It's always a hot topic even for seniors 😂 You can read this article, it covers enough for the start: https://www.freecodecamp.org/news/how-to-center-a-div-with-css-10-different-ways/

  Make sure to use rem (relative length value) or em units instead of pixels for the purpose of “respecting the user preferences”, to say so. It makes the “sizes” of the website fluid according to the zoom/sizes set by the user.

  You can read more about it here: https://www.freecodecamp.org/news/what-is-rem-in-css/

  The image under the div with the class "img" should have an alt tag filled out. Alt attribute for the image is important in order to specify alternative text for the image in case it will not be displayed. Using alt attribute is good for not only accessibility but also SEO and for situations when the image is loading too slowly. 
If the image is just for decoration you can still write an alt attribute but leave it empty, such images don’t need any alt tag but you will need to also add aria-hidden=“true”. What aria-hidden does is that it removes the entire element from the accessibility tree.

  If otherwise, you need to use an alt tag to describe the image. To write an alt tag you need to describe the content and purpose of the image and try not to use words like “picture of” or “image of”.

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace<div class="container">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  Give the img a max-width or width of 100% instead of fixed value, there is no need to give the img a margin value.

  give .txt a padding value for all the sides, there is no need to give it a percentage width and a margin value. give h1 a margin-bottom value or p a margin-top value.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1