I would appreciate feedback on my use of Flexbox for aligning elements within the card. I feel the layout is functional but am unsure if there is a more efficient or cleaner way to structure it.
I would appreciate feedback on best practices for structuring CSS files to keep them organized and scalable.
Additionally, I’d like guidance on how to optimize font loading to ensure better performance and compatibility across browsers.
I used the text font that was requested, but I still couldn't get them to look the same.
What specific areas of your project would you like help with?The font
Great job on your project! 👏 Your Google Font link looks correct, so the issue might be something else. Try these steps: 1️⃣ Check if 'Figtree' is actually applied using DevTools (F12). 2️⃣ Add a backup font: font-family: 'Figtree', sans-serif; 3️⃣ Make sure you're using the correct font weight. 4️⃣ Temporarily disable resetstyle.css to see if it affects the font. 5️⃣ Try clearing your browser cache (Ctrl + Shift + R).
Let me know if you need more help!
I am most proud of successfully building a responsive QR code component using only HTML and CSS. This was my first challenge on Frontend Mentor, and I learned how to use Flexbox, margin, and padding effectively to align elements properly.
Next time, I would focus more on improving the design by experimenting with shadows, colors, and spacing to make the card look more polished. I would also like to use CSS Grid and try adding some simple animations for a better user experience.
What challenges did you encounter, and how did you overcome them?Not too much challenges faced but i was stuck in text-align. So i asked it in our discord community and there i find solution of my challenge.
What specific areas of your project would you like help with?I would like feedback on the design and responsiveness of my project. Specifically:
Visual Styling – Are there any improvements I can make to enhance the overall look and feel of the card?
Responsiveness – Does the layout work well on all screen sizes, or are there any issues I should fix?
Code Optimization – Are there any unnecessary styles or better ways to structure my CSS?
Hey Md Sabi Amaan! 👋
First of all, great job on your QR code component! 🎉 Your structure is clear, and I can see that you've put effort into making it look nice. Here are some friendly suggestions that might help you improve it even further:
🛠️ HTML Improvements ✅ Google Fonts link – Right now, your font link is incorrect. This won't load the font. Instead, use this correct version:
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">That way, your font will work as expected! 😊
🎨 CSS Suggestions ✅ Background color choice – Using background-color: aqua; makes the design very bright. Maybe consider a softer color like hsl(212, 45%, 89%), which matches the challenge's design better.
🌟 Overall Thoughts You're doing amazing, and I love your approach to structuring the layout! With just a few small tweaks, your project will be even better. Keep going, and happy coding! 🚀✨
Best, Paloma
