QR CODE COMPONENTS | HTML/CSS-FLEXBOX

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Débora Carvalho,

  Congratulation on completing your first frontend mentor challenge. I have some suggestions regarding your solution if you don't mind:

  • In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image.

  • Page should contain <h1>. In this challenge, as it’s supposed to be a part of a whole page, you may use<h1> visually hidden with class=”sr-only”. You can find it here

  • It’s not recommended to use <br> in the <p> to make the paragraph break in new line, You may use max-width to <p> and remove that <br>. Adding <br /> is semantically incorrect! <br> is meant to be used when the division of lines is significant. E.g. addresses, poems, etc...

  • An explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem.

  • height: 500px It's not recommended to set fixed height to component, you almost never want to set it. let the content of the component define the height.

  • Consider using rem and em units as they are flexible, for font-size better to use rem. 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 modern css reset on every project that make all browsers display elements the same.

  Overall, great work! hopefully this feedback helps.

  1

  ---

  

  Débora Carvalho•30

  @DeboraCristinaPPosted about 2 years ago

  @PhoenixDev22 Thanks for the feedback. This will help in my learning.

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  @DeboraCristinaP Glad to help. Happy coding!

  0
• 

  Mohammad Raza•120

  @Raza7522Posted about 2 years ago

  It should solve the problem of the card of not being at the centre:

  1. Give the 'position: relative' to the body.
  2. Give the 'position: absolute' to the footer.
  3. Then give 'bottom: 5px' to the footer. It will fix the position of the footer to the bottom. Hope it helps.

  1

  ---

  

  Débora Carvalho•30

  @DeboraCristinaPPosted about 2 years ago

  @Raza7522 obrigada pelo feedback.

  1
• 

  faizan•2,420

  @afaiz-spacePosted about 2 years ago

  Hey, @DeboraCristinaP congratulation on completing the challenge.

  • add box-sizing; border-box; in the * (universal selector).
  • add min-height: 100vh; in the body element.
  • remove margin:50px; from main element.
  • you can do width:100%.

  . . keep it up........

  1

  ---

  

  Débora Carvalho•30

  @DeboraCristinaPPosted about 2 years ago

  @afaiz-space obrigada pelo feedback. Com certeza vai me ajudar muito.

  0

  

  faizan•2,420

  @afaiz-spacePosted about 2 years ago

  @DeboraCristinaP you can speak in English. I can't understand this language.

  0

  

  Débora Carvalho•30

  @DeboraCristinaPPosted about 2 years ago

  @afaiz-space Sorry. Thanks for the feedback. It will definitely help me a lot.

  0