The latest articles on DEV Community by Fatahi Showunmi (@virtuosofatahi). https://dev.to/virtuosofatahi https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1245841%2Fe8479ced-f5f9-452b-8681-9db1796e60a4.png https://dev.to/virtuosofatahi en Fatahi Showunmi Mon, 01 Jan 2024 13:36:01 +0000 https://dev.to/virtuosofatahi/qr-code-component-solution-4h8g https://dev.to/virtuosofatahi/qr-code-component-solution-4h8g <h2> Table of contents </h2> <ul> <li>Overview</li> <li>Links</li> <li> My process <ul> <li>Built with</li> <li>What I learned</li> <li>Continued development</li> <li>Useful resources</li> </ul> </li> <li>Author</li> <li>Acknowledgments</li> </ul> <h2> Overview </h2> <p>I recently completed a challenge on Fronted Mentor [QR code component challenge on Frontend Mentor (<a href="https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H">https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H</a>).</p> <p>This challenge was to build a QR code component and get it to look as close as the original figma design.</p> <h3> Links </h3> <ul> <li>Solution URL: (<a href="https://www.frontendmentor.io/solutions/qr-code-component-using-css-flexbox-lDQQ7BewT1">https://www.frontendmentor.io/solutions/qr-code-component-using-css-flexbox-lDQQ7BewT1</a>)</li> <li>Live Site URL: (<a href="https://qrcodesolutions.netlify.app/">https://qrcodesolutions.netlify.app/</a>)</li> </ul> <h2> My process </h2> <p>I started the project by understanding the several sections in the design. I also developed a plan to segment the design and accord appropriate classes and id to each section where necessary. Then, I started the development phase. </p> <h3> Built with </h3> <ul> <li>Semantic HTML5 markup</li> <li>CSS custom properties</li> <li>Flexbox</li> </ul> <h3> What I learned </h3> <p>The first thing I learnt was that practice make perfect. Knowledge can only be solidify through practicing the things you know.</p> <h3> Continued development </h3> <p>In my future project, I would like to work on projects using the best practices in development. </p> <h2> Author </h2> <ul> <li>Frontend Mentor - <a href="https://www.frontendmentor.io/profile/Virtuoso-fatahi">@Virtuoso-fatahi</a> </li> </ul> <h2> Acknowledgments </h2> <p>I sincerely appreciate Fronted Mentor for this opportunity to practice our skills and become a better developer.</p> beginners css learning html