Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
P

Matt Studdert

@mattstuddertMatt
London, UK
13,471Points

Founder of Frontend Mentor. I love helping people learn about web development. When I'm not working on Frontend Mentor, you'll often find me teaching evening and weekend workshops at General Assembly in London.

I’m currently learning...

I'm spending my spare time learning about 3D web development using Three.js at the moment. The 3D web is an area that fascinates me, so I want to know more about it!

Latest Solutions

No solutions submitted

No solutions submitted yet.

Latest Comments

  • Solution screenshot
    • HTML
    • CSS
    • JS

    Galleria | Next and Typescript

    2
    P
    Matt Studdert13,471 | Posted 16 days agocommented on Yazdun's "Galleria slideshow site" solution

    Excellent work on this project, Yazdun! I've never used TypeScript personally, but I just wanted to say nice job. Your project looks fantastic, and it's obvious you've paid great attention to detail.

    I also love the challenge difficulty badge you've created for the README.md file!

    Keep up the incredible work! πŸ‘

    3
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Pomodoro Timer created with the Vanilla JS framework

    7
    P
    Matt Studdert13,471 | Posted 16 days agocommented on Kevin Mason's "Pomodoro app" solution

    Excellent work on this project, Kevin! It looks great and works well!

    My main piece of feedback would be to avoid adding event listeners to non-interactive elements. For example, you're using li elements to switch timers and an img element to open the settings modal.

    Whenever you expect a user to interact with an element, you should use an interactive element (e.g. a' or button`). This will allow people who can't/don't use a mouse or trackpad to use your app.

    As the timer switchers and the settings trigger don't navigate to new pages, I'd recommend using button elements to trigger the actions.

    It's always a good habit to try navigating anything you build while only using your keyboard to see if you can still use the app. If not, it needs refactoring to make it more accessible.

    I hope this helps. Keep up the great work!

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Mobile first Interactive rating component

    2
    P
    Matt Studdert13,471 | Posted 3 months agocommented on Nakoya Wilson's "Interactive rating component" solution

    Brilliant work on this challenge, Nakoya! Your HTML looks great, and you've done an excellent job getting the solution close to the design. My only small suggestion would be to add focus states so that the label has an outline when the corresponding input is focused. You can do that with the sibling CSS selector like this input:focus + label. The visual state changes if you use the arrow keys when on the radio inputs, but you'll notice if you tab through the page, there's no initial style to provide a visual cue.

    I hope that helps. Keep up the incredible work! πŸ‘

    0
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Browse videos app - React, SCSS

    3
    P
    Matt Studdert13,471 | Posted 3 months agocommented on Benja.min's "Entertainment web app" solution

    Excellent work on this challenge! You've hit the nail on the head with the design comparison. I like the subtle animations you've added as well. Here are a couple of small pieces of feedback:

    • If you scroll down on a page and then navigate to a new one, the screen remains halfway down the page. I'd expect it to pop up to the top when navigating to a new page.
    • The items are duplicated between the Movies and TV Series sections on the Bookmarks page. So there are movies showing in the TV series section and vice versa. You could use .filter() instead of map to return only the items of a given category.

    Amazing work overall. Keep it up! πŸ‘

    2
  • Solution screenshot
    • HTML
    • CSS

    Equalizer Responsive Landing Page

    6
    P
    Matt Studdert13,471 | Posted 3 months agocommented on Angelo Barbarulo's "Equalizer landing page" solution

    Hey Angelo! Excellent work on this challenge! It's great that you've made such an effort on the responsive side. You have quite a few instances where you're setting specific heights, widths, margins, and other values to position elements. This seems to be what's contributing to most of your repetitive code.

    I'd recommend checking out Every Layout, which is an excellent resource to help shift layout decisions onto the browser instead of manually overriding your own code and fixing positions.

    If you find yourself writing code like margin-left: 13%; and top: -410px;, it's usually a sign that there's a better way to do it. These are what developers call "magic numbers" as they're pretty arbitrary and are essentially plucked from thin air.

    You'll find yourself using them less and less as you continue to gain experience building projects. So, for now, it's mostly a case of being aware of it and then trying to find more reusable solutions whenever it happens again.

    I hope this helps! πŸ™‚

    P.S. Please try to avoid swearing in your messages as it goes against our community guidelines. You can edit your message by going to "Visit challenge hub" at the top of this page and updating your solution. Thanks! πŸ‘

    2