Frontend Mentor | QR Code Card coding challenge solution

@MelvinAguilar

Posted almost 2 years ago

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

Here are some suggestions you might consider:

With semantic tags:

<body>
   <main class="container">
      <article class="qrCard">
         . . .
      </article>
   </main>
<body>

For specificity reasons you should work better with classes since they are reusable, and you can leave the ID when you work with Javascript.
If you use classes, you should not name classes with the camelCase convention. Use naming conventions to name it.
Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
Use max-width: 375px to qr-card selector instead of width, this will make the card container a bit responsive on mobile and set the element's maximum width to 375px.
Remove width: 325px; from the qrCardContent.
Use margin: 0.938rem or margin: 15px in the qr-card selector so that it has some space when viewed on mobile devices.
Update the image selector to make responsive images.

#qrCode {
    /* max-width: 375px; */
    width: 100%;
    object-fit: contain;
     border-radius: 30px;
}

I hope those tips will help you.

Good job, and happy coding!

Marked as helpful

@DiggsDev

Posted almost 2 years ago

@MelvinAguilar Thank you, very helpful and I will use these tips going forward along my developer journey!

QR Code Card