QR Code Component Challenge

Community feedback

• 

  Anurag•100

  @gpt-anuragPosted almost 2 years ago

  Hi, Congratulations 🎉 on your successful submission.

  You have an accessibility issue of "Document should have one landmark."

  Here landmark means header, main, footer, etc,. Just wrap your main section with "main" tag and you should be good to go.

  Happy coding !!!

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @renanjdev, how are you? well done for completing this challenge. You did a great job. Checkout these: First of all, type all the css in one document instead giving each html element a seperate style sheet. There is no need to give the body a class or an id in order to style the body. in the style sheet you decaler: body{ background-color: hsl()} To center a content in a page declare the following in the body: body{ min-height: 100vh; display: flex; justify-content: center; align-items: center;} or body{min-height: 100vh; display: grid; place-items: center} . there is no need to use display: flex and it properties in your main-section. Give .main-section a padding value , width value and a background-color: . main-section: { padding: 1.25em; background-color: hsl(); }. There is no need to give it a height as well. Use rem or em as unit for padding, margin and font-size. by default 1rem/ 1em = 16px; There is no need for the div in the section of your html , the section is sufficient . You forgot to add a me media query for the mobile design, in the media query give the body a percentage width value of either 90% or80%: @media (max-width: 500px){ body{ width: 90%;} } hope am helpful . HAPPY CODING

  0

  ---

  

  Renan Januário•30

  @renanjdevPosted almost 2 years ago

  @Hassiai Thanks! I'll make the improvements and call you to check it out!

  0
• 

  Renan Januário•30

  @renanjdevPosted almost 2 years ago

  Does the solution include semantic HTML? Is it accessible, and what improvements could be made? Does the layout look good on a range of screen sizes? Is the code well-structured, readable, and reusable?

  0

  ---

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Yes it includes semantic html @renanjdev, instead of <section> use <main> in the html file. The main will contain the entire content, (i.e: the qr-image and the text content). In the style sheet, give the main a white background-color and a padding value like I mention for the .main-section. This will be good with acessibility. hope am helpful.

  0

  

  Renan Januário•30

  @renanjdevPosted almost 2 years ago

  @Hassiai Hello, I refactored the code as per your instructions. Now the <footer> content is positioned next to the <main> content because the parent element is DISPLAY: FLEX, correct? I wouldn't need and a DIV to assign DISPLAY: BLOCK for me to be able to position the content of the <footer> in the footer of the page correctly?

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @renanjdev yes the footer is position next to the main:

  <main> </main> <footer></footer> put the entire text-content in a div and give it a class in the html file. <div class =" content"> heading and paragraph </div> in style-sheet give this a padding top and bottom value .content{ padding: 2em 0} and give the paragraph a padding top value : .content p{ padding-top : 1em}, this should help. mark my comment as helpful if you find it helpful

  0

  

  Renan Januário•30

  @renanjdevPosted almost 2 years ago

  @Hassiai I couldn't ask the question correctly, how can I show you?

  0

  

  Renan Januário•30

  @renanjdevPosted almost 2 years ago

  @Hassiai I refactored, can you please go to my github and check? Thank you very much!

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @renanjdev dont give the main a class in the html file, in the css just mention the main. You have not updated your style sheet in github

  0

  

  Renan Januário•30

  @renanjdevPosted almost 2 years ago

  @Hassiai Hello! how are you? can you please go to Github and check? Thanks!!!!

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @renanjdev
  replace the height in the body with min-height. replace .main-text .-clean with .-clean because .-clean is class on its own its styling will be applied to the paragraph

  0