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.
This project involves creating a QR code component using HTML and CSS. The objective is to create a responsive design that includes a QR code image, a header, and a description. The project requires the use of best practices in HTML and CSS, such as implementing flexbox and clean code. The final output is a visually appealing component that can be easily integrated into a larger website and small screens on mobile or used as a standalone feature. This project serves as a great opportunity for developers to practice and refine their CSS skills while learning new techniques and approaches
- Solution URL: Github
- Live Site URL: Livesite on Vercel
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I have learned the best practices of using Flexbox to create responsive and flexible layouts. This likely includes using properties like display: flex, justify-content, and align-items to position elements on the page.
I have also learned how to write cleaner code, which likely includes using appropriate class and ID names, avoiding unnecessary repetition, and organizing code in a logical manner.
Through working on this project, I was able to practice and refine my CSS abilities, particularly in implementing the recommended approaches for using flexbox and creating more organized and efficient code. This experience has helped me to become more confident in my CSS skills and has provided me with valuable knowledge that I can apply to future projects
- Frontend Mentor - @sharonlhs
- LinkedIN - @sharonlhs
Thank you for the helpful feedback. Accordingly, I have updated my code and is able to make it simpler and easier to understand.
- Abdul Khalid @0xAbdulKhalid
- Ecem Gokdogan @ecemgo