@vedantagrawal524
Grecco Oliva, Franco
@GreccoOliva-FrancoAll comments
- @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/10and 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 * quantitywithin 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
Marked as helpful - 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!
- @phantomgizmoWhat are you most proud of, and what would you do differently next time?
- Use Lazy Loading
- User Suspense
- Use Layout component
- Use form hook
- Use form hook context for separated input component
- How to add icon to input
- How to use module css for react component
- How to use controlled and uncontrolled input with react hook form
- How the validation trigger work on react hook form
- Code readability
- Performance optimization
Tip Calculator with Typescript, React.JS, Tailwindcss
#react#react-hook-form#typescript#tailwind-css@GreccoOliva-Franco- Desktop overall measures
- Inputs placeholders (I think it's because react-hook-forms forces you default values, right?)
You are better than me jaja, I clearly should not correct but learn from you. Nice job!
Marked as helpful - @phantomgizmoWhat are you most proud of, and what would you do differently next time?
- Able to implement container/presentation pattern for react component.
- Able to implement react composition where state is lifted up in order to make it available for multiple component via props.
- Sharing state between multiple component. Overcoming it by lifting up the state one level.
- Design pattern
- General improvement on readability of the code
- Styling
@GreccoOliva-Franco- All grid size is off in 1440px
The rest is perfect imo. Nice job, dude!
Marked as helpful - @MahdyrllWhat specific areas of your project would you like help with?
I couldn't make the background of the input go red when an error happens. In addition, I wound like to know how to add transition when hovering on buttons. because I tried adding transition and delay but it didn't work.
@GreccoOliva-Franco- Vertical position of the Form Card
If not for that, I would say it's a 100% match. Beautiful!
PD: How did you match all sizes and pixel perfect images?! I'm trying my hardest and still can't accomplish it :sad-face: It seems that I still need to improve my CSS quite a lot :thumbs-up:
- P@lordever@GreccoOliva-Franco
Goods:
- Perfect bg colorg
- Item proportions
Improvements:
- Bigger card size
- Image is horizontally shrinked and not overflowing. A bit darker. (I had the exact same problem)
Keep on going! You're good
- @gdbecker@GreccoOliva-Franco
- Background color does not match
- There are no Card shadows (box-shadow)
- Cards's height don't match design
- Gap between cards seems not enough
As you can see, I'm quite strict with UIs but that's not to be mean to you. I'm trying to improve my eye to spot details and correct my mistakes also.
Keep practicing. CONSISTENCY is key to this.
PD: How did you match the Purple color?! The purple color provided in my style-guide does not match the desired color for this challenge, not even close!
- @redmonkez12@GreccoOliva-Franco
- Notice your desktop view has some white space on the bottom of the page. This can be solved by forcing the body to ocuppy full viewport height
- Center all content on the page
- Letter
Either way, congrats! Keep practicing your naked eyed design!
Anyone can achieve precise solutions if given a detailed design but be aware that having a detailed design is not always the case in the business realm.
- P@BlonoBuccellatiWhat are you most proud of, and what would you do differently next time?
I’ve become more comfortable with responsive design and don’t struggle with styling as much as before.
Next, I want to dive deeper into responsive techniques and then move on to accessibility.
What specific areas of your project would you like help with?- Are there any parts of the current code that could be made more semantic?
- Are there any unnecessary CSS styles that could be removed?
- Is there a way to write the CSS in a cleaner or more maintainable way?
If you notice anything else that could be improved, feel free to let me know.
@GreccoOliva-Franco- You provide a quite "good enough" solution
- As like my solution, there are some discrepancies in letters, letter spacing, line height that produce a difference compared to the design provided. Even if taken that into account, I would feel proud of the solution provided
- I liked a lot the way you used CSS variables and that we matched the whole STACK too.
Nice job!
