Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
7

Thiago Lorhan

@ThiagouhBrazil150 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Browser Extensions Manager UI • ES6 Modules & CSS Custom Properties

    #fetch

    Thiago Lorhan•150
    Submitted about 2 months ago
    1. Unit testing strategy I’d love guidance on writing Jest tests for DOM‑heavy modules. For example, how to simulate clicks on the filter buttons and assert that only the correct cards remain.

    2. Optimal bundler setup Recommendations on a minimal Vite or Webpack config that handles ES modules, hot reloading, and static assets (images, fonts) without too much boilerplate.

    3. Accessibility improvements Feedback on additional ARIA attributes or keyboard‑navigation patterns for the card list and theme toggle beyond the aria-label I already added.


    0 comments
  • Responsive Newsletter Sign-up Form with Success Message


    Thiago Lorhan•150
    Submitted 3 months ago
    1. CSS Optimization: Suggestions on organizing selectors and reducing specificity to keep the CSS scalable and maintainable.

    2. Accessibility Improvements: Advice on further enhancing the accessibility of interactive elements (e.g., more descriptive ARIA attributes, better focus management, etc.).

    3. Form Validation: Insights on modern best practices for email validation and handling real-time user feedback.


    0 comments
  • Responsive Page with Tailwind CSS

    #tailwind-css

    Thiago Lorhan•150
    Submitted 11 months ago

    I accept feedback on any part of the code. I will be grateful for any help!


    0 comments
  • Responsive Testimonials Grid Section with Tailwind CSS

    #tailwind-css

    Thiago Lorhan•150
    Submitted 12 months ago

    Any feedback on the project is welcome!


    1 comment
  • Responsive Four Card Feature Section with Tailwindcss

    #tailwind-css

    Thiago Lorhan•150
    Submitted 12 months ago

    any feedback for the solution is welcome!


    1 comment
  • Responsive Product Preview Card with TailwindCSS

    #tailwind-css

    Thiago Lorhan•150
    Submitted about 1 year ago

    in short, at all. any review is welcome.


    1 comment
View more solutions

Latest comments

  • John Pugh•370
    @JohnPugh688
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how far i've come since the first time i done this project! The first time doing this i followed along to an online tutorial and barely had a clue what i was doing and now i've done this version using Tailwind css completely on my own and understood exactly what i was doing. If i was to do this again i would like to try and make it using less html by creating one card with all the styles and just adding required content without having to style every card. even though i only had to copy paste i'm sure there is a benefit to using less code when it comes to bigger projects to improve the speed of the website. Something i've not considered yet but still need to learn.

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

    Remembering how to get the image to be behind the text on Daniels card. I knew i had to use absolute positioning and make the parent relative but i couldn't get the z-index to work. ended up just using negative z index on the image and that worked. I'm not sure that was the best way to do it but if somebody could let me know that would be great.

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

    Im always open to constructive criticism. Please don't hesitate to let me know what i can do better mainly to reduce the amount of code perhaps needed?

    Testimonial Grid Section using Tailwind css Grid & Flexbox

    #tailwind-css
    1
    Thiago Lorhan•150
    @Thiagouh
    Posted 12 months ago

    I thought your solution was good! I also liked the use of hover. on the issue of writing less html, perhaps introducing React to split each section into small components would be a way to clean up your html more. Other than that, I don't know what to recommend :)

  • David Almonacid•70
    @DavidAlmonacid
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I found awesome working with a layout that uses CSS grid and making it responsive.

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

    The most challenging was creating the columns and the rows in the CSS grid layout.

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

    It was a starter project, so I don't need an extra help in this moment.

    Responsive layout four card feature section

    #vite#tailwind-css
    1
    Thiago Lorhan•150
    @Thiagouh
    Posted 12 months ago

    great project! :)

  • perterHUAN•250
    @perterHUAN
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    empty

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

    How to make images responsive?

    • Employ the `` element to serve different-sized photos depending on screen size.
    • Use object-fit: cover to maintain the inherent aspect ratio of the image without distorting it through stretching; however, this may cause cropping of the photo.
    • Set max-width: 100% to prevent images from overflowing their containers.
    • Utilize height: auto or block-size: auto (for CSS Grid layouts) to preserve the natural proportions of the image while resizing.

    references:

    • web dev responsive images
    • web dev the picture elments
    What specific areas of your project would you like help with?

    On non-small screens, how should the width sizes of both left and right sides (which should be equal) be determined? The overall width of the card component has a limit of sm:max-w-lg.

    For setting the widths of the two sides: Should a specific width be directly assigned, like so:

    flex-basis-[33ch]
    

    Or, Should a percentage be set, where the width at this point would depend on the size of the left-side photo and the maximum content width on the right side, along with the Max-width of the parent element:

    flex-basis-2/4
    

    use tailwindcss to implement product-preview-card

    #tailwind-css
    1
    Thiago Lorhan•150
    @Thiagouh
    Posted about 1 year ago

    The fixed width option (flex-basis-[33ch]) is considered a good choice, among those you mentioned, to keep the product card centered on the screen for a few reasons:

    Consistency: With a fixed width, both parts (left and right) will be the same size regardless of the content. This creates a consistent, balanced look.

    Centering: Fixed width ensures the card remains centered regardless of screen size. This is especially important when you want the card to be in the middle of the screen on all devices.

    Predictability: With a fixed width, you know exactly how much space each part will take up. This makes component planning and design easier.

    Maybe this will help you :)

  • Abraham Pech•90
    @aapa1993
    Submitted about 1 year ago

    Recipe Page in Tailwind

    #tailwind-css
    1
    Thiago Lorhan•150
    @Thiagouh
    Posted about 1 year ago

    good solution! very concise with the original ;)

  • Oscar Hernández•170
    @oscar84-spec
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Cada vez más voy aprendiendo a utilizar de mejor manera tailwind css

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

    con el dieseño responsivo, poder adaptarlo de la mejor manera para que luzca igual que el ejemplo

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

    Por el momento todo bien,

    Responsive Design, Tailwind CSS, Mobile-first workflow

    #tailwind-css
    1
    Thiago Lorhan•150
    @Thiagouh
    Posted about 1 year ago

    Nice solution! :)

  • Brian Hammer•180
    @BrianHammer
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the "categories" change I have made, where the card can display multiple categories at once. The categories will move to another row if there are too many categories to fit in a single row. One thing I would do differently is to incorporate the exact font weights used in style-guide.md.

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

    The attribution message was causing problems, but it was fixed by giving it a relative position in the top left corner.

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

    Any tips or advice is appreciated!

    Blog Preview with Multiple Categories using Tailwind

    #tailwind-css
    1
    Thiago Lorhan•150
    @Thiagouh
    Posted about 1 year ago

    your challenge was well produced and with good choices of Tailwind classes to solve it and bring it closer to the original design. The implementation of the HTML and More... topics also demonstrates your creativity in carrying out this challenge (perhaps implementing a yellowish bg for More... would be cool ;))

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub