/qr-code-component

Frontend mentor challenge

Primary LanguageCSS

QR Code Component

Hello there! Welcome to my solution to the QR code component challenge on Frontend Mentor.

Table of contents

Overview

Screenshot

Screenshot of QR Code Component

Links

My process

Built with

  • Semantic HTML5 markup
  • Tailwind - CSS framework
  • Figma - Referenced designs
  • Vercel - Deployment

What I learned

This was my first time coding based on a provided Figma file. I closely referenced both the style-guide.md and the Figma file to develop my solution.

Also, I deployed with Vercel for the first time (I've previously used GitHub pages, Heroku, Netlify). I intentionally chose Vercel because I wanted to try something new and expand my familiarity with deployment solutions. I ran into a 404: NOT FOUND error, but then after a bit of troubleshooting realized I had to restructure my folders so that the root directory was set to src, which contained both the index.html and images.

I styled with Tailwind CSS, and made use of the arbitrary value functionality in order to be able to properly replicate the Figma sizing.

    <main
      class="flex flex-col items-center h-[497px] rounded-[20px] bg-white drop-shadow">
      ...
      </main>

Continued development

I'd like to continue working on solutions that derive from Figma designs so I can become even more comfortable with adapting from this design software. Especially when it comes to setting accurate values for margin/padding.

Useful resources

Author