Matt Studdert

Pro
@mattstuddertMatt
London, UK
12,766Points

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

    • HTML
    • CSS
    • JS

    Launch Countdown Page using Svelte, SCSS, and Typescript

    1
    P
    Matt Studdert12,766 | Posted 13 days agocommented on Freddy Solis's "Launch countdown timer" solution

    Hey Freddy, awesome work on this challenge! The flip animation you've done is really nice, and your solution matches up nicely with the design. It looks amazing!

    I'd recommend looking into trying to resolve the accessibility and HTML validation report issues. At the moment, you've got a main element nested inside another main element, which is invalid HTML.

    Apart from that, everything looks brilliant. Keep up the great work! πŸ‘

    0
    • HTML
    • CSS
    • JS
    • API

    Responsive github API user search api with dark/light theme switch

    7
    P
    Matt Studdert12,766 | Posted 13 days agocommented on Leon Michalak's "GitHub user search app" solution

    Nice work on this challenge, Leon. You've done an awesome job!! πŸ‘

    Your solution looks great and responds really well to different screen sizes. I'd recommend reviewing the accessibility and HTML validation reports to try to resolve those issues.

    Also, here are a couple more pointers:

    • In my opinion, you're overusing heading elements in this app. I'd say only the name (h1) and the repos, following, and followers (all h2s) are headings in this design. Heading are supposed to provide an outline for the content and act as titles for specific regions. In this design, the name is the main heading for the card, and the others are headings for the stats. None of the other content makes sense as a heading.
    • This is purely semantics, but I'd say a ul would be best for the information at the bottom of the card. It would also help screen reader users by announcing "List item 1 of 4", etc.

    I hope that helps. You've done a brilliant job. Keep up the great work! πŸ‘

    1
    • HTML
    • CSS
    • JS

    Mobile first responsive page using HTML, CSS and vanilla JavaScript

    5
    P
    Matt Studdert12,766 | Posted 28 days agocommented on Nick Carlisi's "Pod request access landing page" solution

    Nice work on this challenge, Nick! I'm glad to hear you found working mobile-first to be a big improvement. I find it a much simpler workflow and find it leads to less code, which is always nice!

    As for the email validation, I'd recommend changing the type attribute on the input to be type="email". You can then listen for when the form is submitted and use the JS Validity State API to check whether it is a valid email pattern or not.

    As for improvements, you can see in the design comparison slider a few small sizing and spacing differences with the design, which could be tackled. But it's nothing major.

    I hope this helps. Let me know if you have any questions! πŸ™‚

    1
    • HTML
    • CSS

    Order summary component - HTML, SASS, FlexBox & Grid

    3
    P
    Matt Studdert12,766 | Posted 28 days agocommented on darryncodes's "Order summary component" solution

    Awesome work on this challenge, Darryn! You mentioned your workflow and how you're speeding up and getting more comfortable, which is awesome.

    Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and benefits from loading in fewer styles for mobile users, which can be a nice performance gain.

    It might be worth trying on a future project to see how you get on. There's a chance it might slow you down in the short term, but I generally find it easier and faster vs working desktop-first.

    Here's a great article I recently read about mobile-first and desktop-first workflows, which you might find useful.

    Keep up the great work! πŸ‘

    1
    • HTML
    • CSS
    • JS

    Invoice App - ReactJS, Styled-Components, Framer Motion, Webpack

    8
    P
    Matt Studdert12,766 | Posted 30 days agocommented on tediko's "Invoice app" solution

    Another awesome solution, tediko. Nice work!! πŸ‘

    It's so clear you pay close attention to the details, and your write-ups are extremely helpful for others to read through. To answer your questions:

    • Using an object inside your theme.js file is fine and is typically the way this would be done using Styled Components. You can still use CSS variables if you prefer, though. One thing I would say is that you could use broader colour names. At the moment, you're duplicating a lot of the colour values. We use names like primaryBlue, accentGreen, etc., in our code.
    • Different people will have different approaches to this. We have a single Heading/index.js file that handles all possible heading styles. I'll send you the code for that file in Slack so you can take a look. It might give you some ideas about alternative approaches.
    • As you can see from above, we use the index.js pattern. We'd also have the Storybook stories and tests in the main component folder, e.g. /Heading. We like that using index.js saves a few characters here and there πŸ˜…

    I hope this helps! Keep up the awesome work! πŸš€

    2