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

• My process
• Built with
• Author

My process

1. in the head link all stylesheet. I always use 3 ayt least:

• reset.css to remove all standard paddings and margins;
• styles.css to add all my styles when building the projects;
• queries.css to put all @media-queries

2. start from the mobile version (we will make changes for the desktop version later, with the queries.css stylesheet);

3. In styles.css create the variables for colors and fonts;

4. Move the footer to the bottom with position: fixed and bottom: 0;

5. Make a div to store all content, set to width: 375px (mobile width);

6. Make the image fit in the div (width: 100%);

7. Center the text and add padding;

8. Set colors using the variables created at point 3;

9. Set all paddings and border-radius;

10. Center on the page with flexbox (create flex container with height set to 100vh)

11.Adjust media-queries for responsive design for desktop

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

Author

• Website - Jamila Zini
• Frontend Mentor - @potpot89