Skip to content
Submitted over 2 years ago

QR Code Component

Dezza Anne•250
@DezzaAnnePeregrina
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi! this is my first challenge in frontend mentor. I am willing to take advices and comments to learn more. Thanks :)

Code

Please log in to post a comment

Log in

Community feedback

  • Bryan King Pecho•230
    @bkpecho

    Hey Dezza! I wanted to take a moment to congratulate you on completing your first frontend mentor challenge. It's clear that you put a lot of effort into your work and you should be proud of your achievement. You have shown great potential in your frontend development skills and I encourage you to continue pushing yourself to reach new heights.

    I reviewed your project and I have to say that everything looks great! Your attention to detail is impressive, and the overall design is very clean and polished. However, I noticed that there is one thing missing: alt text for your qr code image. Adding alt text will not only make your site more accessible to users with visual impairments, but it will also improve your site's search engine optimization (SEO).

    Don't worry, it's a quick fix and I'm sure you'll have it done in no time. Keep up the great work and I look forward to seeing what you create next. Happy coding!

    Marked as helpful
  • Josh•1,120
    @josh76543210

    Hey there! Great job on your solution!

    Here is one more recommendation for your code:

    Add an alternate text for your image. For example: <img src="images/image-qr-code.png" alt="QR code to frontendmentor.io"/>

    Happy coding!

    Marked as helpful
  • Vanza Setia•27,715
    @vanzasetia

    Hi, Dezza Anne! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉

    I recommend removing <div class="heading">. You don't need to make the text content a flex layout. Use margin to add spacing between the heading and the paragraph. Then, use the padding of the <main> element to control the text wrapping.

    After that, for the attribution, I recommend having the class attribution on the <footer> element instead. This way, you can remove the <div> element.

    For the styling, I recommend increasing the line-height of the <body> element. line-height: 1 is making the spacing between lines of text of the paragraph too small. You should increase it to something like 1.5.

    I hope this helps. Happy coding! 😄

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