Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

🚀 Links

📸 Screenshot

👋 Welcome!

I'm Hussein Alaa. This project was a fantastic quick challenge to sharpen my front-end development skills, focus on precision, and match a professional design down to the last detail in just 30 minutes!

🛠️ Built with

• Semantic HTML5 markup
• CSS custom properties (Variables)
• Flexbox for perfect centering and alignment
• Mobile-first workflow
• Spck Editor environment on mobile

✨ What I learned

Building this project helped reinforce essential CSS and layout concepts:

• Color Management: Utilizing CSS custom variables (:root) to cleanly organize and apply the color palette.
• Centering & Layout: Mastering display: flex with justify-content and align-items to ensure the card is perfectly centered on all viewports.
• Typography & Styling: Importing and applying custom Google Fonts with correct font weights and letter spacing to match the design specification precisely.
• Efficiency: Writing clean, organized, and maintainable CSS structure efficiently under a tight timeframe.

💡 Continued development

In future projects, I aim to:

• Take on more complex multi-column layouts and responsive components.
• Continue improving my workflow, documentation, and commit habits on GitHub.

🔗 Useful resources

• Frontend Mentor - A great platform for practicing front-end development.

Author

• GitHub - d13hn

---

Happy coding! 🚀