Skip to content
Submitted 10 months ago

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

next, tailwind-css, react
yyuntzpan•40
@yyuntzpan
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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?
Code

Please log in to post a comment

Log in

Community feedback

  • P
    Jeff•70
    @Yunlearning

    Your overall solution is excellent! However, I noticed a few minor issues that could be improved. Here are some areas for refinement:

    1. Potential Typo in display Class Name Issue:
    className = 'block displaty-block w-full text-sm font-semibold ...';

    Solution:

    className = 'block w-full text-sm font-semibold ...';

    The incorrect spelling of displaty-block should be corrected to just block, as display-block is not a valid CSS class. 2. Extra Quotation Marks in bio String Issue:

    bio: '"Front-end developer and avid reader."',

    Solution:

    bio: "Front-end developer and avid reader.",

    The extra quotation marks around the string are unnecessary and should be removed for proper formatting. 3. Using url as the key in socialsLinks.map Issue:

    {profileData.socialsLinks.map((social) => (
    <li key={social.name}>

    Using name as the key could lead to potential duplication issues if multiple social links have the same name. Solution:

    {profileData.socialsLinks.map((social) => (
  <li key={social.url}>

    Replacing name with url ensures each key is unique, preventing potential rendering issues in React. This version improves clarity and readability while keeping the feedback concise and professional. 🚀

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord