QR Code Card

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

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

  HTML 📄:

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

  CSS 🎨:

  • Setting a defined height for the card component is not recommended (height: 37em;). The content should define the component height, otherwise, it will not be allowed to extend beyond your specifications.

  • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  2

  ---

  

  Amelia Dutta•160

  @amelia2802Posted almost 2 years ago

  @MelvinAguilar Thank you for your valuable feedback! I've modified the code and will remember those strategies for future challenges. 😄

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <h2> with <h1> and add the alt attribute alt=" " to the img tag to fix the accessibility and error issue.

  the body has a wrong background-color, Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  To center .card on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center .card on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .card on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Reduce the width of .card for it to be equivalent to the width of the design and give it a padding value for all the sides. e.g: width 20em padding: 1em

  Give the img a max-width of 100% and a border-radius value, the rest are not important.

  Give h1 and p the same font-size of 15px which 0.9375em, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Amelia Dutta•160

  @amelia2802Posted almost 2 years ago

  @Hassiai Thank you for your detailed explanation. I've modified the solution.😄 And I've got a query, for styling any project(ex. bg-colour,font-family,) do we have to follow the style guide or we can modify it?

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @amelia2802 you can modify it but the styleguide is there to help and assist us.

  1

  

  Amelia Dutta•160

  @amelia2802Posted almost 2 years ago

  @Hassiai Thank you!

  0
• 

  Sandro•1,150

  @sandro21-glitchPosted almost 2 years ago

  Hi Amelia

  Here are a few suggestions for improvement your code

  Use CSS reset to standardize the default styles across different browsers, this can help you avoid cross-browser compatibility issues.

  Consider using CSS variables to store values that are reused throughout the code. This makes it easier to maintain and update the styles.

  Consider using CSS Flexbox or CSS Grid for better layout control and improved responsiveness.

  Happy Coding

  Marked as helpful

  1

  ---

  

  Amelia Dutta•160

  @amelia2802Posted almost 2 years ago

  @sandro21-glitch Thank you for your valuable feedback! :)

  0