Qr code challenge

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  replace <div class="container"> with the main tag and <h3> with <h1> to make the content/page accessible. click here for more on web-accessibility and semantic html

  Add the alt attribute alt=" " to the img tag and give it a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

  Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

  The image for the challenge can be found in the images folder in the zip folder you downloaded for this challenge.

  The body has a wrong background-color. give a background-color of light-gray. 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, replace the height in the body with min-height: 100vh.

  There is no need to style .qr-container.

  Give h1 and p the same font-size of 15px which is 0.9375rem, text-align: center,the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  For a responsive content,

  • Replace the width in .container with max-width, increase its value and the padding value for all the sides max-width: 320px which is 20rem/em padding:16px which is 1rem/em, there is no need to give it a height value.
  • Give the img a max-width of 100% and a border-radius value, the rest are not needed.

  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 and here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0
• 

  P

  Anamay•120

  @anamaydevPosted over 1 year ago

  Congratulations on finishing the challenge!

  When you download the starter file, you'll receive several files, including style-guide.md. This document provides information on how to design the project, such as the font, background color, and layout size. It can help you achieve a design that closely matches the original project.

  Font

  • As mentioned in style-guide.md file you can use Outfit font which can be found here https://fonts.google.com/specimen/Outfit
  • you can apply font-family: 'Outfit', sans-serif; to the body instead of applying it to title and <p></p> tag.

  Asset

  • In the folder images you can find the assets provided by Frontend Mentor that are used in the project and you can use that in folder. In this case they have provided a image-qr-code.png.

  QR Container

  • In .qr-container you forgot to make corners soft and you can use border-radius property to make it round.

  As Frontend Mentor is all about achieving the design as close as possible you have done great. Feel free to contact me if you require any further assistance.

  0