Skip to content
Submitted almost 2 years ago

QR Code Component

Dezza Anne•250
@DezzaAnnePeregrina
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

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

Community feedback

  • Bryan King Pecho•230
    @bkpechoPosted almost 2 years ago

    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
    1
  • Josh•1,110
    @josh76543210Posted almost 2 years ago

    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
    1
  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    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! 😄

    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