In this project, I took on the challenge of building a QR code component that closely matches the design provided by Frontend Mentor.
For anyone interested in the process or facing similar challenges, I encourage you to join the Frontend Mentor community and engage in the #help channel.
Project Overview
The task involved constructing the project according to designs located in the /design folder, which included both mobile and desktop versions.
Given the designs were in JPG static format, I applied my judgment for styling details such as font-size, padding, and margin.
For those curious about the design specifics, Frontend Mentor offers Sketch & Figma versions for PRO members, in order to inspect the design in greater detail.
All required assets were found in the /images folder, conveniently optimized for the project.
Additionally, a style-guide.md file was available, providing essential information like the color palette and fonts.
Building the Project
I approached the project in a way that suited my workflow preferences. Here’s an outline of the steps I followed:
- I initialized the project as a public repository on GitHub, facilitating code sharing and collaboration.
- I configured the repository to publish the code to a web address, making it easier to seek help by sharing the project URL.
- I thoroughly reviewed the designs to plan my approach, especially focusing on CSS classes for creating reusable styles.
- I started with structuring the content using HTML, ensuring a well-organized foundation.
- The base styles were then defined, including general content styles like
font-familyandfont-size. - Finally, I methodically added styles, beginning from the top of the page and progressing downwards, ensuring each section was complete before moving to the next.
This project was an excellent opportunity to refine my skills and contribute to the Frontend Mentor community.
View the Project Live
I’m excited to share the live version of this project. You can view it by clicking the button below: