Submitted about 2 years ago

QR Card Component / Flexbox

@RVilums

A solution to the QR code component challenge

Solution retrospective

This is my solution for the QR Code Component challenge from Frontend Mentor. The challenge was to create a QR code component that displays a QR code image along with a title and description. The component needed to be responsive and match the provided design preview.

I built the QR code component using HTML, CSS, and Flexbox.

I thoroughly enjoyed working on this challenge as it allowed me to apply my HTML and CSS skills to create a practical and visually appealing component. I found the experience valuable in terms of improving my frontend development abilities.

I would greatly appreciate any feedback or suggestions for improvement. Thank you for taking the time to review my solution!

Code

Please log in to post a comment

Community feedback

Vanza Setia•27,715
@vanzasetia
Posted about 2 years ago
Hi, Dumpling! 👋

Here are some suggestions:
- No empty element: Remove the empty <header>. A page without a header element is fine. The only landmark that a page must have is the <main> landmark.
- No extra elements: Remove all the <div> elements. Then, style all the elements directly to the elements.
- Do not change the <html> or the :root font size: It can cause huge accessibility implications for those users with different font sizes or zoom requirements. Grace Snow explains the issue clearly—Should I change the default HTML font-size to 62.5%?—and Joshua Comeau also does not recommend that approach—The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?.
I hope this helps. Happy coding!
Marked as helpful

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