Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
18
Comments
16
P

Matthew

@MattJM1007United States360 points

I am a web developer starting my journey with frontend coding and working towards learning full stack. I enjoy building things and problem solving!

Latest solutions

  • Base Apperal Project with only HTML/CSS form validation


    P
    Matthew•360
    Submitted 3 days ago

    I would like with the semantics and accessibility of my html. What is the best way to handle the visibility of the error messages? Do I need aria labels for that?


    0 comments
  • Frontend Quiz App using JQuerry

    #jquery

    P
    Matthew•360
    Submitted 4 months ago

    Any feedback welcome on the structure of the code or anything I can do better!


    0 comments
  • Password Generator App


    P
    Matthew•360
    Submitted 4 months ago

    I would like to know if my javascript code could be shortened or condense (if it even should be). It certainly works and gets the job done but wondering if it can be written a little more efficiently.


    1 comment
  • Tip Calculator with Semantic HTML, Flexbox, Javascript


    P
    Matthew•360
    Submitted 4 months ago

    any and all feedback welcome. If there is ways I can refactor or cut down code and combine things, will still maintaining readability, I am open to suggestions!


    1 comment
  • Time Tracking Dashboard with Semantic HTML, Flexbox, Grid, Json Data


    P
    Matthew•360
    Submitted 5 months ago

    Any feedback is welcome or tips on how to position elements is great. Thanks!


    1 comment
  • Newsletter Sign Up with Javascript Validation


    P
    Matthew•360
    Submitted 5 months ago

    any feedback on the code or what can be done better is welcome :)


    2 comments
View more solutions

Latest comments

  • P
    Melbita•100
    @Melbita
    Submitted 3 months ago
    What specific areas of your project would you like help with?

    The overlay I'm using in the hover state, for some reason is covering a couple more of pixels than the image, Can anyone spot the issue?

    NFT card challenge

    1
    P
    Matthew•360
    @MattJM1007
    Posted 3 months ago

    Hi Melbita! I've come across this in my own projects. I'm not sure the exact reason this happens, I think it has something to do with there being a space for text under the image. But adding a line-height: 0; to your .card_image class gets rid of that extra space below the image when the overlay is on.

    Hope this helps :)

  • tommy flinch•110
    @tflinch
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud i was able to closely mirror the challenge

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

    Biggest challenge was learning grid. I went to my trusty cheat sheet to learn how to align child elements.

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

    I need help learning grid. I wasnt sure to align my first and third card.

    .card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            background: white;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 250px;
            min-height: 200px;
            border-top: 4px solid transparent;
    
            img {
                align-self: self-end;
            }
        }
     .card:nth-child(1) {
            grid-column: 2 / 3;
            grid-row: 1;
            align-self: center;
        }
    
    
        .card:nth-child(2) {
            grid-column: 1;
            grid-row: 2;
        }
    
        .card:nth-child(3) {
            grid-column: 2;
            grid-row: 2;
        }
    
    

    four-card-feature-section-master

    #pure-css
    2
    P
    Matthew•360
    @MattJM1007
    Posted 3 months ago

    Hi Tommy! Great job working through this project! I'd like to help with your grid question.

    In regards to placing the items in the same way as the design, I would make the grid to be 4 rows, instead of 2. This way you can position the items in a staggered way as in the design. I edited your code to add more rows and adjust where each card starts:

    .hero {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 20px;
            justify-content: center;
            align-items: center;
            padding: 40px;
            padding-inline-start: 150px;
    
            @media(width < 760px) {
                display: flex;
                flex-direction: column;
            }
    
    .card:nth-child(1) {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
            align-self: center;
        }
    
    
        .card:nth-child(2) {
            grid-column: 1;
            grid-row: 1 / 3;
        }
    
        .card:nth-child(3) {
            grid-column: 2;
            grid-row: 1 / 4;
        }
    
        .card:nth-child(4) {
            grid-column: 3;
            grid-row: 1 / 3;
        }
    

    Hope this helps!

  • P
    Flávio Júnior•180
    @flavin-jr
    Submitted 4 months ago

    Responsive Frontend Quiz App with jquery and sass

    #jquery#sass/scss
    1
    P
    Matthew•360
    @MattJM1007
    Posted 4 months ago

    Overall great job! I like it. One note is that your error icons when submitting an answer is not working

  • P
    nashrulmalik•900
    @nashrulmalik
    Submitted 4 months ago

    Vanilla JS Password Generator

    1
    P
    Matthew•360
    @MattJM1007
    Posted 4 months ago

    Really great job! I wasn't sure how to add the JS logic to account for how long the password is to determine strength. But I see you did it. Well done!

  • Stypian•480
    @Stypian
    Submitted 8 months ago

    Tip calculator app

    1
    P
    Matthew•360
    @MattJM1007
    Posted 4 months ago

    wow really great job! looks like you really nailed this one!

  • MolinaEf•330
    @MolinaEf
    Submitted 5 months ago

    fetch, grid, flex

    1
    P
    Matthew•360
    @MattJM1007
    Posted 5 months ago

    Really great job! I like that your javascript is very short and simple. My one suggestion would maybe to have the data load when the page loads, as right now it is just empty. Otherwise fantastic work!

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