Welcome to my solution for the QR code component coding challenge from Frontend Mentor! In this challenge, the goal was to build a QR code component and make it look as close to the provided design as possible.
Frontend Mentor provides coding challenges that help improve coding skills by building realistic projects. I found this challenge particularly helpful for practicing HTML and CSS.
The challenge required creating a QR code component based on the designs provided in the /design folder. The designs included both mobile and desktop versions in JPG format. As the designs were static, I had to make judgment calls on styles such as font-size, padding, and margin.
To tackle this challenge, I followed the suggested process provided in the challenge description:
Initialized the project as a public repository on GitHub.
Structured the content using HTML before adding any styles.
Wrote base styles for the project, including general content styles like font-family and font-size.
Started adding styles from the top of the page and worked down, ensuring completion of each section before moving on to the next.
To get an overview of the design and the final result, check out the design preview image provided in the challenge:
Design preview for the QR code component coding challenge
If you'd like to inspect the design in more detail, you can subscribe as a PRO member on Frontend Mentor to access the Sketch and Figma design files.
For this project, I used the following technologies:
HTML
CSS
You can check out the live version of my solution here
While working on this project, I faced some challenges, such as handling responsive design and achieving pixel-perfect accuracy with the provided design. However, these challenges helped me improve my CSS skills and problem-solving abilities.
You can contact me at kamungegeorge42@gmail.com
I would like to express my gratitude to Frontend Mentor for providing this coding challenge. It was a valuable experience, and I learned a lot while working on it.