Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
10
P

Peetawit Vongchanapibul

@pete13232180 points

🎓 A Computer Engineering graduate on a mission to rebuild solid foundations in web development. 🛠️ Currently focusing on frontend skills with the goal of becoming a Full-Stack Developer. 🚀 Learning from the ground up to improve problem-solving and coding confidence

I’m currently learning...

Currently focusing on DOM manipulation 🙂

Latest solutions

  • Shopping cart using React

    #react

    P
    Peetawit Vongchanapibul•180
    Submitted 5 days ago

    I would appreciate help with improving my use of components. Currently, I feel that some components are not used correctly or could be better consolidated into a single reusable component. Guidance on best practices for component design and reuse would be very helpful.


    0 comments
  • Manage Form with DOM Manipulation


    P
    Peetawit Vongchanapibul•180
    Submitted about 1 month ago

    1 comment
  • Basic DOM Manipulation - article preview


    P
    Peetawit Vongchanapibul•180
    Submitted about 1 month ago

    I think my HTML structure still has issues. When the share button is active in the mobile view, I slightly modified the card footer's HTML structure. However, switching between mobile and desktop views requires adding and removing certain elements repeatedly. I feel like there should be a better approach, but I can't figure it out yet.


    1 comment
  • Responsive landing page using Grid and Flexbox


    P
    Peetawit Vongchanapibul•180
    Submitted about 2 months ago

    I tried to work around making the .hero__avatar slightly overflow out of the screen (just like in the original design), but I couldn’t quite get it right. 😭

    If anyone has tips or knows how to achieve that effect properly with CSS, I’d really appreciate the help!

    Thanks in advance! 🙏


    1 comment
  • Testimonial grid section with responsive design


    P
    Peetawit Vongchanapibul•180
    Submitted 2 months ago

    1 comment
  • Reponsive 4-card section page using CSS Grid


    P
    Peetawit Vongchanapibul•180
    Submitted 2 months ago

    1 comment
View more solutions

