Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
6

Stephen Johnston

@sjohnston82320 points

I am a full stack web developer who loves problem solving and learning new technologies.

Latest solutions

  • QR component


    Stephen Johnston•320
    Submitted over 1 year ago

    0 comments
  • Responsive advice generator - nextjs, tailwind

    #next#tailwind-css#axios

    Stephen Johnston•320
    Submitted over 1 year ago

    0 comments
  • Responsive rating component - HTML, JS and CSS


    Stephen Johnston•320
    Submitted over 1 year ago

    0 comments
  • Responsive intro page with nextjs/tailwind

    #next#tailwind-css

    Stephen Johnston•320
    Submitted over 1 year ago

    4 comments
  • Dynamic expense chart component using ChartJs, nextjs and tailwind

    #chart-js#next#tailwind-css

    Stephen Johnston•320
    Submitted over 1 year ago

    0 comments
  • Responsive - HTML and CSS


    Stephen Johnston•320
    Submitted over 1 year ago

    1 comment
View more solutions

Latest comments

  • KOUSHIK KV•30
    @kvk1999
    Submitted over 1 year ago

    Interactive comment Section

    #bootstrap#jquery#mysql#web-components#jss
    1
    Stephen Johnston•320
    @sjohnston82
    Posted over 1 year ago

    It looks great!

    One thing you could consider doing is calling your Comment component recursively, which would allow for multiple levels of nesting in comments, instead of replies to replies being at the same level as the original reply.

    Marked as helpful
  • CasteAwayy•30
    @CasteAwayy
    Submitted over 1 year ago

    HTML, CSS

    1
    Stephen Johnston•320
    @sjohnston82
    Posted over 1 year ago

    If you look in the style-guide.md file provided in the download, it shows you the font that is used.

  • Marvin Kamwenji•60
    @Marvin-kamwenji
    Submitted over 1 year ago

    newsletter signup challenge

    1
    Stephen Johnston•320
    @sjohnston82
    Posted over 1 year ago

    Running a javascript function that runs some email regex on the input when it submitted and then setting the input into localStorage when it is validated is all that's needed for the form to validate and carry over the email address to the confirmation page, no server necessary. Although after looking it looks like you had the validation part covered.

    Marked as helpful
  • Divine Ebube Ifechukwude•10
    @Ebi-Tech
    Submitted over 1 year ago

    Mobile responsive design using Next and React

    #next#react#tailwind-css#node
    1
    Stephen Johnston•320
    @sjohnston82
    Posted over 1 year ago

    Nice project! A couple of things I would comment on is that since you are using tailwind, its really easy to start with the mobile version first and just add your screen sizes in front of the classes (lg:mt-12) for example for the desktop version. Also, I saw that you were using w-[50%] which can be easily replaced as w-1/2.

    For correctly sizing the component, one method I found has been working for me is to pull the design image into a browser tab and then inspect it to get the dimensions instead of just eyeballing it.

    Hope this helps.

    Marked as helpful
  • Stephen Johnston•320
    @sjohnston82
    Submitted over 1 year ago

    Responsive - HTML and CSS

    1
    Stephen Johnston•320
    @sjohnston82
    Posted over 1 year ago

    Does anyone know why my styling for the prices wouldn't show up in the screen shot when it does in the live site?

  • Alex Garcia 🦝 Garcialexco•440
    @garcialexco
    Submitted almost 2 years ago

    Newsletter Sign-Up Form

    #bem#accessibility
    1
    Stephen Johnston•320
    @sjohnston82
    Posted almost 2 years ago

    The styling looks great! One thing I noticed was you are not passing the input email to the success page.

    This can easily be done by setting the form data into local storage and then retrieving it on the success page:

    let userEmail = document.getElementById("emailAddress").value;
    localStorage.setItem("email", userEmail);
    

    and in a script tag on the success page:

    const email = localStorage.getItem("email");
    const spanElement = document.getElementsByClassName("user-email-success")[0];
    spanElement.textContent = email;
    
    Marked as helpful
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