Front-End developer on a self-taught journey, building responsive and accessible UIs with HTML, CSS, and JavaScript. I grow by solving real problems, learning from feedback, and refining the details. Focused on fundamentals. Evolving — one project at a time.
I’m currently learning...Responsive layouts with Flexbox & Grid, writing clean and semantic HTML, improving UI accessibility, and building stronger JavaScript problem-solving skills through real projects.
I would appreciate feedback on: Accessibility: Are there additional ARIA attributes or semantic improvements I could add? For example, should I include a role or aria-label for the QR code image? CSS Optimization: Is there a more efficient way to structure my CSS in css/main.css, particularly to reduce redundancy or optimize Flexbox usage? Performance: How can I optimize the Google Fonts import (Outfit) for faster loading on mobile devices? Would preloading or a fallback font strategy help? Visual Effects: Are there better ways to style the box-shadow on the card for a more modern effect without impacting performance?
I would appreciate feedback on the following:
I wasn't coding for a while and being back made me proud.
What challenges did you encounter, and how did you overcome them?I couldn't remember some css codes but I remembered them with watching tutorials.
Hi @ulasdenizalkisx,
Nice job completing the QR Code component! 🙌
You used Flexbox well to center the card, and the overall layout is clean and minimal.
Here are a few suggestions to take your solution to the next level:
README.md file with a brief project description, tools used, and a live preview link (e.g., GitHub Pages or Netlify).Keep up the great work — you're on the right track!
It was great to start challenges which gives best experience of practical workflow and the github process at starting of the challenge was great. I will try my best to develop easy flow and minimum code and build my development knowledge.
What challenges did you encounter, and how did you overcome them?It was challenging at first and build in desktop and mobile version was epic and uses useful tags to apply. As it was beginner challenge it was fun and challenging to solve.
What specific areas of your project would you like help with?Start with simple approaches and understanding the style sheet to build with correct measurement and after building use the inspect setting to refine the project.
Hi Kunal 👋,
Nice effort on the QR Code component project! The design looks clean and close to the original challenge. Good job on using semantic HTML and keeping the layout centered.
However, I’d like to offer a small suggestion to improve the repo’s structure:
QR Code component folder. It would be more user-friendly if the project was placed in the root directory or at least mentioned clearly in the README.Keep it up and looking forward to more projects! 🚀
I would find other ways to accomplish the same task.
What challenges did you encounter, and how did you overcome them?No real challenges
What specific areas of your project would you like help with?Just some feedback.
Hi @haybag
Great job completing the 3-column preview card component challenge! Your project reflects solid attention to color, typography, and general layout. It's always inspiring to see developers take on these challenges and bring them to life.
After comparing your solution with the original design, here are a few suggestions that might help bring it even closer to the intended result:
What’s working well: Color scheme and fonts are well-matched with the original design.
Button styling and hover states are clean and functional.
The overall structure is easy to follow and clearly organized.
🛠 Areas to improve: Column alignment: The first column (Sedans) has extra space on the left, which throws off the balance. Try using CSS Grid to ensure even distribution across all three columns.
Typography: The headings and paragraph text could use slightly larger font sizes and more spacing to improve readability.
Button placement: Buttons are not consistently aligned across all cards — using margin-top: auto or flexbox alignment could help.
Icon size and spacing: Increasing the icon sizes and adding more spacing between icons, headings, and text would make each card feel more balanced.
Container width: Consider increasing the max width of the main layout to better match the original design proportions.
Personal note: Your project genuinely reflects the journey many of us are on — including myself. I'm currently working on improving my layout and responsive design skills too, so I can definitely relate. You're clearly making great progress, and challenges like this help all of us grow as developers.
Keep it up — looking forward to your next solution!
— Mohamed Djaballah GitHub – @Djabouex
Hey Marlar!
I was getting ready to drop a friendly code review on your project...
But then I took a peek at your GitHub profile and saw all those amazing repositories, tools, and clean code
At that point, I thought:
"Maybe I'm not here to give feedback... maybe I'm here to learn"
Seriously though, awesome work! Super inspiring — keep it up! 👏
