Submitted over 1 year ago

QR Code Component

Dezza Anne• 250

@DezzaAnnePeregrina

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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

@bkpecho

Posted over 1 year 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

Josh• 1,070

@josh76543210

Posted over 1 year 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

Vanza Setia• 27,795

@vanzasetia

Posted over 1 year 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! 😄

Please log in to post a comment

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