Could you please tell me if there are any other solutions? Thank you!
I would like to seek some guidance on breakpoints and tips for designing them more effectively when working with Tailwind CSS.
wanted to include the second Image with srcset (like explained under the mentioned article on web.dev) and tried some time to figure out how to use it with tailwind. figured out it was easier to just include two Images and hide them when not needed
Very well done. Give some suggestions for the proposal. The cart icon’s width={24} height={24} conflicts with h-4 w-4 (16px). Use consistent units (e.g., w-6 h-6 for 24px).
please take in consideration that the design does not contain all the data it is simple for saving 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?Your overall solution is excellent! However, I noticed a few minor issues that could be improved. Here are some areas for refinement:
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. 🚀
Good effort on this challenge! Your code is obvious and easy to read. You can refer to the instructions in Figma to adjust the border-radius and align your component more closely with the design. Keep coding and happy coding!
I noticed that your solution differs from the design. Following Figma’s instructions, adjust the component’s width to 320px and add line height and letter spacing to the text to match the design.
see below:
fontSize: {
'p-size': [
'22px',
{
lineHeight: '120%',
letterSpacing: '0px',
},
],
'p-sm': [
'15px',
{
lineHeight: '140%',
letterSpacing: '0.2px',
},
],
},