Latest comments

  • Marshall-Marcelo•210
    @Marshall-Marcelo
    Submitted about 1 month ago
    What specific areas of your project would you like help with?
    1. The responsiveness and overall layouts are quite messy so I would like additional feedback there.

    2. I feel like my JavaScript could get better.

    Newsletter Sign Up

    1
    P
    Peetawit Vongchanapibul•180
    @pete13232
    Posted about 1 month ago

    It's great you're reaching out for help! I can certainly offer some friendly feedback from my own experience with this challenge.

    Feedback on Responsiveness & Layout

    You're off to a strong start by using <source> within <picture> for your images – that's a really good practice for responsive images!

    To take it a step further and get even better control over different screen sizes, you might consider adding more image sizes than just desktop and mobile. For instance, in your ./assets/images folder, you could include:

    • illustration-sign-up-desktop.svg
    • illustration-sign-up-tablet.svg
    • illustration-sign-up-mobile.svg

    A result like this:

    <picture class="card__img">
       <source media="(min-width:1440px)" srcset="./assets/images/illustration-sign-up-desktop.svg">
       <source media="(min-width:768px)" srcset="./assets/images/illustration-sign-up-tablet.svg">
       <source media="(min-width:365px)" srcset="./assets/images/illustration-sign-up-mobile.svg">
       <img src="./assets/images/illustration-sign-up-mobile.svg" alt="card-image">
    </picture>
    

    Having a tablet-specific image can really help refine your layout in that tricky middle-ground between desktop and mobile.

    Hope this little tip helps!

    Marked as helpful
  • o-k-harmash•160
    @o-k-harmash
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Tooltip and Footer Behavior Implementation: Summary & Notes 🧩 Problem Overview The task involved implementing a tooltip display on desktop and a footer transformation on mobile view as part of a social sharing UI component. The functionality is somewhat similar to a classic responsive navigation menu — for example, a hamburger button that reveals a sidebar menu on smaller screens.

    ✅ Approach It was decided to delegate only the toggling logic to JavaScript, which simply updates the data-share attribute on the footer element. JavaScript answers the question “what should be displayed?”, while the UI layer (CSS) answers “how should it look and behave?”.

    The UI is fully responsible for deciding which layout to show based on the screen size. Two distinct views are implemented:

    A tooltip-style popup shown above the share button on desktop.

    A footer replacement view shown on mobile.

    This separation is clean, intuitive, and aligns well with modern responsive design patterns.

    ⚠️ Limitations & Accessibility Consideration What was not implemented in this task is ARIA accessibility management. Specifically:

    The aria-hidden attribute is not updated dynamically to reflect visibility changes.

    This may affect screen reader support and accessibility tree clarity.

    Proper aria-hidden, role="tooltip" usage, and keyboard navigation handling could be considered for future improvement.

    Article-preview-component

    1
    P
    Peetawit Vongchanapibul•180
    @pete13232
    Posted about 1 month ago

    I really like the approach you used—especially the use of the data-share attribute. It’s a clever solution that I wouldn’t have thought of myself!

  • P
    Vidhit Varma•530
    @vidhitvarma
    Submitted over 2 years ago

    Meet landing page

    1
    P
    Peetawit Vongchanapibul•180
    @pete13232
    Posted about 2 months ago

    Great job overall! I'm not a professional in layout myself, but after checking your code, I think you did really well. One suggestion: using CSS Grid or Flexbox for the main layout can make it easier to manage structure, rather than relying on individual margins or setting specific min-width values for each section. That way, the layout can better adapt to different screen sizes without elements breaking or overlapping.

    Keep it up!

  • Sameer Mehta•170
    @Sameer1003
    Submitted 2 months ago

    Responsive Testimonials Page

    1
    P
    Peetawit Vongchanapibul•180
    @pete13232
    Posted 2 months ago

    Suggestion for improvement: I noticed a layout issue related to the min-width property. When I set the page width to 900px, the main content overflows beyond the screen.

    After inspecting the layout, I found this rule in your code:

    main {
       height: 70%;
       width: 70%;
    }
    

    This causes the card section to overflow because 70% of 900px is 630px. However, your main is using a 4-column grid:

    main {
       grid-template: 1fr 1fr / 1fr 1fr 1fr 1fr;
    }
    

    This means each column has a maximum width of 157.5px. But you’ve set each .content-container to have a min-width of 200px:

    .content-container {
       min-width: 200px;
    }
    

    So, the total minimum width required for 4 columns is 800px, which exceeds the 630px available space in this case, resulting in overflow.

    Suggested solutions:

    • Remove the min-width property from .content-container.

    • Instead of setting fixed width and height on main, consider using padding to create spacing.

    Hope this helps! You're doing great — just some minor adjustments will make the layout more responsive 😊

    Marked as helpful
  • P
    GeraASM•630
    @GeraASM
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    the next time I'll try to use more min-width to take de same width en all same items to avoid complications in the flexbox

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

    I'd like to get new forms to do this concepts more easy

    flex a littler tip with the alight items

    1
    P
    Peetawit Vongchanapibul•180
    @pete13232
    Posted 2 months ago

    Nice work with Flexbox!

    You could also try using CSS Grid — it gives you more control over complex layouts.

  • Terence Zhang•620
    @TerenceCLZhang
    Submitted 3 months ago

    Product preview card component built using basic HTML and CSS

    1
    P
    Peetawit Vongchanapibul•180
    @pete13232
    Posted 3 months ago

    Your code structure is excellent — really clean and easy to follow. Great job! 👏

    As an optional idea (nothing critical at all), you could also consider using a <picture> element for responsive images in case you want to serve different sizes for different screens:

    <picture>
      <source media="(min-width:<screen-size>)" srcset="">
      <img src="" alt="">
    </picture>
    

    But honestly, the current approach already works well. Just wanted to share another option!

View more comments
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

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