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

ijohnst

@ijohnst230 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Time Tracking Dashboard - Vanilla HTML/CSS/JS


    ijohnst•230
    Submitted about 1 year ago

    I think I understand why frameworks make things easier. Doing this vanilla took a bit of work but I got there. Really the only thing I need help with is simplifying things in the future especially with the JS


    2 comments
  • Newsletter Sign Up Vanilla HTML/CSS/JS


    ijohnst•230
    Submitted about 1 year ago

    Streamlining my JS. I know I used some regular functions, maybe I could have used more arrow functions and streamlined it some


    1 comment
  • Article Preview Component - Vanilla HTML CSS JS


    ijohnst•230
    Submitted about 1 year ago

    An easier and cleaner way to handle the share menu on both desktop and mobile


    1 comment
  • Testimonials Grid Vanilla HTML/CSS


    ijohnst•230
    Submitted about 1 year ago

    None I'm satisfied with the solution


    1 comment
  • Four Card Feature


    ijohnst•230
    Submitted about 1 year ago

    None


    1 comment
  • Product Preview Card HTML & CSS


    ijohnst•230
    Submitted about 1 year ago

    None this time


    1 comment
View more solutions

Latest comments

  • Caelus•520
    @Caelus111
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud in general of this project, it's a stepping stone of coming projects that will need to be professional and wrote in with a deadend limit. And I would do the JS better next time I have better understanding of DRY coding, but for now this is my solution... 😊

    What challenges did you encounter, and how did you overcome them?

    I did the project normally (large screen and then phone), but it didnt work well, the layout would jump when I change the window's width... but when I built the other way around in turned out great. in the end it's just how to think out of the problem and keep calm... dont panic. 👌

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

    I would love a rewrite of JS with a DRY code that doesn't have alot of repeats of same code doing same thing... but overall any advices are welcomed. 😁

    A time tracker dashboard.

    1
    ijohnst•230
    @ijohnst
    Posted about 1 year ago

    Your way certainly works, good job.

  • Lara Mesa•250
    @Lara-art
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I’m really proud of this CSS code because I made it mobile responsive without using any @media queries.

    h1 {
        font-size: clamp(2.2rem, 1.986rem + 0.571vw, 2.5rem);
    }
    
    .container {
        max-width: 1440px;
        margin: auto;
        padding: 2rem;
        display: grid;
    }
    

    Using place-content: center, I was able to align and justify it both vertically and horizontally.

    .container {
        display: grid;
        place-content: center;
    }
    
    What challenges did you encounter, and how did you overcome them?

    The biggest challenge for me was not using @media, instead relying on relative units, and making sure everything was centered on the screen.

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

    I’d like to know if this is actually the right way to do it to avoid using @media. Also, how can I improve my CSS writing skills?

    QR-code-component

    2
    ijohnst•230
    @ijohnst
    Posted about 1 year ago

    First of all great work, you definitely got it working. To add on to the other comment you really don't need grid or flex on your container and you don't need the unnecessary divs you have throughout the HTML. All of these elements are going to be block elements so they will stack by default (you can see it if you write all the HTML and don't add CSS yet).

    Wrap your <img><h1><p> in an <article> and then let either some padding or margin handle the spacing.

    You can however use the grid, place contents trick on either your <body> or <main> (if you choose to wrap it in that) to center the content. But inside the card you should avoid the divs and flex for now. You'll have plenty of opportunities to use them in the later challenges.

    Marked as helpful
  • P
    Jan Kotvaš•460
    @DrakeHermit
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    This is the second time I finished this challenge and I wrote my JS way different this time, and added a new feature to it(automatic error state remover). So I suppose that I could redo this challenge every so often as my JS skills improve and all the time the solution would be different to a degree.

    What challenges did you encounter, and how did you overcome them?

    I faced different kind of challenges all that I would overcome by researching topics or watching videos. The biggest problem I faced and didn't manage to overcome was the fact that I wanted to store the current state of the html in a variable which sort of worked but it didn't store the CSS itself for some reason. But this is something I will do my best to learn for the next challenges that are coming up.

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

    Just general code review for my JS code and how I styled the page with CSS. I still have a ton to learn from my mistakes.

    Newsletter signup form with JS validation

    1
    ijohnst•230
    @ijohnst
    Posted about 1 year ago

    First of all great work!

    One thing that might help is to use the <picture> element to swap from the desktop to mobile image on mobile screen sizes (right now in mobile view you have the desktop.svg showing). This worked for me: <picture class="signup--image"><source srcset="./assets/images/illustration-sign-up-desktop.svg" media="(min-width: 55em)"><img src="./assets/images/illustration-sign-up-mobile.svg" alt="Illustration of a website dashboard and tablet"></picture>

    Just make sure the media attribute in there matches whatever breakpoint you are using for your media queries

    Marked as helpful
  • Caelus•520
    @Caelus111
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    this is the first projects after a long haitus, so I am kinda pround of returning to making things with JS.

    What challenges did you encounter, and how did you overcome them?

    the gray pop up was kinda hard at first but just with little thought, I got it

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

    I think I need help in thinking of the right sequence of doing the project... i get lost because i dont think about how I am gonna do X thing, I just do it without thinking...

    Article Preview Component

    1
    ijohnst•230
    @ijohnst
    Posted about 1 year ago

    i like how yours came, especially after my own struggles. Couple of really minor things:

    1. The share button is missing the active state colors when pressed (like in the design).
    2. On the next project I'd suggest naming the main thing something easier to follow than 'container', just makes it difficult for someone who didnt write your code to read it

    Looks good though!

  • Hussain Ahmed•300
    @hussain-ahmed2
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    .

    What challenges did you encounter, and how did you overcome them?

    .

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

    .

    testimonials-grid

    1
    ijohnst•230
    @ijohnst
    Posted about 1 year ago

    looks good. I'd just make sure to use relative units (REMs or EMs) for your font size instead of px

  • Alexdoom25•20
    @Alexdoom25
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    .I'm having difficulties with the SVG, but I'm close to designing it. Some points are not too good, but it's a great progress.

    What challenges did you encounter, and how did you overcome them?

    Some with the SVG, specially in how to center in the div

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

    The div center

    Blog Preview Card

    1
    ijohnst•230
    @ijohnst
    Posted about 1 year ago

    For the SVG you can use it simply as an image by putting it in an image tag <img src="/assets/images/illustration-article.svg" alt="Whatever you want your alt text to be">

    Then in your CSS make sure that you set the img { max-width: 100%; display:block } this should help with the responsiveness

    Marked as helpful
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