Responsive Social Link Card using Next, React, TailwindCSS, HTML5...

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

This time, I tried using NEXT.js, REACT, and tailwind CSS. Tailwind CSS, in particular, was my first time using it. Although I wasn’t very familiar with it, and it was supposed to speed up the process, I ended up spending a lot of time reading the documentation. This time, I practiced building a React project with Next. Next time, I would like to try using Vite to create a Vue project for practice.

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

In previous challenges, I only used native HTML and CSS. This time, I tried using NEXT.js, REACT, and tailwind CSS for practice, and I encountered many issues. The most troublesome problem was setting the font. I usually just include the CDN directly in the HTML head for convenience, but after using the framework, I wasn’t sure how to proceed. After reading some documentation and discussing it with Gemini, I ended up using the "Next.js built-in font optimization" feature to set the fonts.

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

1. There are several ways to set fonts, such as using "Next.js built-in font optimization" or using a global CSS file. I’m not sure which method to choose in different situations, and I’m also unclear on how to implement each method.
2. Should I use a framework when practicing layout design? Using a framework and TailwindCSS ended up taking more time for me...
3. When using TailwindCSS with global CSS settings, should I aim to use TailwindCSS as much as possible for the style guide, or is it better to use traditional CSS methods in the global stylesheet? Although both methods can achieve the goal, is there a clear advantage to one over the other? Is there a standard process?