QR-Code-Component

Community feedback

• 

  Yínx•320

  @YinkajayPosted 12 months ago

  The main heading color should match the one specified in the design file. Referring to the style guide markdown file provided can help identify all the document colors accurately.

  Additionally, the body background color needs adjustment to align with the design file. Setting it to the lighter gray color hsl(212, 45%, 89%) will ensure consistency with the design standards.

  For mobile screens (375px), consider resizing the QR card to enhance responsiveness. Shrinking its dimensions will facilitate better adaptation to the mobile layout.

  Beyond these observations, the overall solution is strong and meets the project requirements effectively.

  Marked as helpful

  0

  ---

  

  Sivakumar•10

  @SivakumarAmsaPosted 12 months ago

  Thank u for your feedback bro.. I'll try to improve myself 👍🏻@Yinkajay

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 12 months ago

  Hello @SivakumarAmsa!

  Your project looks great!

  In addition to Melvin's comment, I also have some small suggestions for changes that will make your project look even closer to the original design:

  • You can change your body background-color to #D6E1F0.

  • Also, that attribution div is supposed to be a footer on the page, so you can place it outside the card.

  Other than those little details, you did a great job!

  Marked as helpful

  0

  ---

  

  Sivakumar•10

  @SivakumarAmsaPosted 12 months ago

  Thank u for your feedback bro.. I'll try to improve myself 👍🏻@danielmrz-dev

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 12 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Avoid inline CSS; opt for an external stylesheet for better code organization and understanding.

  • Enhance accessibility and organization with semantic elements like <main> and <footer>.

  • Provide an alt attribute for the QR code image, explaining its purpose, e.g., QR code to frontendmentor.io.

  • Improve readability by adjusting the paragraph element's color to hsl(220deg, 15%, 55%).

  • Use relative units (em or rem) for font-size instead of pixels. Learn more here 📘.

  • Prefer min-height: 100vh over height to prevent component cutoff on smaller screens.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0

  ---

  

  Sivakumar•10

  @SivakumarAmsaPosted 12 months ago

  Thank u for your feedback bro.. I'll try to improve myself 👍🏻@MelvinAguilar

  0