Skip to content
Submitted about 2 years ago

QR code component

Aaron Ramirez•140
@davuboy
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I tried to do this challenge with a timer and only took me one hour to do it (with distractions). It's not my best work but i keep it simple.

-HTML

  • Pure CSS

Greetings,

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Aaron Ramirez! 👋

    You can make this project simpler by removing:

    • node_modules/: You should not put it on your remote repository. The .gitignore file from the starter files should prevent this from happening by default.
    • package.json: You do not use Tailwind. You do not even need it for this project.
    • package-lock.json: You should remove it if you remove the package.json.

    Then, put all the files inside qr-code-component-main/ to the root folder of the project.

    Here are some suggestions for improvements.

    • Each page must have one <h1>. The <h1> element is used to define the main heading of a page.
    • Improve the alternative text of the QR code. It should describe the purpose of the QR code.
    • 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 | Andy Bell

    I hope this helps. Happy coding! 😄

    Marked as helpful
  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    QR iMAGE ALT TEXT 📸:

    • The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.
    • The alt with qr-code is not even explaining for what the QR image need to be used.
    • So update the alt with meaningful text which explains like QR code to frontendmentor.io
    • Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
  • Azzy dvyastia kesuma•1,425
    @azzykesuma

    congratulations on finishing the challenge! some friendly advice

    • on mobile screen (360px) , the main and main-container class is overflowing, i believe it's caused by the fixed with of 450px you set on the main tag. I would recommend setting the lower width, or not setting the width at all at this screen size as it will overflow.
    • you can scale down the image qr by adding some additional div to contain the width of the image and give padding to said div, or you can set the width manually.

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