Latest solutions
NextJS - Tailwind CSS - Shadcn UI - Zustand
#next#tailwind-css#zustand#shadcnSubmitted about 1 month ago- ARIA, as always. Is there any tool that evaluates ARIA?
NextJs - Tailwind CSS - React Hook Form
#next#tailwind-css#react-hook-formSubmitted about 2 months ago- Animations (It is out of my league right now. I'll come to it soon, though)
NextJs - Tailwind CSS
#next#tailwind-cssSubmitted about 2 months ago- None, thanks. This project did not feel like a challenge which speaks quite good of my improvement along all the challenges previously done. Thanks Frontend Mentor!
Latest comments
- @vedantagrawal524@GreccoOliva-Franco
Quite good.
I see you achieve the SVG color coping the <path fill="#FFF">. Do you know if it is possible with tailwind?
- @Jimztech@GreccoOliva-Franco
- Container:
- Too wide. I tried a
w-8/10
and it worked quite well
- Too wide. I tried a
- Header:
- Hamburguer menu link fails
- Desktop menu does not appear on 1440px
- The separator is too thick
- Content:
- Mobile carousel:
- Buttons are not centered nor rounded
- Desktop carousel:
- Check the requirements. There are a few things missing
- Product Quantity Selector is in sync with cart badge. This behaviour is not correct. The "Add to cart" button should pick the quantity and add those items into the cart. The cart badge should match the sum of
item * quantity
within the cart - "Add to cart" button opens the cart, does not add items to the cart.
- More margin bottom on Mobile screen
- Mobile carousel:
I'm not trying to be mean to you. I'm just training my eye for details while pointing out things that could be improved and make your designs pixel perfect which is what the industry wants.
Questions:
- I've struggled a lot with this and still could not overcame it: How did you achieve the shopping cart icon to be black instead of its default gray color?
- How long did it took to complete the challenge? In my case, it was longer than I expected and still could not achieve 100% the requirements
Hope this comment helps you. Keep going and don't give up!
Marked as helpful - Container:
- @Atsuno@GreccoOliva-Franco
- General:
- Background should be color cream
- More padding on top of the navbar
- Main Article:
- "READ MORE" button has text in white. It should be black
- Paragraph line-heigh should be bigger
- Spacing between paragraph and button
- "New" section:
- Subarticles titles should be font bold and spaced evenly/between depending on the html structure you build
- Bottom articles:
- "0<number>" text should be in orange/red
I'm not trying to be mean to you, I'm just training my eye for details.
Good job overall. Keep going!
- General:
- @06ergin06@GreccoOliva-Franco
- Card corners need more radius
- Excessive padding on top and bottom
- Inputs need padding and borders should be lighter
Looks good, though. Keep on going
- P@Alexwz89What are you most proud of, and what would you do differently next time?
Happy to start merging tailwind css and typescript into my React project.
What challenges did you encounter, and how did you overcome them?The background image setting is the most tricky part for me. In order to use bg-[url()] utility, I have to move two background image into public folder.
What specific areas of your project would you like help with?Definitely Aria part
@GreccoOliva-FrancoComments on your solution:
- Nice match of sizes
Comments on my solution: I solved the bg img with:
<body className="relative flex flex-col h-screen ..."> <img src={src} className="absolute top-0 w-full aspect-auto" /> { /* FAQs Card */ } </body>
And the overlap with a "z-1" for the card. That might come in handy for future solutions
I completely agree on the Aria part. I'm offloading that part for the future
Marked as helpful - @ChrisRoland@GreccoOliva-Franco
- Card size is small
- Needs more vertical spacing (gap)
- Card's bg-color needs some opacity (I also have this problem)
- Fonts don't match size and weight
- Submit buttons should use class "uppercase" if content is written in non-uppercase
You're good, go on, keep going!