QR code component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hi @MichalBednar,

  Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

  • Images must have alt attribute. In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor. (not describes the image)

  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.

  • width: 315px;an explicit width is not a good way. consider using max-width to the card inrem instead.

  • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

  • It's recommended to include a git ignore. This came with your starter files. It's less important in this challenge but will become extremely important as you move onto larger projects with build steps.

  Aside these , Good work! Hopefully this feedback helps

  Marked as helpful

  0

  ---

  

  Michal Bednář•140

  @MichalBednarPosted over 2 years ago

  @PhoenixDev22 Thank you for your advice, I completely forgot the alt attribute for my image, which is kinda silly. I will try to implement your suggestions.

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @MichalBednar Glad to help. Happy coding!

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Michal, congratulations for your solution!

  I use two approaches to space elements. When the space is equal between all the elements I use gap, for example gap: 20px and this will create a gap of 20px between all elements equally.

  If the space is not the same between all elements I use padding-bottom / margin-bottom to separate each element from top following this rule for all element. Is the case for this challenge where the padding bet the image, h1 and p are not exactly the same.

  Hope it helps, happy coding.

  Marked as helpful

  0

  ---

  

  Michal Bednář•140

  @MichalBednarPosted over 2 years ago

  @correlucas Thank you so much! I will try to implement this to my future projects!

  0