Skip to content
OverviewSolutions
28
Comments
34
P

Thomas TS

@ttsoaresBrazil / RS920 points

- Retired engineer restarting a career as fullstack developer. - Experient GNU/Linux syadmin. - Arduino enthusiast. - Fluent in English, Spanish and Portuguese. - Amateur UI/UX researcher.

I’m currently learning...

TailwindCSS, NextJS, React Native and Cypress

Latest solutions

View more solutions

Latest comments

  • abok-cymk•70
    @abok-cymk
    What are you most proud of, and what would you do differently next time?

    I am proud to have finished the project. Using some of the concepts that I have learnt in React.js recently, like using props, Reusable components, I was able to have minimal code base.

    What challenges did you encounter, and how did you overcome them?

    How to work with tabs. I just figured them out using react hooks

    What specific areas of your project would you like help with?

    Theme toggling Store theme in localStorage and even use user systems settings

    React, Reusable components, styling using Tailwindcss

    #react#tailwind-css#accessibility
    1
    P
    Thomas TS•920
    @ttsoares

    Greetings. In my Firefox browser the light/dark themes is not working. It stays in light mode regardless...

    A suggestion: https://www.youtube.com/watch?v=WTchW0LdWL0

    Marked as helpful
  • Vedant Agrawal•410
    @vedantagrawal524
    What specific areas of your project would you like help with?

    I need help structuring the files and folders for my Tailwind CSS v4 project. Additionally, I'm facing an issue where my JavaScript file isn't able to apply or interact with the custom CSS classes I've defined in input.css. I'd appreciate guidance on both organizing the project properly and ensuring that my JS file works correctly with the Tailwind setup.

    Loopstudios landing page

    #tailwind-css
    1
    P
    Thomas TS•920
    @ttsoares

    Greetings. Neat solution... Two comments:

    • It seems that your 'preview site' is closest to the designs than the screen captured posted here. Specially the typology.
    • Your repository does not have the 'tailwind.config.js' file. What it a bit strange as it is an important part of how to manage Tailwind and that can be used to control images for different media queries:
      theme: {
    screens: {
      sm: "375px",
      md: "960px",
      xl: "1440px",
    },
    extend: {
      colors: {
        soft_orange: "hsl(35, 77%, 62%)",
        soft_red: "hsl(5, 85%, 63%)",
        off_white: "hsl(36, 100%, 99%)",
        g_blue: "hsl(233, 8%, 79%)",
        dg_blue: "hsl(236, 13%, 42%)",
        vd_blue: "hsl(240, 100%, 5%)",
      },
      backgroundImage: () => ({
        "img-top-dsk": "url('/image-web-3-desktop.jpg')",
        "img-top-mob": "url('/image-web-3-mobile.jpg')",
      }),
    },
  },
  • P
    Thomas TS•920
    @ttsoares

    Greetings. Neat React solution !

    But your URL to see the code: https://github.com/eestaniel/browser-extensions-ui-fm is broken...

  • Cristian•80
    @neouruguayancr
    What are you most proud of, and what would you do differently next time?

    Proud of the responsive layout. Next time, I'd try SCSS for better organization. Learned CSS Grid in depth!

    What challenges did you encounter, and how did you overcome them?

    I faced challenges with creating a fully responsive layout, especially ensuring proper alignment across various screen sizes. To overcome this, I utilized CSS Grid and Flexbox for layout adjustments, and browser developer tools to debug and refine the design. It was a great learning experience!

    What specific areas of your project would you like help with?

    I would like help with improving code readability and organization. Additionally, feedback on enhancing the overall accessibility and user experience of the project would be greatly appreciated.

    testimonial-grid-section

    1
    P
    Thomas TS•920
    @ttsoares

    Nice job ! Just two comments:

    • The design proposes a subtle shadow behind the boxes to get a feel of 3D.
    • The text you posted in the 'solution retrospective' I normally place in the README.md not in the page.
    • The URL to your Github repo is not working: https://github.com/neouruguayancr/testimonial_grid_section1
  • P
    Thomas TS•920
    @ttsoares

    I'm also a fan of this combination of NextJS and Tailwind!

    Your solution is very near the design...

    Just two suggestions:

    • Your checkout button is not resetting the card.
    • The sizes of your fonts are a bit smaller than the design.
    Marked as helpful
  • @philgabby•600
    @CHEGEBB
    What are you most proud of, and what would you do differently next time?

    I am proud of how far my tailwind css learning journey has come, from basic styling to now advanced responsive styling. The options api in vue is also something i have been focusing on for a long time now and this being my fifth challenge using vue i am grateful for the far that i have come 🤗

    What challenges did you encounter, and how did you overcome them?

    Responsive design using purely tailwind css.

    What specific areas of your project would you like help with?

    Creating a responsive design , i'm confused between such things as max-md: and md: or max-sm: and sm: also the order of say sm, md, lg and the other screen sizes.

    coding-bootcamp-testimonials-master

    #vue#tailwind-css
    1
    P
    Thomas TS•920
    @ttsoares

    Good job! :-)

    One observation and one suggestion:

    • The text overlaps a bit in the image. The word “While”, for example.

    • In my solutions, I use the file README-template.md and after filling the titles (like 'What I learned') save the text with the name of README.md

    Marked as helpful
View more comments