Design comparison
Solution retrospective
I learned how to create a qr code scan using html and css only, I am proud of the fact that I finished this project on my own, without using YouTube to code alone.
next time I will try to use bootstrap to make my coding much faster, I was actually stock at some point during my css coding but i believe tailwind will be better but i have not full knowledge about it
What challenges did you encounter, and how did you overcome them?-1 The challenge of centering my card at the middle of the page *I overcame this challenge by first applying a display flex of the parent *
-2 The challenge of setting the different screen sizes. *I overcame this challenge by using some screen sizes i had already written in my notebook *
What specific areas of your project would you like help with?I will love to learn more about using Css, i find it hard knowing how to target each html classes and also how to target the children of this classes
Community feedback
- @dDevAhmedPosted 6 months ago
Hello DwebAgency2,
First of all, great job on completing the QR Code Component challenge! I can see the effort you've put into this project. Here are a few points of feedback that might help you improve your project further:
1. QR Card Height: Issue: The QR card is taller than the screen height, which causes vertical scrolling and disrupts the intended design. Suggestion: To ensure the QR card fits within the viewport height, consider setting the body height to 100vh. This will make the body take the full height of the viewport, preventing the card from exceeding the screen height.body { height: 100vh; }
2. QR Code Image Margins: Issue: The QR code image has unequal margins on the x-axis and y-axis, making it appear wider horizontally and disrupting the square shape of the QR code. Suggestion: To maintain a consistent margin and ensure the QR code image remains square, use equal padding or margin values. Here’s an example of how you can adjust the margins or padding:.qr-code img { margin: 20px; /* Alternatively, use padding on the container */ padding: 20px; } Ensure the container or the image itself maintains equal spacing on all sides to preserve the square aspect ratio.
3. Font-Family Fallback: Issue: The absence of a font-family fallback for the body font-family is not a good practice. If the primary font fails to load, the text might display in an unintended font, affecting the overall design. Suggestion: Always include fallback fonts to ensure your design remains consistent across different browsers and devices. Here’s an example:body { font-family: 'PrimaryFont', 'FallbackFont', sans-serif; } This ensures that if the primary font doesn’t load, the browser will fall back to a secondary font or a generic sans-serif font.
Overall, you've made great progress on this challenge, and addressing these points will enhance the visual consistency and reliability of your project. Keep up the good work, and don’t hesitate to ask for more feedback as you continue to improve your skills!
Best regards, @dDevAhmed
1 - @DwebAgency2Posted 6 months ago
Hey! thank you very much. i was able to implement your suggestions, it turns out the body height was what i was missing, because i was also wondering why the card was over lapping. thanks you
0
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