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

Pedro Chaparro

@PChaparroColombia260 points

Systems and Informatics Engineering Student.

Latest solutions

  • E-commerce product page | React + Tailwindcss

    #animation#react#tailwind-css

    Pedro Chaparro•260
    Submitted almost 2 years ago

    0 comments
  • Chat App CSS Illustration (Astro + Tailwindcss + Tailwindcss-animated)

    #astro#tailwind-css#animation

    Pedro Chaparro•260
    Submitted almost 2 years ago

    0 comments
  • Countries page using NextJS 13 and TailwindCSS

    #next#react#tailwind-css

    Pedro Chaparro•260
    Submitted almost 2 years ago

    0 comments
  • NextJS + CSS Module | Bookmark landing page

    #next#react

    Pedro Chaparro•260
    Submitted almost 2 years ago

    0 comments
  • Job listings with filtering

    #react#vite

    Pedro Chaparro•260
    Submitted over 2 years ago

    0 comments
  • Easy bank landing page

    #react#typescript#vite

    Pedro Chaparro•260
    Submitted over 2 years ago

    3 comments
View more solutions

Latest comments

  • Aguluka Ngozi celestina•80
    @melissacinta
    Submitted almost 2 years ago

    Responsive Space Tourism website using react, react-slick & tailwind

    #react#tailwind-css#typescript#vite
    2
    Pedro Chaparro•260
    @PChaparro
    Posted almost 2 years ago

    Hi, the solution is awesome. It seems that the library you used for the sliders is adding a fixed height to a <div> with the class .slick-list, in the case of the biography texts the fixed height is 247px in a desktop screen and that's the reason why you're loosing some text. I hope that can be useful.

  • Saswat Samal•80
    @saswat10
    Submitted almost 2 years ago

    REST API Countries

    #axios#react#sass/scss#react-router
    2
    Pedro Chaparro•260
    @PChaparro
    Posted almost 2 years ago

    Hi, you did it well. About the naming problem in the CSS classes, I suggest you to use the BEM methodology, it allows you organize your classes based on Blocks, Elements and Modifiers, for instance, in your .dropdown component, you could have classes like .dropdown__option, .dropdown--hide, .dropdown--show, etc.

    To optimize the search component and provide a "better" user experience you could update the results in real time and use a "Debouncer" to prevent unnecessary re-renders of the countries cards by adding a timeout between each UI update or API call.

    Marked as helpful
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