Submitted over 1 year ago

QR Code Challenge | frontendmentor.io

Zack• 80

@ZeroScriptz

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

Nothing difficult just, I did not want to make a separate CSS file so when trying to make a media query for large scale devices it would break.

Since I mastered the React.js, TailwindCSS, and more libraries. I will continue to use them just to make it easy and fast process!

Unsure of the media queries and locations.

No questions further!

Community feedback

Amelia Dutta• 160

@amelia2802

Posted over 1 year ago

Hi Zack, Congratulations on completing your first challenge! 🎉

From your code, I can see that

You've declared the card section <section class="md">...</section> outside of the <body>...</body> tag. You should declare it inside of the body tag.
Add an alt=" " attribute to the <img> as it will be helpful for screenreaders.
wrap that .qrHead and Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a> with <p>...</p> tags as those aren't headings.
Add display:flex into the .section{..}.

Hope you find it helpful!

Happy Coding.😄

Marked as helpful

Zack• 80

@ZeroScriptz

Posted over 1 year ago

@amelia2802 Really helpful, to be honest. Did this one in a rush as I love react more lol. Whichh is my fault of-course Amelia. Thanks!

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