Matt Studdert

Pro
@mattstuddertMatt
London, UK
11,516Points

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!

All Comments

  • Matt Studdert has commented on tediko's "Todo App using Sortable.js, Toasts notifications, Local Storage, Saas." solution

    1

    Hey tediko, nice to see you back on the site posting a new solution! You've done an amazing job on this project and I like the extra details you've added like the animation and message when you remove a todo. It's great to see you adding proper focus states for the interactive elements as well.

    One small thing I noticed while playing around is that if you toggle the checkbox while using your keyboard it doesn't update the todo as either completed or active. I'd recommend having a go at making the whole app work as expected without using a mouse/trackpad.

    Keep up the great work! 👍

  • Matt Studdert has commented on Immanuel Kituku's "3-column card layout using Html and Sass" solution

    0

    Nice work on this challenge, Immanuel, and congrats on submitting your first solution! 🎉

    The issue with your buttons is because you're using :active state selector instead of :hover. You're also changing the width of the border, which is causing a slight jump. While we're on the topic of the buttons, I'd recommend using anchor elements instead. You could imagine if this was a real site that these would link to other pages, so anchor tags make sense here.

    You could also try making it so that the call-to-actions are always pushed to the bottom. The middle one is out of alignment with the others on larger screens as the paragraph content is shorter.

    Keep up the great work!

  • Matt Studdert has commented on Mishu Hishu's "Flexbox and Regular Css" solution

    1

    Congrats on your first submission, Mishu! You've done a good job! Here are some thoughts:

    • You don't need the extra container with the box-shadow around it. You can see in the design comparison how it should look.
    • You could use text-transform: uppercase on the headings to uppercase them like in the design.
    • I'd recommend only ever using a single h1 on a page. For these headings, h2 would be perfect.
    • When it breaks to a single column layout, the elements stretch all the way to the edge of the browser. I'd recommend giving some space, like in the design. You could also break into a single column a bit later.
    • 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 has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.

    I hope these tips help. Let me know if you have any questions!

  • Matt Studdert has commented on Yann's "Flexbox, css, html5" solution

    1

    Congrats on submitting your first solution, Yann! I hope you enjoyed the challenge. Here's some feedback on your solution:

    • You've currently got multiple h1 elements. Although this is valid HTML it's generally still considered a bad practice, as it can cause accessibility issues with the content hierarchy. As this challenge is for a component that would typically be a small part of a larger page I'd say h2 headings would be good options here.
    • You could imagine that the "Learn More" call-to-actions would link through to other pages on a real site. So I'd go with anchor elements here instead of buttons.
    • Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.

    I hope that's helpful. Keep up the great work!

  • Matt Studdert has commented on Natnael's "Social media dash board using grid" solution

    0

    Nice work, Natnael! Congrats on submitting this solution. Here are some thoughts after taking a look at your code:

    • I'd say the solution needs a bit more work to get it looking close to the design. You can see in the design comparison that the boxes are a bit small, and the gaps a quite big vs the design. It would be a great exercise to try refining it to get it matching up more. Attention to detail is a key trait in good front-end developers, so it's good to practice.
    • Your theme toggle uses a click listener on a div to trigger the action. I'd recommend avoiding setting click listeners on non-interactive elements, like the div element. These can't be accessed by anyone not using a mouse/trackpad to navigate the content, which is a bad practice. Instead, add click listeners to interactive elements like a or button. This will ensure the element is focusable and accessible by people not using a mouse/trackpad. As it's a toggle, I'd use a button in this instance.
    • You've left the alt attributes blank for all img elements, so screen reader users won't know what social media platform each stat is for. When you build interfaces, it's essential to think through how all users will consume the content as you could easily create inaccessible interfaces otherwise.

    I hope these tips help! Keep up the great work! 🙂

  • Matt Studdert has commented on ApplePieGiraffe's "Invoice App | React, Next.js, styled-components, Formik, Framer Motion" solution

    5

    Hey APG,

    Congrats on completing your 30th (!!) challenge overall and your 1st Guru level challenge! I'd agree with Em and say this is your best one yet (although you've posted lots of brilliant solutions!) 🎉

    Here are some thoughts related to some of the bugs and issues you mentioned in your README.md:

    • You can use lots of different approaches to structure React applications, as I'm sure you've noticed! On Frontend Mentor, I use an altered version of a domain-driven architecture. This is mostly because we use Redux for state management. If I were starting fresh today, I'd probably go a different route. The way you've structured your code works well for this size project, though. It's easy to navigate, you've separated the components nicely, and you've created good utility functions.
    • I'd agree that using CSS custom properties instead of using Styled Component themes is a better approach. I'm feeling this pain on the Frontend Mentor codebase and will look to refactor at some point!
    • The quick flash of light will most likely come from the fact that the app needs to pull the state from localStorage. So it's partially rendered by the time it can read the state. In a typical app where you're pulling data, this configuration would be stored as a user preference in the database. This means it wouldn't have the flash, as everything would be set during server-side rendering in Next.js. That might not be the issue, but that would be my guess anyway.
    • You're right about the custom dropdown not being accessible. As it is, the focus never goes into the dropdown if navigating by keyboard. This is because you've got display: none; on the input elements. Instead, I'd recommend using a .sr-only class to visually hide the checkboxes and keep them accessible to screen readers. Here's a good article from the A11y Project about visually hiding content to learn more.

    After looking at your code, here are a few recommendations:

    • Now that optional chaining in JS is a thing, you don't need to use the && operator so much. That means this line: filteredInvoices && filteredInvoices.length === 0 could become this filteredInvoices?.length === 0.
    • You're using a div with span elements to display the invoice page's addresses. Instead, you could add more context in the HTML by using the address element. You can read more about the address element on MDN here.
    • You could add the media query breakpoints to your theme. Seeing as they're used throughout the app, this would reduce duplication of values.

    It's awesome to see you adding animations and extra details like the attribution overlay. Your attention to detail is incredible!

    A couple of feature suggestions I'd love to see would be:

    • Try making the form disappear if someone clicks away from it instead of always needing to click the buttons at the bottom.
    • I know this wasn't in the design, but you could remove the "Mark as Paid" button from invoices that have a "Paid" status.

    Overall, you've done an AMAZING job on this challenge! Especially considering you're still new to React and this was your first time using most of these packages.

    Keep up the brilliant work! 🙌

  • Matt Studdert has commented on Helena Plantin's "Penmic Podcasts (css, sass, javascript) a pod request landing page" solution

    0

    Hey Helena,

    Amazing work on this challenge! You've done a really good job and I love the detail you've gone into for your README.md file! 🙌

    Here are some thoughts after taking a look at your code:

    • For the dots and the picture of the guy on the microphone, I'd recommend using background-image in your CSS as opposed to img in your HTML. This is because they're decorative images and don't add any context to the content.
    • You've got accessibility errors on your input elements. This is because you haven't added label elements, so they'll be inaccessible to screen reader users. You could either add a label and then visually hide it or add an aria-label attribute to the input.
    • As you've mentioned in your HTML comments, I'd recommend not duplicating your form code. Instead, use Flexbox to change the order of the elements.
    • Stick with min-width instead of mixing with max-width. min-width media queries and a mobile-first workflow are great because you often end up writing less code. It also loads in fewer lines of CSS for mobile users, which can be a performance benefit.
    • The overall structure looks good!

    I hope those tips help. Keep up the great work! 🙂

  • Matt Studdert has commented on Artur's "Four Card Feature Section HTML SCSS" solution

    1

    Hey Artur,

    Great job on this challenge! Your project is definitely a good representation of the design! Here are a couple of pointers I thought about after looking at your HTML code:

    • You don't have a h1 on this project as it stands. I'd always recommend having a single h1. For this project, it would be where you've got the h2 headings. Except, I'd have it all as a single h1 with span elements inside to differentiate the styles. This means the cards headings would become h2s.
    • For the images, I'd keep the alt value empty. This will make screen readers skip over them. In this instance, that's a good thing, as the alt text is currently repeating the exact text in the card headings and adds no extra context.

    I hope these tips help. Keep up the great work! 🙂

  • Matt Studdert has commented on SAMIR HEMBROM's "Mobile first site" solution

    1

    Hey Samir, nice work on this challenge! You've done an excellent job, and your solution looks very similar to the design! Here are some thoughts after taking a look at your code:

    • You're only using h2 headings in this project. I'd say the top one would be a h1 for this challenge. You could then use span elements inside to style the text differently.
    • You're using br tags after the paragraphs in the cards. You don't need to do this because paragraph elements display block by default.
    • For the images inside the cards, I'd leave the alt values empty. This means screen reader software would skip those images. In this instance, that's a good thing, as you're repeating the same content as each card heading.
    • Your CSS looks good. I'd recommend revising your breakpoint, though. At the moment, you're using min-width: 376px. While it's great that you're using min-width, try looking at your project at 377px or any other mobile screen size up to the tablet ranges. You'll see the content looks very squashed.

    I hope those tips help! Keep up the great work 👍

  • Matt Studdert has commented on Jun Rey Ellezo's "Invoice App using Nextjs Tailwindcss and Mobx" solution

    0

    That was fast!! Amazing work on this challenge, Jun! Your solution looks amazing and functions perfectly based on the brief. The one small thing I noticed was that the layout breaks slightly at 320px in the dev tool emulator on the invoices index. It might be worth playing around with that a bit. That's me being super picky, though! 😅

    How did you get on with the challenge? Did you learn anything new while working through it?

  • Matt Studdert has commented on InduRajput's "Chat App Illustration Master using flex display and positioning" solution

    0

    Nice attempt at this challenge, Indu! That is odd about the screenshot. As it runs on a slightly older version of Firefox at the moment, it seems to be rendering your solution differently. The input is being pushed down because the two radio selection messages above render over two lines in the screenshot. I wouldn't worry too much about it though 🙂

    I'd recommend removing the float property from the repertoire for the most part. Now that we have Flexbox and Grid, floats shouldn't be used for layout purposes anymore.

    Overall you've done a good job, though! The main thing I'd recommend would be to spend some time refining the details a bit to get it matching up closer to the design. Attention to detail is a key part of being a front-end developer, so projects like this are a great way to practice.

    Did you learn anything new while working through this challenge? It's a tricky one!

    Keep up the great work! 👍

  • Matt Studdert has commented on Alex's "SCSS / BEM / VANILLA JS (bonus Lizard,Spock)" solution

    1

    Hey Alex, I think you've done an amazing job! The animations are indeed smooth, as you mentioned, and add a very polished feel to the game. I also like the game switcher you added to the logo.

    My main advice would be to use interactive elements, like the button element, to trigger the actions as opposed to div elements. As it stands, your game is inaccessible to anyone navigating using a keyboard. Ensuring the interfaces we build are accessible to as many people as possible is a key part of a front-end developer's role.

    Keep up the great work. I love what you've done with this challenge! 👍

  • Matt Studdert has commented on Jen's "Todo app | React | styled-components | Drag and Drop" solution

    1

    Great to see you post another project, Jen! How have you been getting on with React so far? It definitely takes on a new level of complexity as you build larger projects!

    You've done an excellent job on this challenge. Your app looks great and functions as expected based on the project brief. Here are some thoughts after taking a look at your code:

    • I'm not a fan of the useViewport() hook. Having a resize listener constantly running on the window isn't something you want to do if it can be avoided. Is there a reason you opted for this approach as opposed to using a media query?
    • In the App.js file, you're defining a saveLocalTodos function and then calling it immediately. As you're calling it straight away, you don't need the definition at all. So you can remove the function and just set the items in the useEffect hook without it being wrapped in anything.
    • Don't only show the delete todo button on hover. As it is, people navigating using a keyboard can't delete todos. I'd recommend trying to navigate and complete tasks using only your keyboard on any projects you build. This will give you a good insight into whether or not your project is navigable by keyboard users.
    • As Steven mentioned, avoid setting height and width properties, except for particular circumstances where you have an obvious reason. Typically, you want the inner content of an element to dictate the dimensions of an element. For example, you've set a height on the todos. Try typing out a really long todo and see what happens. Ideally, you'd want the todo to grow with the content.
    • You've got Main.js and ItemBox.js in their own file, but they're not actually doing anything other than being exported. If you're creating a component, I would recommend trying to keep all concerns for that component locally in the file. I'd recommend reading this "styled-components happy path article by Josh Comeau". It will hopefully give you some more ideas on this. As with anything, keep practising, and you'll develop better habits as you become more experienced with the tool.
    • As Steven mentioned, the idea of React is to componentize code as much as possible to maximise reusability. An example of where you can break down a component further is the Todo.js. This could be broken up into smaller chunks, like the checkbox, text, and delete button.

    I hope this helps. Keep at it and let me know if you have any questions! 🙂

  • Matt Studdert has commented on Lynette Lopez's "Profile Card Component ft. SCSS" solution

    1

    Hey Lynette, excellent work on this challenge! How come you're not happy with the background on mobile? I think you've done a great job!

    Here are a few pointers after taking a look at your code:

    • You're not using any headings elements at the moment. Headings are important for creating a proper content hierarchy. This is especially helpful for screen reader users, as screen readers will use headings to structure the content. I'd recommend adding headings to add this hierarchy. For this design, I'd say the person's name is the h1 and the "Followers", "Likes", "Photos" are the h2 headings.
    • Be sure the use semantic HTML5 structural elements in your projects. As this is just a single component, it's not a huge deal, but you could have it wrapped in a main and a section to add that extra meaning.
    • You've added the pattern at the top of the card as an img in the HTML with an alt attribute for screen reader users. As this image is purely decorative, it would be best to either add it as a background-image in the CSS or leave the alt attribute blank, so that screen readers skip over it.

    I hope you find these tips useful and you enjoyed the challenge. Keep up the great work!

  • Matt Studdert has commented on Emmilie Estabillo's "Dine challenge with React" solution

    2

    Hey Em! You've already got a bunch of detailed and useful feedback, so I'll just say brilliant work! 💯

    As you work with React more, you'll probably move towards making your SCSS files map 1:1 with your components (plus a bunch of global styles). This is a great architecture when working with component-based libraries/frameworks and is essentially why solutions like Styled Components work so well with React.

    Keep up the great work! 🙌

  • Matt Studdert has commented on Christopher Nance's "Mobile First using HTML, CSS & JS" solution

    1

    Great work completing your first premium challenge, Christopher! You've done a brilliant job! It's nice to hear the challenge has changed your thinking as well. I'd love to hear more about what you learned!

    Here are some thoughts after taking a look at your code:

    • The alt text in various images could be improved to help with accessibility. For example, the logo has the alt text of "pod-logo". First off, I'd recommend not adding hyphens unless that's how you would write the text normally. Also, for logos, it's best to simply put the company name. So, in this case, it would be "Pod". The same goes for the podcast platform logos lower down.
    • You don't need the additional label for the submit input. Another way of doing it would be to use a button element instead of input with type="submit".
    • As the dotted pattern is purely decorative, I'd add the image using a pseudo-element and background-image in your CSS. This means you're not adding unnecessary HTML code.
    • Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not suitable for styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.

    I hope these tips help. Keep up the great work! 👍

  • Matt Studdert has commented on Aaron Stroud's "Pomodoro React App" solution

    1

    Excellent work on this challenge, Aaron! You've done an outstanding job of reproducing the design, and I like the extras you've added in, like the sound.

    Using radio inputs to change the timer is fine. You can see that you can navigate them with the direction arrows. I'd add a focus state, as it's not obvious when it's focused when navigating using the keyboard. Another approach would be to have button elements that change the state and, therefore, the timer.

    Different browsers may render colours differently. There's nothing that can be done, so don't worry about it.

    Keep up the brilliant work! 👍

  • Matt Studdert has commented on Diarrah's "PWA made with React and SCSS - Grizzly, Cowboy, Ninja" solution

    0

    Great to see you posting another solution, Diarrah! Love that you've added your own spin on it providing the two different game modes. Also, building it as a PWA and including the animations are excellent touches 🙌

    Your React code looks good, although I'd say it could be broken down a little bit more to "componentise" and separate out your code further. For example, your Battleground.js component is pretty big with quite a bit of logic.

    Also, you're setting the click listeners on div elements, which aren't interactive. This means the game is currently inaccessible to anyone using anything other than a mouse/trackpad to play. Using interactive elements like button as the triggers would be a big improvement 🙂

    I hope you enjoyed the challenge! Did you learn anything new while working through the project?

  • Matt Studdert has commented on Louis Terryn's "Social proof section" solution

    0

    Hey Louis, nice work on this challenge! Don't worry too much about matching up the sizes exactly, especially when working with the JPG design files. Typically, you'd have the design files which show the values in them.

    Here are some thoughts after taking a look at your code:

    • You're loading in Google Fonts 3 separate times at the moment. It would help to remove two of them so that you're only loading it in a single time.
    • As you said, you haven't done the mobile part yet. I'd recommend spending time doing it. I'd also recommend trying to build your future projects mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users when using min-width media queries, which can be a nice performance gain.
    • Avoid using br tags to force line breaks. Instead, let the width of the containing element dictate when the line breaks. This will be especially useful when you make your site responsive.
    • You don't need alt attributes for the stars, as they add no extra context to those individual reviews. Instead, you can leave the value blank, so that screen readers skip over them.
    • You've jumped from a h1 element straight to h3 elements for the people's names in the testimonials. I'd recommend avoiding skipping heading levels unnecessarily. This can cause accessibility issues in the content hierarchy for screen reader users. So for this, the people's names would be h2 elements instead.

    I hope these tips help. Let me know if you have any questions 🙂

  • Matt Studdert has commented on Victoria's "Profile Card using FlexBox" solution

    1

    Hey Victoria, excellent work on this challenge and congrats on submitting your first solution! 🎉

    Here are some thoughts after taking a look at your code:

    • You've added the pattern at the top of the card as an img in the HTML with an alt attribute for screen reader users. As this image is purely decorative, it would be best to either add it as a background-image in the CSS or leave the alt attribute blank, so that screen readers skip over it.
    • Likewise for the profile picture, having the alt text of "Profile picture" doesn't add context. As the person's name, age, and location are directly below the profile picture, you could also leave a blank alt attribute as the image adds no extra context to the written content.
    • It's great to see you using semantic HTML5 structural elements to wrap the content. Nice work!
    • For the h2 elements, I'd actually say the stats aren't the headings, but the "Followers", "Likes", "Photos" content are. One way to make sure screen readers read out the headings first would be to swap the order in the HTML and then use flex-direction: column-reverse; to flip the order to match the design.

    I hope these pointers help. Let me know if you have any questions! 🙂

  • Matt Studdert has commented on Yolanda Ornellas's "Profile card using CSS Flexbox" solution

    0

    Congrats on submitting your first solution, Yolanda! I hope you enjoyed the challenge and learned a lot while working through it!

    Your project is a sound reproduction of the design. I'd recommend having a go at trying to make the circles in the background stay in place all the way down to mobile, like in the designs.

    Here are a few areas I'd recommend reviewing:

    • You've got multiple IDs with the same value. This is invalid HTML, so is not best practice. Instead, it's best to use classes if you want to group elements for styling.
    • Talking about styling. Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not suitable for styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
    • You've got an alt attribute of alt="photo" for the profile picture. The value inside the alt attribute should be a description of the image. If the image adds no extra context to the content, it should be skipped by screen readers. You can do this by leaving the value blank like this alt="". As this is a profile picture, it doesn't add any context to the content, as the person's name and age are directly below it in the HTML. Therefore, I'd recommend leaving it blank.
    • You're not using any headings elements at the moment. Headings are important for creating a proper content hierarchy. This is especially helpful for screen reader users, as screen readers will use headings to structure the content. I'd recommend adding headings to add this hierarchy.
    • I'd recommend getting into the habit of using more descriptive class names than .item1 and .item2. Descriptive class names are great because they can help document your HTML code. For example, .item1 could be called .profile-info, and .item2 could be .profile-stats. These are more descriptive of the areas they are being used to represent.

    I hope you find these tips useful. Let me know if you have any questions and keep up the great work! 🙂