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

Overview

Screenshot

Links

• GitHub Repo: https://github.com/IamAbhiDev/qr-code-component-main.github.io
• Live Site: https://iamabhidev.github.io/qr-code-component-main.github.io

My process

Built with

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

What I learned

Completing the QR code component challenge on Frontend Mentor provided a valuable opportunity to refresh my CSS skills. While the challenge was centered around a basic and static HTML-CSS layout without responsive design, I was able to reinforce my ability to style elements using CSS properties effectively. I refreshed my understanding of concepts such as selectors, positioning, and the box model. Additionally, I practiced using version control with Git to track my changes throughout the project. This challenge was an excellent way to solidify my foundational CSS knowledge.

Continued development

In the future, I'm looking forward to exploring advanced CSS techniques, including responsive design and animations. I also plan to incorporate JavaScript to enhance user interactions and add dynamic elements to my projects. This challenge has inspired me to continue developing my skills and creating more engaging web experiences.

Useful resources

• Accessibility Insights - This chrome extension allowed me to run automated checks to test the accessibility of my website. I found it to be really useful in identifying potential issues and ensuring that my website is easily accessible to all visitors.

Author

• GitHub - @IamAbhiDev
• Frontend Mentor - @IamAbhiDev
• Twitter - @IamAbhiDev