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
  • Useful resources
• Author

Overview

Screenshot

mobile build image

desktop build image

Links

• Solution URL: https://github.com/Deeokafor/fm-qr-code-component-main
• Live Site URL: https://deeokafor.github.io/fm-qr-code-component-main/

My process

Built with

• Semantic HTML5 markup
• Mobile-first workflow
• Tailwindcss - CSS utility-first framework

What I learned

When I started on building this project, I took the route of using custom CSS and building 'tailwindcss-style' classes. Halfway through the project, I realised there was no need to reinvent the wheel. I dropped custom CSS although I had developed an approach and methodology while writing my 'tailwindcss-styled' classes which I have currently exported to a separate stylesheet for future development (maybe). I realised that I was getting myself into a hassle and had to retrace my steps.

I am deeply thankful to the developers and maintainers of frameworks and libraries used in web development.

Useful resources

• Tailwindcss Docs - This helped me with quickly looking up tailwind classes for styling components. It has a helpful search engine by Algolia

• Google's Search Page - of course it is google.com.

Author

• Website - Okafor-udah Divine
• Frontend Mentor - @Deeokafor
• Twitter - @dee_okafor
• April 10, 2023