Skip to content
Submitted over 2 years ago

QR code component

alesbe•10
@alesbe
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Approach

Since this was a very easy challenge, I decided to use Vanilla HTML and CSS!

Design decisions

I had some doubts deciding which unit should I use. Since the card size don't change from one screen size to another, I decided to use px instead of a relative unit.

Also, I guess that the css selectors could be optimized a bit, some feedback would be apreciated!

Code

Please log in to post a comment

Log in

Community feedback

  • Gabriel Gusso•250
    @g-pg

    Hey @alesbe!

    Nice solution!

    I noticed some improvents you could make. Some of them would fix these warnings you received on your accessibility report.

    1. Try to always wrap the main content of your page in <main> tags.
    2. Avoid using <h2> if there's no previous <h1> on the same page. The best practice to ensure accessibility is following an order of heading tags.
    3. Don't forget the "alt" attribute in your <img> tag. This is what screen readers read. Also, it's the alternative text for images that doesn't load for some reason.
    4. You put text directly inside a <div> tag. It would be more appropriate to wrap your text inside a <p> tag in this case. Again, this is for accessibility purposes.
    Marked as helpful
  • Vanza Setia•27,715
    @vanzasetia

    Hi, @alesbe! 👋

    About your design decision, you should use rem unit to make everything scale properly when the users change the browser's font size. Using pixel units will not respect the changes in the browser's font size setting.

    The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?

    <img> element must have alt attribute. Also, the QR code is the main content of the card, so it should have alternative text. The alternative text should describe what the QR code is about.

    Remove <div class="card-image">. Instead, you should make the <img> as a block element and set max-width: 100% to prevent it from overflowing. Then, set the border-radius on it. This way, you don't need an extra <div>.

    Replace the <h2> with <h1>.

    Wrap the text with a meaningful element like a paragraph element. There should not be text in <span> and <div> alone.

    Remove width from the .card and set max-width. This way, the card is allowed to shrink if ever needed.

    I recommend using a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset | Andy Bell

    I hope this helps. Happy coding! 😄

    Marked as helpful

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