Thanks for checking out this front-end coding challenge from Frontend Mentor. This challenge is about building a QR code component and getting it to look as close to the design as possible.
Frontend Mentor challenges are great for improving your coding skills by building realistic projects.
To do this challenge, you need a basic understanding of HTML and CSS.
Your task is to build out the QR code component based on the designs provided inside the /design folder. You will find both mobile and desktop versions of the design. The designs are in JPG static format, so you'll need to use your best judgment for styles such as font-size, padding, and margin.
If you would like the design files in more detail, you can subscribe as a PRO member. All the required assets are available in the /images folder, and they are already optimized.
Feel free to use any tools or workflow you're comfortable with. Follow the steps provided in the challenge to plan your approach and structure your content with HTML. Write out the base styles for your project, including general content styles such as font-family and font-size. Add styles from the top of the page and work your way down, section by section.
You can host your completed project for free using platforms like:
Once you've completed the challenge, submit your solution on the Frontend Mentor platform for the community to see. Feel free to share your solution on social media, in the Slack community, or on other platforms. Don't forget to ask specific questions when seeking feedback to get valuable responses from the community.
We love feedback! If you have any suggestions or improvements for our challenges or platform, please email hi[at]frontendmentor[dot]io.
This challenge is completely free. Feel free to share it with anyone who will find it useful for practice.
Have fun building! 🚀