Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
35

John Carruthers

@techyjc310 points

I occupy my time with different projects, including development using Visual Basic.NET and Web Development using HTML, CSS, Javascript and PHP+MYSQL.

I’m currently learning...

The art of writing CSS and then refactoring it to death because my CSS looks like a family of chimps wrote it.🤣

Latest solutions

  • Frontend Mentor - Social links profile using Flex & Grid


    John Carruthers•310
    Submitted over 1 year ago

    2 comments
  • Ecommerce Product Page using Grid


    John Carruthers•310
    Submitted over 1 year ago

    2 comments
  • Newsletter sign-up with success message using Grid


    John Carruthers•310
    Submitted over 1 year ago

    2 comments
  • FAQ Accordion using Grid only responsive Design


    John Carruthers•310
    Submitted over 1 year ago

    3 comments
  • Testimonials using Grid-section-main


    John Carruthers•310
    Submitted over 1 year ago

    1 comment
  • news-homepage-main using Grid and Flexbox mobile First.


    John Carruthers•310
    Submitted over 1 year ago

    0 comments
View more solutions

Latest comments

  • John Carruthers•310
    @techyjc
    Submitted over 1 year ago

    Frontend Mentor - Social links profile using Flex & Grid

    2
    John Carruthers•310
    @techyjc
    Posted over 1 year ago

    Updated the design with the suggested changes.

  • anetakak•120
    @anetakak
    Submitted over 1 year ago

    E-commerce product page solution

    #react
    1
    John Carruthers•310
    @techyjc
    Posted over 1 year ago

    Great work! You might want to change the breakpoint as the carousel gets a little small when you resize the browser.

  • John Carruthers•310
    @techyjc
    Submitted over 1 year ago

    Ecommerce Product Page using Grid

    2
    John Carruthers•310
    @techyjc
    Posted over 1 year ago

    Updated the carousel and additional code, plus Avatar size at desktop break point.

  • P
    Daniel 🛸•44,830
    @danielmrz-dev
    Submitted over 1 year ago

    News Homepage built with SASS

    #accessibility#sass/scss#lighthouse
    2
    John Carruthers•310
    @techyjc
    Posted over 1 year ago

    Hi Daniel,

    Great work! I did this challenge. The responsive aspect caused me a few problems, it can mean adding in multiple break points because the areas in the design like the 'new' section start looking a bit odd at various screen sizes. Like that you went your own way with the menu hover. I managed to re-create the menu hover underline using pseudo elements (::before) and/or (::After) but it took a little bit of experimentation.

    I initially looked at your CSS and thought if you had used the classes to address the descendant elements directly to reduce specificity but then realised that you were using SASS and were most likely nesting the your CSS selectors.

    Again, great work!.

  • Kiran-Dev•190
    @Kirandev242144
    Submitted over 1 year ago

    clipboard landing page

    #accessibility
    1
    John Carruthers•310
    @techyjc
    Posted over 1 year ago

    Hi Kiran, Great job! Fair bit of CSS for that one.

  • Ahmed Mo. Rfay•10
    @AhmedMohamedRefaay
    Submitted over 1 year ago

    First

    #accessibility
    2
    John Carruthers•310
    @techyjc
    Posted over 1 year ago

    Glad you got it fixed. You did a nice job. Is there any particular reason you styled some of the elements locally using the style attribute over using selectors in the style sheet?

    You could add line-height: 1.5; for the text to space the lines more. You could also use font-family and font-size to help match the design. You can get the recommended font from google fonts and copy and paste the link and the css entries from the site.

    Using the <br> element is ok for this but I would recommend avoiding the <br> tag when designing responsive layouts. It's better for the text to flow and break in relation to the container size.

    Hope this helps.

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

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