Frontend Mentor - QR code component solution

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.

Table of contents

• Overview
  • Screenshot
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

This is my solution coding challenge facilitated by frontendmentor.io. The challenge was for me to develop a QR code component exaclty as the design template. I choose to develop the mobile version.

Screenshot

My process

I started off with building the skeleton of the QR code component. Each element has been given a unique class to identify. Once the skeleton was built, I began styling the elements. I set the main container's dimensions to 402 x 874 (standard for iPhone 17) and set the color to a muted grey with a border-raidus to round out the edges. The card's dimensions were set at 302 x 474, with a white background and border-radius to round out the edges. The card's margin top and bottom provided the proper space above and below. Setting the body and its content to a flex display and adjusting the flex direction to column, allowed the content within the card to be centrally aligned and follow a directional flow across the main access point. Micellanous adjustments like font-family and font-colors were added in accordance to the design template that was provided. I used the darkest color for the header and the contrast color for the paragraph.

Built with

• Semantic HTML5 markup
• CSS custom properties

What I learned

Reading API documents are vital. When I was running into obstacles with the google fonts api, I had to refer to the documentation and look at the standard requirements for calling the API. The issue was that I wasn't applying the API to the right elements that needed it. When initally applied to the body element, the API was not called directly.

To see how you can add code snippets, see below:

Continued development

I plan to add responsive dymanics to this project and apply some funtionality to the QR code. Playing with viewports and looking into dvh/dvw versus using a percentage.

Author

• Website - techiemia
• Frontend Mentor - @techiemia