Submitted almost 2 years ago

QR Code Component using HTML, CSS, and Flexbox

Alex Gonzalez•70

@luinrandir

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

First time submitting to Frontend Mentor! Nervous and excited, but looking forward to improving my skills. I am happy with the outcome and hope to get feedback on anything I could improve on. Or feedback on things I should continue to do!

This challenge felt perfect for me. It did not seem too difficult and at the same time it provided me with the challenge of looking for other parts to improve on and build upon, such as accessibility. Accessibility is something I have never considered as I started to learn, but I really want to build the habit now of incorporating the tools and techniques now instead of later on, even if it is something small at first.

The biggest question I have is the accessibility span tag I before the QR Code Image. I feel that it was a good thing to add, but at the same time I am not familiar with screen readers or other accessibility tools. This is something that after this challenge I am definitely going to research more of.

Community feedback

バレンタイン 😈•64,190
@VCaramesPosted almost 2 years ago
Hey there! 👋 Congrats on completing your first challenge!🎊🍻

Here are some suggestions to help improve your code:

Regarding you question,

Non of this is needed. The alt tag is enough for accessibility since it is meant to be scanned, but definitely include the website address "frontendmentor.io" in the description.

<span class="visually-hidden"> <a href="https://www.frontendmentor.io/" target="_blank"> Link to Frontend Mentor Site </a> </span>

FEM Best practice ✅, before moving on to the next challenge, always check your FEM report, to see what is incorrect and update your code with it so that you would not make the same mistake over again. This should be done immediately after submitting the challenge.

Every site should always have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will wrap the the entire section ⚠️.

More Info: 📚

MDN Main Element

⚠️ The attribution needs to be wrapped inside a footer element for improved semantics since it is the last content of your page.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎆🎊🪅
Marked as helpful
0
Alex Gonzalez•70
@luinrandirPosted almost 2 years ago
@vcarames Thank you so much for the feedback! I feel a little silly that I forgot the main element! I went straight ahead and fixed that issue.

Also, thank you for the FEM Best Practice suggestion. I am definitely going to make that a habit from now on.
1
バレンタイン 😈•64,190
@VCaramesPosted almost 2 years ago
@luinrandir

Glad I could help! 😁

Happens to the best of us!
0
Alex Gonzalez•70
@luinrandirPosted almost 2 years ago
@vcarames

A quick follow up since I just saw your updated message. In terms of the visually-hidden class, it is not needed because of <img> having the alt tag naturally working for a screen reader or other device that scans?
0
バレンタイン 😈•64,190
@VCaramesPosted almost 2 years ago
@luinrandir

Correct! Screen readers will "read" what the alt tag description states to users.

The only time that it will appear visibly, is when the image fails to load. But for the majority of the time it will be visually hidden by default.
1
Alex Gonzalez•70
@luinrandirPosted almost 2 years ago
@vcarames

Got it. Thank you!!
1
バレンタイン 😈•64,190
@VCaramesPosted almost 2 years ago
@luinrandir

No prob!
0

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