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
  • Links
• My process
  • Built with

Overview

Screenshot

Mobile:

Desktop:

Links

• Live Site URL: QR CODE COMPONENT
• Commit history: History

My process

1. Took a look at the designs and all the files in the template
2. Identify main boxes for the component: The card component, QR_CODE section QR_CODE_INFO section, main section that is basically a container for the card.
3. Set variables in CSS of the possible repeatable values based on design
4. Update HTML markup to align to the point 2.
5. Apply styles for fonts, colors.
6. Start applying styles for positioning and order from Outside the component to inside the component (First body, then main, card, QR_CODE, QR_INFO, IMG, Paragraphs and headers)
7. Test on all possible resolutions

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox