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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Links

• Solution URL: Solution URL
• Live Site URL: Live site URL

My process

Built with

• Semantic HTML5 markup
• CSS Variables (for colors)
• Flexbox

What I learned

I started using Frontend Mentor with this really basic challenge to see how the ecosystem works. The instructions are clear and easy to follow. However I set the font size of the paragraph is to 15.5px because the 15px of the Style Guide looked smaller than on the reference design screenshot.

This is also my first GitHub repository. Exciting times!

Continued development

As there were only a few elements in the HTML code I selected them directly in CSS without using classes or IDs. Can't wait to build something more complex!

Useful resources

• Tailwind CSS - Drop Shadow - I got the shadow effect from here.

Author

• Frontend Mentor - @sbistvan