QR code challenge ,

Community feedback

• 

  NeptunesCoder•30

  @NeptunesCoderPosted over 1 year ago

  Congratulations on completing your first Frontend Mentor challenge, great job!

  • Here is some of my recommendations regarding your code. I hope this helps.

  • The alt attribute is used to provide alternative text for images. The alt attribute is used by screen readers to describe the image to visually impaired users, which is essential for web accessibility.

  <img scr="img/image-qr-code.png" alt="QR Code">
  

  • Position relative is use to move the element in relation to its original position or to move nested elements with position absolute in relation to its parent using offset properties. There is no need in this case because neither is happening.
  • Be careful with putting height property on elements. Try to let the content determine height along with padding and margin. Height property on elements can cause elements / component to be unresponsive. There is no point putting height on the card.
  • Class names should ideally reflect what is the purpose of the element/component and not the style. For example, header, nav, card, card-title, article-text ect. not .background, fonts, border.
  • Personally I would use .qr-card instead of .background because its a qr card.

  .qr-card {
  border: 1px solid white;
  padding: 15px;
  border-radius: 25px;
  background: hsl(0, 0%, 100%);
  padding: 15px;
  width: 330px;
  text-align: center;
  

  • Less padding on the padding or margin under the h3 would make the card match the design more.

  I Hope that helped and again, great job.

  Marked as helpful

  0

  ---

  

  cyrus K yegon•60

  @Kincyrus12Posted over 1 year ago

  @NeptunesCoder Thank you so much this is more helpful to me.

  0