Design comparison
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!
Community feedback
- @vanzasetiaPosted over 1 year 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:rootfont 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 helpful1@RVilumsPosted over 1 year ago@vanzasetia
Thank you, Vanza, for your valuable feedback!
I appreciate your suggestions and took the time to read the articles you recommended. I will incorporate a combination of px, em, and rem units in my code to achieve responsive typography and layout. Additionally, I will utilize the calc, min, and max functions in CSS.
Your feedback has been incredibly helpful, and I'm excited to apply these best practices in my future projects.
Happy coding!
0@vanzasetiaPosted over 1 year ago@RVilums
You are welcome!
I recommend trying Utopia. It can help you generate fluid typography with
clamp()function.1 - No empty element: Remove the empty
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