Submitted about 2 years ago

QR Code Component

Steven Noyes•270

@SteveNoyes

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Franciscus Agnew•10

@franciscusagnewPosted 3 months ago

Hello Steven,

Excellent work on this challenge! Your code is well structured, readable, reusable, and doesn't differ from the design requirements. The only recommendations that I have are that you make provisions for your solution to be responsive for smaller screen sizes as your padding spaces around your image shrink on smaller screens and to make the elements more accessible by maybe inserting your code inside a <main> & <footer> element like so:

<body>
  <main class="qrCard">
    <img src="assets/images/image-qr-code.png" alt="QR code">
    <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>
  <footer class="attribution">
    <p>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="https://www.frontendmentor.io/profile/SteveNoyes">Steven Noyes</a>.</p>
  </footer>
</body>

Cheers,

Franciscus

josef5•10
@josef5Posted 3 months ago
Consider extending the height of your main area so it aligns with the design preview, that will make it easier to compare. Have another look at your corner radiuses, your line-heights and your margins. Its hard to tell with the slider but your overall width might be off too. Hope that helps.
0

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