Design comparison
Solution retrospective
I am most proud of learning new techniques to center an element using Flexbox. This method is more modern and versatile compared to traditional position properties. Next time, I would like to explore using CSS Grid for layout management, as it offers more control over complex designs.
What challenges did you encounter, and how did you overcome them?One of the main challenges I encountered was centering the QR code component card using position properties. Initially, I struggled with making the card perfectly centered both vertically and horizontally. To overcome this, I used Flexbox, which made the centering process straightforward and responsive. The properties justify-content: center and align-items: center were particularly helpful.
What specific areas of your project would you like help with?I would like help with receiving constructive feedback on the overall design and code structure of my project. Specifically, I am looking for feedback on:
- The effectiveness of my use of Flexbox for layout.
- Suggestions for improving the responsiveness and accessibility of the component.
- Any advanced CSS techniques that could enhance the visual appeal and performance of the component.
Community feedback
- @AlexisVari127Posted 6 months ago
Hey Ahmed, I like your solution for this challenge. The code is well-structured. One thing you could improve could be the semantic html. So instead of using divs for everything, you may try using <p>, <span> or <h2> for text elements. But from a design perspective, it looks similar to the exmaple that's been given. Good job!
Marked as helpful2@dDevAhmedPosted 6 months ago@AlexisVari127
Thank you for your feedback on my QR code project! I appreciate you taking the time to review my code and offer suggestions.
I understand the importance of using semantic HTML for better accessibility and SEO. I'll make sure to replace some of the <div> elements with more appropriate tags like <p>, <span>, and <h2> for the text elements. This will definitely improve the structure and readability of my code.
I'm glad to hear that the design looks similar to the given example. I'll continue working on both the semantic structure and the visual design to make my projects even better.
Thanks again for your constructive feedback!
Best regards, Ahmed @dDevAhmed
1 - @nafsonigPosted 6 months ago
Well done, this is a great solution well replicated. 👍
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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