QR code component solution

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace,<div class="card"> with the main tag to fix the accessibility issue. For a responsive content, replace the width of .card with max-width and change the vheight value to auto. Add a padding value for all the sides to .card. Give the img a width or max-width of 100% instead of a fixed height value.

  Give .content a padding value for all the sides instead of a margin value or values. Give h1 a margin-bottom valuer or p a margin-top value for the space between the text/ there is no need to give h1 a font-size.

  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

  0

  ---

  

  Beaula Ekka•30

  @BeaulaEkkaPosted almost 2 years ago

  @Hassiai Thank you so much !

  0
• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  HI! Your solution looks nice though there are a couple of things you can improve which I hope will be helpful! 😊

  <img src="./images/image-qr-code.png" alt="">
  

  This image needs an alt attribute.

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

  Make sure to wrap the entire code in the main tag instead of using the div, the one where the class is “card”. It will help to remove report issues and improve accessibility as well. If you are using, for example, header or footer tags, you can place them outside the main tag.

  I also see you don’t have README. README is a very important aspect of making projects, especially if you want other people to see it. As the name says, it’s the first thing people read when interacting with the project, it is kind of a manual. You can include many things there like the languages you used, which dependencies you installed, what was the process like, and what did you achieve or learn. Frontend Mentor also has a pretty nice README template which you can use to tailor the one depending on your preferences.

  0

  ---

  

  Beaula Ekka•30

  @BeaulaEkkaPosted almost 2 years ago

  @catherineisonline Thanks a ton !! I really appreciate you taking time to look into my project.

  0