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

TuetrungNguyen

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

  • Social Link Page Solution First Draft

    #next#react#tailwind-css

    TuetrungNguyen•30
    Submitted 8 months ago

    1 comment
  • Blog Preview Card First Solution

    #tailwind-css#react

    TuetrungNguyen•30
    Submitted 8 months ago

    The card widths/max-widths as mentioned in the challenges. My attempts of setting the max-width and max-height followed by using w-full and h-full messed up the cards, not sure what else to do.


    1 comment
  • Responsive QR Code page

    #tailwind-css#react

    TuetrungNguyen•30
    Submitted 8 months ago

    I would like help with adjusting the image size so that the space it takes up in the card is more align to the original version


    1 comment

Latest comments

  • P
    Oguzcan Karakoc•110
    @OguzcanKarakoc
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I tried to do this one a bit different. I did it without figma or any other help, just by purely looking at the image and by 'feel'.

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

    I can't seem to get the live version of my app to work. it doesn't acccept: https://ckarakoc.github.io/FrontendMentor/social-links as a valid URL.

    Social links pure png solution

    #angular#tailwind-css
    1
    TuetrungNguyen•30
    @TuetrungNguyen
    Posted 8 months ago

    Hi @OguzcanKarakoc! I think you did a great job on your design for the Social Links Profile project! Just some minor tips:

    • Overall the card and the components inside of it look a bit small, but since I don't have access to the Figma files and the actual design numbers this may not be an issue
    • Not linking directly to the project in question (given the website link) to instead the landing page for all of your projects is a bit confusing. The landing page looks great! Just that in the preview and when people first look at the link it is a bit confusing to not see the expected website.
  • Jonas•30
    @bavgg
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I learned CSS clamp function for responsive design.

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

    I find it difficult to learn clamp function, but I did it anyway.

    Responsive design using CSS clamp function

    #react#tailwind-css#vite
    1
    TuetrungNguyen•30
    @TuetrungNguyen
    Posted 8 months ago

    Hi @bavgg! I think the only things that might need adjustments are the padding/margins between the elements (slightly differs from the original design), and your text for "Greg Hooper" is bigger than the design. But other than that, everything looks good!

  • Grant Wake•10
    @grantwake01
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Setting up the project and styling the components was pretty straightforward. I found the Figma style guide easier to follow than the main download.

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

    I've never used GH Pages before, and getting to deploy took a few attempts, as it complained about the GH Pages branch already existing. Looking back, I should have removed elements I'm not using, ie the unused image removed from the create-react-app set-up, but as this is my first mentor project, I'm happy to leave it as is for now.

    react typescript component, with css

    #react#typescript
    1
    TuetrungNguyen•30
    @TuetrungNguyen
    Posted 8 months ago

    Hi @grantwake01! Honestly, your solution looks very close to the original design and looks fine when changing screen size. I would say the only minor differences are that your white card might be a bit bigger, and there is more padding around the QR code image in yours.

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