Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code Component - HTML & CSS

@JheanKhendrick

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feel free to notify me about things that could make this better. Also, a challenge suggestion is much appreciated.

Thank you!

Community feedback

PhoenixDev22 16,990

@PhoenixDev22

Posted

Hello Jhean Khendrick,

Congratulation on finishing this challenge. I have few suggestions regarding your solution:

CSS

  • Consider using min-height: 100vh instead of height: 100vh to the body , that let the body grows taller if the content of the page outgrows the visible page.
  • Consider using rem for font size , it' not recommended to use px for font size as absolute units don’t scale for example 15px will always be 15px on the same device. Using pixels is a particularly bad practice for font sizing because it can create some accessibility problems for users with vision impairments.
  • To target the DOM elements for styling purposes, better to use classes so that it could be more manageable and reusable.
  • There are some repeated styles like : text-align: center;

Aside these, great work! Hopefully this feedback helps.

Marked as helpful

0

@JheanKhendrick

Posted

@PhoenixDev22 Hi! I appreciate the suggestion, I went on and changed all of it as you suggested and I will use some of those for future projects now. Thank you!

1
PhoenixDev22 16,990

@PhoenixDev22

Posted

@JheanKhendrick Happy coding!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord