This is my solution to the QR code component challenge on Frontend Mentor. This challenge is a great way to practice building small, real-world projects and improve your HTML and CSS skills.
- Live Site URL: Visit the live site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox for layout
This project helped me practice using Flexbox for centering elements and organizing a simple layout. I also worked on using CSS custom properties for better maintainability. Implementing a responsive design and understanding how to use the figure and img tags more effectively were part of the learning experience.
In the future, I plan to explore more advanced layouts using CSS Grid and further improve accessibility practices, such as optimizing alt text for images and improving color contrast ratios.
- MDN Web Docs on Flexbox - This is a comprehensive guide on how to use Flexbox.
- CSS Tricks on Centering in CSS - This helped me understand how to center content easily with CSS.
- Frontend Mentor: @abdullah4tech
- Twitter: @abdullah4tech