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

All comments

  • Akiz-Ivanov•450
    @Akiz-Ivanov
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I’m proud of implementing a custom popover system with dynamic positioning logic, including flip behavior and responsive layout adjustments, all without relying on external positioning libraries. I also handled escape key and outside click closing manually, which helped me better understand how popovers work under the hood.

    Next time, I would consider using transform: translate(...) instead of top/left for smoother, GPU-accelerated transitions. I'd also like to extract reusable popover primitives/hooks that can be used across different components.

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

    The biggest challenge was positioning the popover dynamically to avoid viewport overflow. I had to compute available space and implement flip logic manually. Ensuring the arrow stayed properly aligned with the button during resizing and flip transitions was also tricky.

    To overcome this, I used ResizeObserver, getBoundingClientRect, and a combination of custom hooks and utilities (updatePopoverPosition, positionArrow).

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

    Any feedback is welcome.

    Responsive article-preview-component using React, TypeScript, Tailwind

    #react#tailwind-css#typescript#vite
    2
    fisherstack•120
    @fisherstack
    Posted 2 months ago

    Wow that's excellent ! I came to the principle of tooltip too, but you seem to have a smart markup imbrication i didn't thought of. In fact, i don't get it all yet : i'll have to study your solution ! ... after my headache is gone ^^'

  • Siddharth-esc•30
    @Siddharth-esc
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    i'm glad that that i have completed this project in a short span of time. one of the things that i will do differently next time is breaking stuff into smaller parts and checking how each item works as per the responsiveness which will save a lot of my time.

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

    there were not any major problems in this challenge, although i faced one will positioning the footer which was malfunctioning.

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

    how to prevent malfunctioning in media queries and also while adding new elements in html.

    cards made using css grid, used flexbox to align items, used media que

    2
    fisherstack•120
    @fisherstack
    Posted 2 months ago

    Nice job :) That's interesting : I didn't though of that way of managing the white background (for the second card, with a negative margin) : i treated the white background as the main background (less minus values for lazy persons like me ^^).

  • HusseinAlaa•40
    @hussein430
    Submitted 2 months ago

    Make the website responsive using css flex

    1
    fisherstack•120
    @fisherstack
    Posted 2 months ago

    Hi ! It's my first review, as i also started my first challenge here. What can i say... maybe it lacks a rounded corner on the image itself :)

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