QR code component | First solution using CSS and Flexbox
Design comparison
Solution retrospective
I am proud of having been able to use display flex and having managed to structure CSS correctly. Next time I would try to start by coloring the background of each division to make my work with the padding and margins easier.
What challenges did you encounter, and how did you overcome them?The work of paddings and margins was mostly difficult for me. I solved this by trying these settings in different classes and sections until I managed to understand where I was modifying these properties.
What specific areas of your project would you like help with?I would like to know if the html is well laid out and if the styles page is well structured with its tag and class selectors.
Community feedback
- @AdrianoEscarabotePosted about 1 month ago
Hey k-hroma, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:
Avoid using the
<br>tag in your HTML code. While<br>might seem like a simple way to break lines, it is considered bad practice and can lead to significant accessibility concerns. For users who rely on screen readers, the presence of<br>can be announced, which disrupts the flow of the content and creates a confusing experience.Instead of
<br>, you should use semantic HTML to structure your content properly. For example, wrapping text in paragraphs (<p>) or using<div>containers for sections provides a cleaner and more accessible solution. This approach improves usability for screen readers and ensures that your content is presented in a meaningful way to all users.For more detailed guidance, refer to the MDN documentation on the
<br>tag: MDN: Accessibility Concerns of <br>Pro Tip: Accessible web development isn't just a recommendation—it's essential for ensuring inclusivity on the web!
Everything else looks great.
Hope this helps! 👍
Marked as helpful0@k-hromaPosted about 1 month ago@AdrianoEscarabote Thank you for taking the time to observe my work. It was very useful advice!
1 - @danielmrz-devPosted about 1 month ago
Hello @k-hroma!
Congrats on completing the challenge! ✅
Your solution looks great!
I have a suggestion for improvement:
📌 Think about using
<main>to wrap your main content instead of<div>.Imagine
<div>and<span>in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.This change might not have impact on how your page looks, but it'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
Marked as helpful0@k-hromaPosted about 1 month agoHello @danielmrz-dev Thank you very much for your observation, realy useful! I have taken note and made the changes!
1
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