QR Code Design Basic Css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,060

  @MelvinAguilarPosted about 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have other suggestions about your code that might interest you.

  HTML 📄:

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

  • You should not use inline-CSS because it is not a good practice. Instead, you should use an external stylesheet to style your page. By doing this, you will be able to have a better organization of your code and will be able to understand it better.

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  2

  ---

  

  Prayugo Dwi Setiyoko•60

  @Prayugo24Posted about 2 years ago

  Hello @MelvinAguilar Thank you very much about your suggestions, it's very helpful

  1
• 

  Hassia Issah•50,510

  @HassiaiPosted about 2 years ago

  Replace<div class="container">with the main tag,<p class="text-first"> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  Add the alt attribute alt=" " to the img tag to fix the error issue. The value of the alt attribute is the description of the image.

  There is no need to give the body a margin value and to style .container. Give the body the background-color you gave to .container. Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  to center .box 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.

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

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

  For a responsive content which wont require a media query for this challenge, give .box a fixed max-width value. e.g: max-width: 320px. Give the im a max-width of 100%.

  Give h1 and p the same font-size of 15px, 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

  Marked as helpful

  0

  ---

  

  Prayugo Dwi Setiyoko•60

  @Prayugo24Posted about 2 years ago

  Hallo @Hassiai thank you very much about your suggest, i will try to fix my code, it's very helpful

  0