Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
0
Jon D
@jcad57

All solutions

  • Shopping Cart React Component

    #react

    Jon D•190
    Submitted 10 months ago

    I could not find a good way to create the page-dimming effect when the confirmation modal pops up. I ended up using a box shadow and I mean it sort of worked but it was not part of the design file.

    I would love any feedback at all on the "cleanliness" of my components, logic and JSX since this was my first time attempting a react app.


    0 comments
  • Interactive Rating Component - vanilla JS


    Jon D•190
    Submitted about 1 year ago

    1 comment
  • BMI Calculator


    Jon D•190
    Submitted about 1 year ago

    I would love to hear a better solution to setting background images to offset their position, like the background gradient in the header and the image of the dude eating sushi in the tablet view (it shows a left offset). I used position absolute, and it works fine however fixed heights and position absolute make me feel like that goes against responsiveness best practices.

    Also, I used pseudo elements for the little guiding lines on the desktop layout - is that the best way to accomplish those? I couldn't think of another way.

    Lastly, the radio buttons are very "magic number-y". They were custom so I had to manually place them properly. The main issue is the custom "outline". It overflows the container so I had to add margin-left to offset the button when it becomes selected. Are there better ways to make custom radio buttons that don't require all the extra margins to keep everything aligned?

    Any other general feedback on the HTML/CSS/JS would be helpful as well.

    Thanks!


    0 comments
  • Contact Form


    Jon D•190
    Submitted about 1 year ago

    Accessibility, what ways could it be better?


    0 comments
  • Notification Center


    Jon D•190
    Submitted over 1 year ago

    0 comments
  • Newsletter Sign Up Form


    Jon D•190
    Submitted over 1 year ago

    0 comments
  • Age Calculator App


    Jon D•190
    Submitted over 1 year ago

    0 comments
  • FAQ with JavaScript


    Jon D•190
    Submitted over 1 year ago

    1 comment
  • Social Links Solution (with a little customization)


    Jon D•190
    Submitted over 1 year ago

    1 comment
  • Results Summary App


    Jon D•190
    Submitted over 1 year ago

    0 comments
  • Blog Preview Card Solution


    Jon D•190
    Submitted over 1 year ago

    2 comments
  • Product Preview Card Solution

    #theme-ui

    Jon D•190
    Submitted almost 2 years ago

    0 comments
  • Order Summary Component

    #web-components#styled-components

    Jon D•190
    Submitted almost 2 years ago

    0 comments

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