I used HTML for semantic structure and CSS with Flexbox for layout, c
Design comparison
Solution retrospective
I'm most proud of how much I've improved in solving problems and applying what I've learned to real-world projects, like the QR code card challenge. It's rewarding to see my skills grow, especially in front-end development. However, next time, I would spend more time planning the project at the start to make sure I fully understand the requirements. I’d also test the design on different screen sizes and browsers earlier to catch any issues. Lastly, I’d make sure to document my code more clearly so it’s easier to work with in the future.
What challenges did you encounter, and how did you overcome them?One of the challenges I encountered while working on the QR code card project was ensuring that the design was responsive and looked good on different screen sizes. At first, I had trouble with the layout not adjusting correctly on mobile devices. To overcome this, I used CSS Flexbox and media queries to make the design more flexible and responsive. Another challenge was aligning the QR code and text properly, as they tended to overlap or shift unexpectedly. I resolved this by adjusting the margins, and padding, and using relative units for positioning. Overall, breaking down the problem and tackling one issue at a time helped me overcome these challenges and complete the project successfully.
What specific areas of your project would you like help with?I’ve used Flexbox to center the QR code and text, but I’m not entirely sure if it’s fully responsive across all screen sizes, so any feedback on improving the alignment or using a more efficient method would be helpful. I’ve applied the Outfit font, but I’m unsure if I’ve set the correct font weights or line heights for better readability. While I’ve used media queries to ensure responsiveness, I feel like I might be missing some adjustments for smaller screens, and I’d love input on what breakpoints to use. Additionally, I’m looking for advice on optimizing the code for various devices. Finally, I’d appreciate feedback on the cleanliness and maintainability of my HTML and CSS and if there are any improvements I could make for better efficiency.
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