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

A simple QR-Code component website! Built by me, V.Bispo, as the first project to be submitted to Frontend Mentor.

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: usasag.github.io/qr-code

My process

At first, i wanted to use TailwindCSS, but then resorted to using pure CSS and HTML technology, as it is only intended to be a static webpage with a QR Code. I decided to use Tailwind for more complex projects.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Terraform (for cloud hosting)
• Responsive workflow

What I learned

I learned that not always we NEED to use more complex tools to make a simple project, we can start by using the basics, we can still make beautiful responsive webpages with them.

Continued development

I seem to have had a very good understanding of HTML and CSS while building this project, and i am proud of that, but i currently am seeking to understand more technologies such as TypeScript, React, MongoDB, and other full-stack web developer tools.

Useful resources

• GitHub Copilot - GitHub Copilot was my goto when i was confused why something wasn't working the way i had intended, and helped me making this webpage. I really liked this AI duet pattern of development, not letting the AI drive the entire project, but help me being more productive and understand concepts i didn't know or forgot along the way.
• W3S Schools - This is an amazing website with easy-to-access documentation on many programming languages, i used it to understand deeper contexts of what i was doing.

Author

• LinkedIn - Vitor Bispo Brauna
• Frontend Mentor - @usasag