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
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

Screenshot

Links

• Solution URL: My Solution URL
• Live Site URL: My Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Google Fonts - For typography

What I learned

During this project, I learned how to effectively implement responsive design using CSS Flexbox and media queries. I also gained a deeper understanding of how to use Google Fonts to enhance typography in my projects.

For example, I used the following CSS to style the QR code component:

.qr-container {
  text-align: center;
  background-color: hsl(0, 0%, 100%);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px hsl(218, 44%, 22%);
}

Continued development

In future projects, I want to focus on improving my knowledge of CSS Grid for layout management and exploring animations to create more engaging user interfaces. Additionally, I aim to delve deeper into accessibility best practices.

Useful resources

• CSS Tricks - Flexbox Guide - This resource helped me understand how to align items effectively using Flexbox.
• Google Fonts Documentation - This was useful for learning how to incorporate custom fonts into my project.

Author

• Frontend Mentor - @lgwarda

Acknowledgments

A big thank you to the Frontend Mentor community for providing great challenges that help sharpen my skills. Also, I appreciate the resources and tutorials available online that guided me through the design process.