Skip to content
OverviewSolutions
12
Comments
13
P

BlonoBuccellati

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

  • P
    BlonoBuccellati•270
    @BlonoBuccellati

    great job!

  • P
    BlonoBuccellati•270
    @BlonoBuccellati

    I’d like to share a few thoughts.

    • When the <input> receives focus, the UI’s height increases—likely because a border is being added on focus. To prevent that, use an outline instead to avoid this layout shift. An outline is not included in the element’s box size.
    • The reset button isn’t being disabled based on conditions; consider adding the disabled attribute to the <button> to prevent it from being clickable when it shouldn’t be.

    Hope this helps!

  • P
    BlonoBuccellati•270
    @BlonoBuccellati

    nice

  • Mori•150
    @MoriNo23
    What are you most proud of, and what would you do differently next time?
    1. Proper Use of min-height in Layouts

    "How can I use min-height effectively to prevent layout issues? I learned it’s useful for ensuring a container doesn’t shrink too much, but I’m unsure how to balance it with other properties (like height or flex-grow) to avoid unexpected expansion."

    Key points:

    You recognize its importance for responsive containers.

You want to avoid conflicts with other layout rules.

You’re seeking practical examples (e.g., min-height in Flexbox/Grid).
    What challenges did you encounter, and how did you overcome them?

    Optional: Code Structure Feedback

    "Are there ways to simplify my form validation logic or CSS structure? I’d appreciate feedback on making my code more maintainable."

    Key points:

    Open-ended request for optimization.

Targets readability/scalability.

    Reponsive layout using grid, tailwind md

    #react#tailwind-css
    1
    P
    BlonoBuccellati•270
    @BlonoBuccellati

    I’d like to share a few thoughts.

    About height and min-height

    I generally avoid using height in layouts, and instead rely on max-width, padding, and flow-based layouts. Setting a fixed height can easily cause content to overflow or become clipped, especially on smaller screen sizes.

    As you mentioned, min-height is useful when you want to ensure a container keeps a minimum size — such as for modals. In this specific UI, I would use min-height for the modal buttons on mobile view, to ensure they are always placed near the bottom of the viewport. For that, I use min-h-screen in Tailwind CSS, which is equivalent to min-height: 100vh.

    About the structure

    It seems the GitHub repository only includes the compiled source code, so unfortunately I wasn’t able to review the layout structure itself.

    On form validation logic

    I recommend using custom hooks to isolate form logic, such as validation, input state, and submission handling. This improves readability and reusability — especially as your forms become more complex.

    On simplifying CSS

    There are a few key principles I follow to keep CSS maintainable:

    1. Mobile-first design: Start by designing for the smallest screen first. It often leads to simpler layout logic. I recommend this article:
      How to Take the Right Approach to Responsive Web Design

    2. Typography tokens: I like managing typography using tokens or utilities. Here's an example using Tailwind v4:

      @utility typo-header {
  font-family: var(--font-roboto);
  font-weight: var(--font-weight-bold);
  font-size: clamp(2.5rem, 1.556rem + 4.05vw, 3.5rem);
  line-height: 100%;
  letter-spacing: 0;
}

    Hope this helps!

    Marked as helpful
  • P
    BlonoBuccellati•270
    @BlonoBuccellati

    great job!

    Marked as helpful
  • P
    devmd1997•190
    @devmd1997
    What are you most proud of, and what would you do differently next time?

    Learning how to properly use the positioning elements really helped out when my components kept resizing.

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

    The toughest part was trying to get the background overlay to look similar to the design. I tried my best with the background overlay styles but it didn't look exactly like the design.

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

    I would like to learn more about how to overlay a color over a background image. It was tough to do with the z indexes.

    Responsive Landing Page

    #tailwind-css
    1
    P
    BlonoBuccellati•270
    @BlonoBuccellati

    Great job! I noticed a couple of things that might be worth considering:

    • It looks like the buttons don’t have any hover styles applied.
    • Using clamp() for font sizing might help make the typography more fluid and responsive across different screen sizes.

    Just sharing some thoughts — hope this helps!

View more comments