Skip to content
Submitted 9 months ago

QR Code using HTML and CSS

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

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am happy I completed it and it looks pretty much like the image, I know there is much more to learn and I hope to have better code and writeups as time goes on.

What challenges did you encounter, and how did you overcome them?

I started off by trying to do too much but in the end I simplified the code and kept it simple and that served me a lot better

What specific areas of your project would you like help with?

I am pretty happy with how it turned out, I know I can fine tune some things and get better, this is my first submission and I look forward to many more

Code

Please log in to post a comment

Log in

Community feedback

  • Eric Salvi•1,350
    @ericsalvi

    Congrats on your first submission!!!

    First here are some suggestions. I think you are missing some CSS for the image. I would try adding width: 100% height: auto and set border-radius: 10px. This should get your image looking close to the original and to not spill out beyond its container.

    I don’t think your font is loading as I am seeing just the default system sans-serif load. I am not seeing the Google import or linked code in the Head of your HTML.

    Something I challenged myself on is to keep your code as semantic as possible. Great for accessibility purposes. I would try to avoid any div or span tags. With this one you could have turned the div tag with a class name of card into a more semantic article tag. Running this through AxeDevTools (great Chrome extension to add to your toolkit) shows 3 accessibility issues. One way to overcome this is to convert your HTML div into an article tag and then wrap this article tag with a main tag. 



    You also do not have an ALT tag on your image.

    Lastly, I do notice some slight differences between the font colors and alignment. It is very important to try and get the completed work matching as close as possible. This will really start training your eyes to these little details.

    Again, great job on your submission and I am looking forward to seeing more that you do!

    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