QR code component

Community feedback

• 

  Edward Giovanni Luna•40

  @egluna-devPosted almost 2 years ago

  Hi there, this is a great effort in getting the layout and dimensions for the main component as close as possible to the design.

  As others have already mentioned, a important component of the development process is to follow the designer's style guide as close as possible which means getting the correct color for the background as well as the font family.

  Also, the text could use margin and padding to give the component more breathing room and improve the layout. Lastly, the box shadow would benefit by having a greater blur and distance according to the design.

  Other than that great work and I hope this was helpful for your learning. Cheers

  Marked as helpful

  1
• 

  Mohmed elshaarawy•830

  @MohmedElshaarawyPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

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

  HTML 📄:

  Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. 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 📘. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful! 😄

  Happy coding!

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

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

  For a responsive content which wont require a media query for this challenge, replace the width of .container with max-width and replace the height with a padding value for all the sides. Give .qr-code a max-width of 100% instead of a width and height value.

  h1 must have the same font-size as p.

  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

  1
• 

  Obada Jlelati•110

  @Obada-JLPosted almost 2 years ago

  you should break padding and change the background color

  1