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

This project is a simple QR code component that displays a scannable code linking to Frontend Mentor's website.
It uses semantic HTML and CSS Flexbox and Grid for layout and styling.

Screenshot

Links

• Solution URL: https://github.com/mdismail13/qr-code
• Live Site URL: https://mdismail13.github.io/qr-code-component-solution/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

In this project, I practiced using semantic HTML and CSS Flex-box and Grid to build a clean and responsive QR code component.
I learned how to center elements using CSS Grid and how to use Google Fonts for better typography.

Example of HTML used:

<main>
  <div class="card">
    <img src="images/image-qr-code.png" alt="QR code linking to Frontend Mentor site" />
    <h3 class="heading outfit-font">Improve your front-end skills by building projects</h3>
    <p class="description outfit-font">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
</main>

.card{
    background-color: var(--white);
    max-width: 20rem;
    text-align: center;
    border-radius: var(--card-radius);
    display: flex;
    flex-direction: column;
}

Continued development

I want to improve my skills in CSS animations and transitions to make components more interactive. Also, I plan to learn more about accessibility features to make my projects more user-friendly.

Useful resources

• Frontend Mentor - For project challenges and learning by doing.
• CSS-Tricks Flexbox Guide - Helped me understand flexbox layout.
• Google Fonts - For beautiful, free web fonts.

Author

• Name - Md. Ismail
• Frontend Mentor - @mdismail13
• GitHub - mdismail13
• Facebook - ismail.h.emon

Acknowledgments

Thanks to Frontend Mentor and the community for helping me improve my frontend development skills.