Skip to content
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

View more solutions

Latest comments

  • John Pugh•370
    @JohnPugh688
    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

    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
    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

    great project! :)

  • perterHUAN•250
    @perterHUAN
    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:

    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

    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 :)

  • Thiago Lorhan•150
    @Thiagouh

    good solution! very concise with the original ;)

  • Oscar Hernández•170
    @oscar84-spec
    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

    Nice solution! :)

  • Brian Hammer•180
    @BrianHammer
    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

    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