QR code component

Community feedback

• 

  Brian Muniz Silveira•120

  @BrianMunizSilveiraPosted about 20 hours ago

  Feedback for Your QR Code Component Solution

  Great work on starting your coding journey and completing Day 1! Your project is well-structured and functional. Here’s some constructive feedback to help you improve:

  Strengths

  1. Well-Structured HTML:
     • The HTML is semantic, with clear use of elements like h4, p, and div.
  2. Basic CSS Applied Well:
     • Effective use of flexbox for centering content.
     • Good choice of colors and spacing.
  3. Accessibility Consideration:
     • Including meta viewport is great for mobile responsiveness.

  Suggestions for Improvement

  1. Add Alt Text to the Image:

     • To improve accessibility, include an alt attribute for the QR code image. Example:

       <img src="./images/image-qr-code.png" alt="QR Code to access the Frontend Mentor website">
       

  2. Better Centering with CSS:

     • Instead of using margin: 60px 100px; in .main, use height: 100vh in body for precise vertical alignment:

       body {
           height: 100vh;
           padding: 16px; /* Prevents content from being cut off on smaller screens */
           box-sizing: border-box;
       }
       

  3. Responsive Design Enhancements:

     • Add media queries to improve the layout on smaller screens. For example:

       @media (max-width: 375px) {
           img {
               width: 200px; /* Adjust image size for smaller screens */
           }
       
           .main {
               margin: 20px; /* Adjust spacing for smaller screens */
           }
       }
       

  4. Font Optimization:

     • It seems you’re loading two font families (Inter and Outfit), but only Outfit is used. Remove the unused font to improve performance.

  Next Steps

  • Test your project on various screen sizes to ensure it looks great everywhere.
  • Keep experimenting with media queries and accessibility improvements as you progress.

  You’re off to a great start—keep up the consistency and learning! 😊

  Marked as helpful

  0

  ---

  

  Uyoyo Whiskey•20

  @Uyoyo-WPosted about 16 hours ago

  @BrianMunizSilveira Thank you so much for your feedback! I'll definitely make the necessary corrections

  1

  

  Brian Muniz Silveira•120

  @BrianMunizSilveiraPosted about 15 hours ago

  @Uyoyo-W You're welcome!

  0

  

  Uyoyo Whiskey•20

  @Uyoyo-WPosted about 11 hours ago

  @BrianMunizSilveira I've implemented the corrections. Thank you once again for your feedback! It was really helpful

  1

  

  Brian Muniz Silveira•120

  @BrianMunizSilveiraPosted about 10 hours ago

  @Uyoyo-W S2

  0
• 

  Uyoyo Whiskey•20

  @Uyoyo-WPosted about 20 hours ago

  I'm embarking on a journey of learning how to code all over again and the idea is to write code consistently for the next 30 days by working on projects.

  Here's the solution to Day 1. I'd really appreciate feedback on what to do better

  1