Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
12
Comments
10
P
Peetawit Vongchanapibul
@pete13232

All solutions

  • Form validation - Mortgage repayment calculator using React

    #react

    P
    Peetawit Vongchanapibul•200
    Submitted 27 days ago

    I've already done some basic refactoring, but if you spot any areas where the code could be further improved—especially to reduce repetition or make it more reusable—I'd really appreciate your suggestions!


    0 comments
  • Shopping cart using React

    #react

    P
    Peetawit Vongchanapibul•200
    Submitted about 2 months 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•200
    Submitted 3 months ago

    1 comment
  • Basic DOM Manipulation - article preview


    P
    Peetawit Vongchanapibul•200
    Submitted 3 months 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•200
    Submitted 3 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•200
    Submitted 4 months ago

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


    P
    Peetawit Vongchanapibul•200
    Submitted 4 months ago

    1 comment
  • Responsive preview card with Flexbox


    P
    Peetawit Vongchanapibul•200
    Submitted 4 months ago

    1 comment
  • "Recipe page layout using Flexbox with basic responsive design.


    P
    Peetawit Vongchanapibul•200
    Submitted 4 months ago

    I'm looking for better ways to style the gap between the bullet (or number) and the text. Is it considered good practice to use <p> elements with Flexbox for this purpose, or would it be better to use a semantic tag like <ol>?

    <div class="list">
       <p class="number">1.</p>
       <p class="list-content"><span>Beat the eggs:</span> In a bowl, beat the eggs with a pinch of 
        salt and pepper until they are well mixed.You can add a tablespoon of water or milk for a fluffier texture.</p>
    </div>
    

    1 comment
  • Social link card challenge using Flexbox


    P
    Peetawit Vongchanapibul•200
    Submitted 4 months ago

    1 comment
  • Blog preview card structuring HTML and CSS Hover effect


    P
    Peetawit Vongchanapibul•200
    Submitted 5 months ago

    I can't decide what the best practice is to use margin. Should I use it directly for the heading/paragraph tag or keep those tags with 0 margins and spacing by a margin of each <div> element instead?


    1 comment
  • Simple card using flexbox


    P
    Peetawit Vongchanapibul•200
    Submitted 5 months ago

    1 comment

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