Responsive QR Code Coponent

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 2 years ago

  Hi

  Well done on your first challenge! There’s a few important foundational learning points you need to get from this

  1. The alt text should say what url the QR code goes to as well
  2. Footer does not go inside main. They are distinct landmark elements
  3. The card cannot have a h3 unless it has a h1 and a h2 above it. Heading levels are nothing to do with styling and extremely important for communicating the structure of the content on the page
  4. Never style on IDs. It’s not what they’re for, and unnecessarily increases css specificity
  5. Font size must never be in px. Use rem
  6. It is more performant to link font families in the head of your html file instead of importing in css
  7. Body min height needs to be 100vh to be able to centet the card inside
  8. The card should not have a width, only max-width
  9. Dont use huge margins or paddings to try and create your layout. Use flex or grid properties instead
  10. Elements like headings and paragraphs should never have padding. Padding is for inside spacing (like in a box so content can't hit the edges). Margin is for outside spacing to keep elements away from each other
  11. There is no need for any media query on this challenge

  Marked as helpful

  2

  ---

  

  Lizbeth García Lebrón•20

  @Lizz3108Posted almost 2 years ago

  @grace-snow Omg thanks a lot for the detailed advice. I try out the changes and really like how it looks. Also thanks for explaining some concepts to me. I took out the media query and it looks awesome on my phone.

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  replace <div class="main_square"> with the main tag, <p id="main_txt"> with <h1> and and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  To center .main_square 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.

  Give the img a max-width of 100% instead a padding and height value. Increase the width of .main-section to match the width of the design.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful HAPPY CODING

  Marked as helpful

  2

  ---

  

  Lizbeth García Lebrón•20

  @Lizz3108Posted almost 2 years ago

  @Hassiai Thanks a lot for the tips, I decided to apply your suggestions. The only one that I changed was the h1 suggestion to an h3 that way I can control how many words for the line to be able to replicate the preview that they gave me.

  0
• 

  Sinisa Vukmirovic•1,690

  @SinisaVukmirovicPosted almost 2 years ago

  Hello!

  Please, have your styles in a separate CSS file.

  Also, that ".attribution" element should be outside of "main_square" element.

  To improve at media queries watch this: media query

  Good luck in improving!

  Marked as helpful

  1

  ---

  

  Lizbeth García Lebrón•20

  @Lizz3108Posted almost 2 years ago

  @SinisaVukmirovic Thanks for clarifying that the .attribution was a footer I had that confusion. Also I will check out that video about media query.

  1
• 

  Khondoker Aashabul Imam•260

  @aashabulPosted almost 2 years ago

  • you can align the card in center of the page.
  • you can notice that the padding of the QR code image and the text content is not the same. You can improve this.
  • Also for more details, you can make the header text little bit bigger and the paragraph litter bit smaller.

  2

  ---

  

  Lizbeth García Lebrón•20

  @Lizz3108Posted almost 2 years ago

  @aashabul Hey, I made some changes let me know how else I can improve

  0

  

  Khondoker Aashabul Imam•260

  @aashabulPosted almost 2 years ago

  @Lizz3108 I have checked. It looks good. But my point of view is that If you try to exactly replicate the given design you will face more challenges rather than making own designs and It will teach you more. Correct me If I am wrong. Happy coding!

  1