Skip to content
Submitted about 3 years ago

QR Code Component - HTML and CSS only.

Nick•30
@NickTalvy
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I found it difficult to get my padding correct for the text. Also, I attempted MQ for tablet and desktop. I feel like I made it harder or more complicated then it needed to be.

I tried to keep accessibility in mind. Please tell me what I could do better, or any best practices I missed.

Code

Please log in to post a comment

Log in

Community feedback

  • Furkan Rehber•230
    @rehberbey

    Hello, I like your work. But when playing with my screen width, your typography is not correct (check 590px) and your image may shrink as the screen width grows. Also, I recommend removing the query "(max-width: 1900px)" from media queries.

    It would be much better if you fix them. ✨

    Marked as helpful
  • Sean H•90
    @Sean-LH

    Hey @NickTalvy,

    Awesome work on finishing the project, despite the challenges you had.

    In the future I would recommend starting with the mobile design first. I find it to be simpler to manage things like spacing when the viewport is smaller. And things get more complex as you increase the viewport. With that said, you may only have to do one MQ instead of two when you're expanding the viewport in the future.

    Marked as helpful
  • Kent O'Sullivan•1,870
    @12Kentos

    Hey @NickTalvy,

    Congrats on finishing this project, it looks good!

    I did notice however that your image isn't showing up. If you change the following code.

    <img src="/images/image-qr-code.png" alt="QR Code leading to FrontEnd Mentor">

    to

    <img src="images/image-qr-code.png" alt="QR Code leading to FrontEnd Mentor">

    Your image should start working, I simply removed the / in front of the path, so it's being directed correctly.

    Secondly I checked out your css, and noticed you selected elements directly several times like so.

    p { font-size: 0.9375rem; color: var(--grayishBlue); padding-inline: 1rem; padding-bottom: 1.8rem; }

    While this is fine for a smaller project like this, I would strongly advise against doing this in larger projects, as it will cause a LOT of headache. I would instead suggest selecting every element, with either a class or with a class and then the element directly. For instance instead of selecting the p directly you could do the following.

    .card p { font-size: 0.9375rem; color: var(--grayishBlue); padding-inline: 1rem; padding-bottom: 1.8rem; }

    This way only the p elements inside of the element with a class of card will be selected.

    Hope this helps, and keep up the great work!

    Marked as helpful
  • Okechukwu Victor chiedozie•580
    @covstar

    Check out my code for help.

    https://github.com/covstar/qr-code-component-solution

    Let me know if it was 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