QR Code Component Main (HTML, CSS)

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @elidrc 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  It's a great solution and a good start 👏. I have some suggestions you might consider to improve your code:

  • The alternative text must not contain hyphens, underscores, or the words "image", "picture" or "photo", because the image tag already provides enough information that it is an image

  • To make alternative texts more worthwhile, add descriptive text to the alt attribute of the QR image to explain what the QR image does. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.

  • Setting a defined height for the card component is not recommended. The content should define the component height, otherwise, it will not be allowed to extend beyond your specifications. Alternatively, you can use min-height.

  • Use margin: 0.938rem or margin: 15px in the .card selector to add some space for the container card and the screen edge on mobile devices.

  • Use max-width: 320px to .card selector instead of width, this will make the container card a bit responsive on mobile and set the element's maximum width to 320px.

  • Update the image selector to make responsive images.

  qr-container {
     padding: 0.938rem 1rem;
  }
  .card .qr-container > img {
      /* width: 288px; */
      /* height: 288px; */
      border-radius: 0.625rem;
      /* margin: 0.938rem 1rem; */
      width: 100%;
  }
  

  Please don't worry if your suggestions are long, they are just details. In the end, the project is well done 👏. Hope you find those tips helpful! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  1

  ---

  

  elidrc•80

  @elidrcPosted almost 2 years ago

  @MelvinAguilar thanks for your suggestions I already made the changes in the code.

  1