Submitted almost 2 years ago

QR-Card-Challenge

Zeeshan• 30

@Zeeshanalt

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

Hey @Zeeshanalt, adding to what was said above/below:

The Alt Tag description for the QR image needs to be improved upon. Its needs to tell screen reader users what it is and where it will take them to when they scan it.
Change the width to max-width 100% in your image to make it responsive.
Change the width to max-width: 320px in your card container to make it responsive.
Delete the following from the .main it is unnecessary and add padding to it.

.main{  
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content:space-between;
    flex-direction: column;
    gap:25px;
}

Happy Coding! 👻🎃

Damian• 150

@damiandev22

Posted almost 2 years ago

hi, I have an advice I think might be of help to you. If you wrap the "improve" and the "scan" classes inside a div you can treat them as a unit and give them proper padding and margin so they can be aligned the same. greetings.

Lucas 👾• 104,420

@correlucas

Posted almost 2 years ago

👾Hi @Zeeshanalt, congratulations on your solution!

Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

Reduce your code by removing unnecessary elements. The HTML structure is working but you can reduce at least 20% of your code by cleaning the unnecessary elements, you start cleaning it by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.

<body>
<main>
<img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

Save your time using a CSS RESET to remove all default settings that are annoying as the margins, paddings, and decorations and optimize it making it easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

✌️ I hope this helps you and happy coding!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord