P

Matt Studdert

@mattstuddertMatt
London, UK
13,241Points

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

    Visual studio code, Grid, keydown, click.

    3
    P
    Matt Studdert13,241 | Posted 2 days agocommented on Khaled's "Calculator app" solution

    Hey Khaled, nice work. The main thing I'd recommend working on with this project would be to make it accessible. At the moment, you're using div elements instead of buttons for the keys. div elements aren't interactive and so can't be accessed by people not using a mouse/trackpad to click on the keys. Always be sure to use interactive elements if you expect the user to interact with the page.

    Also, you're not using any of the technologies you've added as tags. I'd recommend removing the tags so that they match up with what you've used to build the project.

    Keep it up!

    0
    • HTML
    • CSS

    Responsive 3 column card components

    2
    P
    Matt Studdert13,241 | Posted 10 days agocommented on Vivian Tang's "3-column preview card component" solution

    Hey Vivian! Congrats on submitting your first solution! I've just taken a look at your code. Here are a few suggestions:

    • I'd recommend reviewing HTML semantics for structural elements. You've used a section element for each column, whereas sections are typically used for larger groupings of themed content. For example, I'd expect a single section element to be nested inside the main element, which wraps three div elements that would make up the columns. Here's the MDN article on section elements for more info.
    • 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. Instead, I'd recommend sticking to a single h1. This project is tricky, as all three headings are the same level. Personally, I'd have a visually hidden h1 heading saying some like "Frontend Mentor 3-column preview card component challenge" and then the visible headings would all be h2 headings. You don't need alt text for the icons, as you're just repeating what the headings say. In this instance, I'd leave them blank, e.g. alt="", as this will ensure screen readers skip them. They add no context to the content, so it's OK for screen readers to ignore these.

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

    2
    • HTML
    • CSS

    Responsive order card using CSS

    3
    P
    Matt Studdert13,241 | Posted 10 days agocommented on Niladri Mallik's "Order summary component" solution

    Hey Niladri, it seems the live version of your project hasn't been updated since you made edits to your code. This is why the reporter is still showing duplicate ID errors. If you use the inspector to look at the HTML in your project, you'll see the duplicated anchor tags with the "cancel" ID.

    I'd recommend clicking on the "Learn More" links in the report to try resolving the other issues. Most of them will be cleared up by adding a main element and a h1 for the main heading, which in this instance would be the "Order Summary" heading.

    Also, I'd recommend avoiding 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 this helps! Keep up the good work! 👍

    3
    • HTML
    • CSS
    • JS

    Job listings with filtering using React and Tailwind

    2
    P
    Matt Studdert13,241 | Posted 14 days agocommented on Byron's "Job listings with filtering" solution

    Hey Byron! Fantastic work on this challenge. The filtering is definitely the most challenging part of this project, and you've done an excellent job. Your solution matches the design brilliantly as well, and I can't see any accessibility issues. Keep it up! 👍

    0
    • HTML
    • CSS

    Learning Vue and Maps

    2
    P
    Matt Studdert13,241 | Posted 14 days agocommented on Benja.min's "Art gallery website" solution

    Hey Benjamin! Excellent work on this project. I'm glad to hear you enjoyed it! Your solution looks fantastic, and it's good to see you made the map interactive. I'd recommend reviewing the accessibility and HTML reports and resolving those issues. But you've done a brilliant job overall. Keep up the great work! 👍

    1