QR Code Component styled with Tailwind

What are you most proud of, and what would you do differently next time?

This was my first time using Frontend Mentor, so I opted to start with the Getting Started Learning Path to become familiarized with the platform. I was proud of how productive I was in creating a solution in a reasonable amount of time. I styled with Tailwind CSS as this has grown to be my preference, and I believe that significantly helped me complete this sooner.

Next time, I'll be sure to review the style-guide.md in advance of coding. Once I had the Figma file open, I began to work and had to make some retroactive edits that I could have avoided had I reviewed the guide first.

What challenges did you encounter, and how did you overcome them?

While I am familiar with Figma from my previous job where I reviewed designs and interpreted them alongside our developer, I had never built anything myself from a Figma design before. There was a bit of a learning curve in reviewing the design layers/elements to create the most accurate build. The style-guide.md helped with this, where I used the tailwind.config.js to set the colors and font.

Also, I deployed with Vercel for the first time (I've used GitHub pages, Heroku, Netlify). I intentionally chose Vercel because it was a recommended choice by Frontend Mentor, but also because I wanted to try something new and expand my familiarity with deployment solutions. I ran into a 404: NOT FOUND error on deployment, 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.

Specifically, I had an issue where the main container was not vertically centered. After doing some research, I realized I had to set the body height to 100dvh.

What specific areas of your project would you like help with?

Given that it was my first time building from a Figma design, I'd be curious to learn from others at what strategies they've taken to best interpret these designs when writing their CSS and how accurately I styled it (I had trouble being able to determine the exact margins/padding within the container.