QR Code Component

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="container"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  The body has a wrong background-color. Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  To center .container on the page using flexbox or grid instead of position: absolute and its propeties, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center .container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .container on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  For a responsive content , replace the width in .container with max-width and increase the value for it to be equivalent to the width of the design. max-width:320px.

  Replace the height in .card with a padding value for all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement. padding: 15px.

  Give img a max-width of 100% and a border-radius value, the rest are not needed.

  Give h1 and p the same font-size of 15px and the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  1
• 

  Jeroen Leijnse•1,420

  @jrleijnsePosted almost 2 years ago

  Hey there! Great job completing your first challenge! 🎊

  I have some suggestions for your code that might interest you.

  HTML 📄:

  • Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.
  • If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to the website frontendmentor.io

  CSS 🎨:

  • To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to start learning and using rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

  For more information on this topic, you can read the following article: PX or REM in CSS?

  I hope you find my suggestions useful, and above all: the solution you provided is very good!

  Keep it up and happy coding! 😃

  1