Skip to content
Submitted almost 2 years ago

QR - Code

Derek Lartey•110
@DerekLartey
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

This is the third time I'm submitting this project. The first two I made weren't responsive. Learned my mistakes with the help of a good friend and some research. Glad to have it done now!

Community feedback

  • Cyclone3603•90
    @Cyclone3603Posted almost 2 years ago

    I really like your solution! Seems a bit bigger than the original though. I set the width of mine to around 250px. That set the height to be closer to the original, maybe try something in that range?

    I also just wanted to ask how you got your site up? I've been trying (and failing) to do so for the past 3 days.

    Marked as helpful
    0
    Derek Lartey•110
    @DerekLarteyPosted almost 2 years ago

    @Cyclone3603

    Thanks for the feedback. I have everything updated and the site should be up and running now.

    0
  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Derek Lartey! 👋

    Great job on keep improving your solution! 👏

    But, I only see one commit in your GitHub repository. Are you doing git push --force or creating a new repository?

    I would recommend keeping track of the changes by creating a new commit and having one solution page. This way, you have the track record of your project and are preventing your Frontend Mentor profile from having three QR solutions. 🙂

    Here are some suggestions for improvements.

    • Add <meta> viewport tag in the <head> tag. Put it below the <meta> charset. It is important to make a responsive website.
    • Remove the <strong> element. You don't need to use it.
    • Alternative text for the QR code should describe the purpose of the QR code. (e.g. "QR code to frontendmentor.io")
    • Remove the </strong> on line 20. There is only the closing tag but there is no opening tag.
    • Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset
    • The card only needs a max-width to be responsive. Remove width and height.

    I hope this helps. Happy coding!

    Marked as helpful
    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