Skip to content
OverviewSolutions
13
Comments
13

Grecco Oliva, Franco

@GreccoOliva-FrancoArgentina290 points

Backend Dev that learned to center a

Latest solutions

View more solutions

Latest comments

  • Grecco Oliva, Franco•290
    @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?

  • Grecco Oliva, Franco•290
    @GreccoOliva-Franco
    • Container:
      • Too wide. I tried a w-8/10 and it worked quite well
    • 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

    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
  • Grecco Oliva, Franco•290
    @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!

  • Grecco Oliva, Franco•290
    @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
    Alexwz89•480
    @Alexwz89
    What 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

    Faq-Accordion with React and Tailwind

    #tailwind-css#typescript#react
    1
    Grecco Oliva, Franco•290
    @GreccoOliva-Franco

    Comments 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
  • Grecco Oliva, Franco•290
    @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!

View more comments