Skip to content
Submitted over 1 year ago

QR code component

alesbe•10
@alesbe
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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!

Community feedback

  • Gabriel Gusso•250
    @g-pgPosted over 1 year ago

    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
    1
    alesbe•10
    @alesbePosted over 1 year ago

    @g-pg Thanks for the help! I implemented all the suggestions that you mentioned and now it's better! :)

    1
  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    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
    1
    alesbe•10
    @alesbePosted over 1 year ago

    @vanzasetia Thanks for the suggestions!

    I have changed the px for the rem, and after reading a bit about it makes more sense now.

    I don't know why my card appears so much bigger than the original design on the screenshot though, I have my browser with a 100% zoom and it looks good.

    Thanks! :)

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    @alesbe

    You are welcome!

    Great that you are using rem instead of px!

    You should not set font-size: 15px on the <html> element. That would defeat the purpose of using rem which is to respect the user's font size setting. Don't set font-size on the <html> element!

    Maybe your screen is bigger than the screen that is used for screenshots. In any case, you should not judge the site because it looks good on your screen because not all your users have the same screen size as you.

    Also, I recommend creating the site to look as close as possible to the design since that is the challenge.

    "Your challenge is to build out this QR code component and get it looking as close to the design as possible."

    0

Please log in to post a comment

Log in with GitHub

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