We chat with Matt Studdert, founder of Frontend Mentor, an online learning platform that teaches programming through a series of challenges. The platform's goal is to get students familiar with skills they can use on the job by having them build web apps and go through code reviews. Matt also walks us through what he's been working on recently, from React to Tailwind to Three.JS.
You can check out Frontend Mentor here. Try a few challenges or join their Slack, where thousands of students are chatting about how they are approaching the projects.
You can follow Matt on Twitter here. If you want to read about how he made the jump from personal trainer to web developer, he did a nice interview with Indie London.
Our lifeboat of the week goes to Banex for answering the question: why do we use NULL in strtok()?
Matt Studdert So we've Tailwind if it very much takes out the tricky decision of like how to name things in CSS. So we've all gone down the route of different naming conventions and figuring out like how we can name the different classes and write kind of more scalable code. And with tailwind, it's like a utility first CSS framework. So it just means that there's a bunch of classes that already exist, they do very, very specific things. So whether that's changing your margin, or padding, or border radius, or color or anything like that, and then you just add it to HTML. And with the HTML, you end up with a lot of classes on your HTML. So it's one of those things that is a little bit of an eyesore at the beginning. But then once you've actually worked with it, the kind of decisions that it takes off your plate, it just means that you can actually kind of get quite productive with writing very nice, like HTML, CSS, and building very nice interfaces very, very quickly. That sounds like a design system for the internet.
Ben Popper So if you're listening to the podcast, you probably work in software, or know someone who does, they can now check out Stack Overflow for Teams. That's a private internal instance of Stack Overflow just for your company or organization, your group of friends learning to code, you can share questions and answers build up a great database knowledge that makes it easier for people to solve their own problems. You just search, find a solution, leave an answer. That way, everybody in your Stack Overflow for Teams instance, can collaborate remotely. And asynchronously, you get up to 50 seats for free forever. So you can try it out. See if you'd like it, head on over to stackoverflow.blog/teams, and tell them the podcast folks sent ya.
BP Hello, everybody. Welcome to the Stack Overflow Podcast, a place to talk about all things, software development, programming, technology. And I mean, whatever is fun, whatever is on your plate this morning, or this evening. I'm Ben Popper, Director of Content here at Stack Overflow. And I'm joined as always by Sara Chipps, the Director of Community here at Stack Overflow. Hi Sara.
Sara Chipps Hey Ben, how's it going? How is the beginning of your week?
BP It's good. Sara, Have you heard of sleep minting? Did you read about this debacle?
SC No, what is sleep minting? I'm so interested.
BP So I know you love the NFT's and they're supposed to be unique and signed on the blockchain or whatever. But somebody figured out how to secretly make a copy, put it in your wallet and then send it back to themselves. So yeah.
SC Nooo! Oh no. Do you think someone has another version of my deadmau5 NFT? That would be a true nightmare. [Ben laughs]
BP Considering 99% of your personal wealth is tied up to that, it would be, it would be hard to accept. [Sara laughs]
SC Yeah, it wouldn't be good.
BP So today on the podcast, we have a great guest. Matt Studdert, the founder of Frontend Mentor. Hi, Matt. Welcome.
MS Hi, Ben. Hi, Sara. Really excited to be on. Thank you for inviting me.
SC Thanks for coming. I'm so excited to find out more about what you're doing. But first, I have to ask. So you were a personal trainer before you started coding. Is that correct?
MS Yeah, that is exactly correct. Yeah, I didn't touch a line of code until I was 28 years old. So my career started. As a personal trainer. I did Sport Science at university. And I was back in my hometown Cambridge in England. I've set up my own personal training business where I was like a mobile personal trainer. So it'd be me and my car kind of driving to people's homes, meeting people in parks and working out and everything. And yeah, I loved it. But then I kind of had this niggly feeling in the back of my head, there wasn't the exact right thing for me. I still love a pizza and a beer every now and then. So was starting to think maybe personal training wasn't the exact right thing for me. So I started to think of other things and then came across coding. And it was one of those like, Where have you been all of my life moments when I first touched the line of code? Yeah.
BP Sweet. What was the first thing you touched? What's the introduction that made it happen?
MS There was actually like, I was having ideas. When I realized that personal training wasn't the right thing for me. I was having ideas and it was always online businesses. So I started to do a bit of self teaching online. First thing I touched was Ruby and Ruby on Rails. There was lynda.com was my first that kind of Route into coding, and then a bit of YouTube and then I very quickly found out about boot camp code. General Assembly was very well known company now and they had a General Assembly kind of full time boot camp ready to go in like a month's time. And so I decided to sign up for that. And, yeah, took that three month boot camp and then became a professional developer, which was incredible.
SC That's great. I'm always interested in people that start in different careers through coding, because one thing I've observed is some really good either techniques or ideas or concepts from their original career kind of adds to the dimension of who they are as a coder. What do you think anything that you learned during personal training or having your own business? And that way, like, helps you as a coder today?
MS Yeah, for sure. Like I yeah, I think it's a good thing that I've had that background as a personal trainer, a completely different career, nothing related to coding whatsoever, I see it as a benefit. And for me, it was being able to talk to people like with personal training, obviously, it's a very personal thing, you're talking to clients, you're getting to know them, you're getting to know their lives, you're really starting to coach them as well. And that, for me, it developed a love for teaching people and for helping kind of guide people. And also, they got me kind of comfortable, I'm still not that comfortable, like in front of a large audience or anything like that. But it got me comfortable explaining concepts and teaching people and talking. So that definitely helps in my development side of things. Because when I did become a professional developer, I was more than happy talking in front of clients and doing presentations and all of this kind of thing. So it's like more of the the soft skills that I picked up from the personal training that then really helped me later down the line, as a developer as well.
BP This is what I need. I sent out a call once for people to maybe tutor me and get me over the hump, move me forward as a developer. A few people said they would and I tell them, 'Look, you've got to yell at me. I want to be frightened and bullied into doing this. Don't let me slack.' And nobody followed through! They didn't follow I need like, the mean, personal trainer approach, you know, where they just come in and just yeah, you know, like, the worst Peloton instructor you can imagine.
MS Accountability week in week out. Yeah.
SC Well, it sounds like that's kind of what you're doing with your network. What can you tell us about Frontend Mentors? And what that's like, maybe, maybe then can be a new mentee.
BP Maybe I should sign up? Yeah.
MS Yeah, sure. So Frontend Mentor, it's a platform that helps you improve your front end coding skills, but by building real projects, so we assume that you've picked up knowledge from elsewhere like on one of the other many amazing learning platforms out there. And what we do, instead of teaching you the concepts is we just provide professional designs. So we've got free challenges. So I think we've got nearly 70 challenges on the site altogether now. And we've got free challenges which come with mobile design, desktop design, and JPEG version of the design. But then we've also got a subscription, like a Pro version, where you get access to the original design files, like the sketch or the figma version of the design. And you also get access to our premium challenges, which are multi page websites, full on kind of web applications, and they make just incredible portfolio pieces to help you get a job. But then we've also, there's very much a collaborative learning community. So there's over 130,000 people on the platform now, actually, and it's growing, growing amazingly, like month over month, which is, which is just an incredible position to be in. And when you post your solution. So when you take a challenge, and you post your solution on the platform, you can ask questions to the community as well. So you could say like, 'this is my first time using SAS, for instance. And I'm not sure if I've got the file architecture quite right. Does anyone know any good file architectures that you can have for building a scalable project?' and this kind of thing and then just anyone from the community can pitch in and help you out, help answer your questions and things like that, and help you improve from project to project.
BP And so how do you think people hear about this? Is it word of mouth? Do you advertise? Do you get people through, you know, like, right, like maybe boot camps and things like that, where they want to level up? How do people find their way into this program?
MS Yeah, so it's a it's a mixture. And it's very much like a, it's just a self taught, self driven thing. So you like self paced, you can just take these challenges in your own time, and then post your solutions. And when people post their solutions, the biggest thing is that we make it very easy for people to share their solutions like on Twitter and LinkedIn and places like that. And so a lot of people will actually find out about front end mentor through other people sharing their solutions, and they'll be like, Oh, that's a cool design. Like that looks like a cool little project to build. I'm gonna give it a go. I'm gonna sign up and, and try that. We've also got a number of incredible YouTubers who kind of stream themselves taking the fundamental challenges. So we've had people like Jessica Chan and Florin Pop and Kevin Pao, like taking our challenges and streaming themselves doing it. And that's just an incredible way for people to find out about Frontend Mentor but then also get to see like the thought process that goes into like a professional developer and how they would take a design, break it down, plan it out, and then actually implement it and build it.
SC That's so cool. I've been thinking a lot about how the front end, how different the role of the front end developer has gotten, you know, if you went back 10 years and said front end developer, you would be talking about someone that was just doing HTML and CSS. And now there's so many dimensions to it with so many different frameworks. And you know, whether it's CSS frameworks or JavaScript frameworks, or you know, you need to be a professional JavaScript router in order to be a good front end developer these days. What kind of trends Do you see now, when people are working on these projects? Does everyone kind of use the same frameworks? Do you see like a lot of interpretive stuff?
MS Well, I mean, you, we have five different levels of challenges. So we go from kind of newbie, to junior to intermediate to advanced to guru. And so in the in the very beginning, like the earliest ones, is very much HTML, CSS, you see quite a lot of bootstrap in the in the early ones as well. And but then as you start to get kind of one to intermediate ones, and we've got the advanced in the guru ones. We've got, like, API's that you work with and stuff. And so there's tons of React is the biggest one, and then View as well. But then there's also lately there's been loads and loads of people taking challenges using Tailwind as well. And this was definitely Yeah, and this is one of the things I wanted with the with the challenges is to not impose any decisions on like technological choices. So it's very much each challenge is designed led, there are no rules as to what tools you can use. If you want to practice Tailwind. You practice Tailwind, if you want to practice using like CSS Grid, and Flexbox. And you can use those and just use Vanilla, or you can use it to play around with some new frameworks or something like that, that you've not played around with yet.
BP For those of us who don't know, what's interesting about Tailwind, why do you think people are choosing that? What does it offer especially for you know, people who are just learning on their on their learning journey still.
MS So with Tailwind it, it very much takes out the tricky decision of like how to name things in CSS. So we've all gone down the route of different naming conventions and figuring out like how we can name the different classes and write kind of more scalable code. And with tailwind, it's like a utility first CSS framework. So it just means that there's a bunch of classes that already exist, they do very, very specific things. So whether that's changing your margin, or padding, or border radius, or color or anything like that. And then you just add it to your HTML. And with the HTML, you end up with a lot of classes on your HTML. So it's one of those things that is a little bit of an eyesore at the beginning. But then once you've actually worked with it, the kind of decisions that it takes off your plate, it just means that you can actually kind of get quite productive with writing very nice, like HTML, CSS, and building very nice interfaces very, very quickly.
SC That sounds like a design system for the internet.
MS Essentially. Yeah. [Ben & Matt laugh]
BP Yeah. Sara, you should work in branding.
SC Yeah, there we go!
BP I like that. Do you think that front end is especially appealing to watch in that live streaming format? Or do you think like, kind of all coding is interesting? I mean, maybe everything where it's like, here's how you do it. Here's how I do it is interesting for somebody to watch, I was watching a Tik Toker, the other day, it's like, I'm a truck driver. Here's how I like unload my cab, here's how I like clear out my air events. Here's how I wash out my truck. And you know, this guy has hundreds of 1000s of hours on Tik Tok is kind of like, whatever the job is, somebody might find the process. Interesting. But I guess back to the original question, do you think there's something unique about front end, maybe the fact that it's so visual, and you can see the changes, makes it great for you know, that kind of live streaming mode, or you think maybe all coding is moving in that direction? Where similar to games, people are like, well, if this is something that I might be into, I kind of want to watch people go through the process?
MS Yeah, for sure. I definitely think that it lends itself like the front end side of things does really lend itself well to streaming and this kind of platform as well. Because, exactly, as you said, it's like the visual side of it. And you can see this thing just growing in front of your eyes. And you can really see the experimentation and problem solving that's going on as your CSS like one elements over here, we've all had it where it's over here, and you want it to be over there, and you're not quite sure how to get it over there. And it definitely lends itself to it. But that's definitely not to say that, like back end coding, or just problem solving. I mean, I know Florin Pop one of these YouTubers who has done some Frontend Mentor challenges. He's, he's like, gone through the whole Free Code Camp curriculum, like live streamed himself going through the whole Free Code Camp curriculum. And he does like code wars, catters and all of this kind of thing. So I think any way that you can watch a developer or watch someone in your profession who's like 2, 3, 4, or 5 steps further ahead than you any way that you can actually see them doing real life tasks, and probably from solving and breaking them things down and breaking concepts down in their mind and explaining their process is just massively beneficial. So yeah, I think I think it could work for everything much beyond front end development as well, for sure.
BP Yeah, Sara, that reminds me of what you just said about like you stress and kind of the pleasure of watching somebody solve a problem and knowing they're going to get to the solution, right. That's kind of one of the fun things maybe about software development is like that idea of like, there's something here that I just need to unlock. And there's a couple of different possible solutions, right.
SC Yeah. And seeing how other people think is really great.
BP Yeah, exactly.
MS Yeah, I love it.
SC So what's in the future for Frontend mentorship? What are you working on?
MS So for, for Frontend Mentor at the moment, like, there's more stuff that we want to do with the like the subscription and just the regular free stuff we want to build out. Like when you submit your solution at the moment, we do HTML validation, checking, accessibility audit on your code. But then we also want to want to build it out so that the, like, automated reporting is much more comprehensive. So things like CSS statistics, so you can see like specificity graphs, and all of this kind of stuff. And also, we're going to build out on the subscription side, like suggested improvements. So things like, I don't know, if you're using multiple h1s, or something like that, we'll be able to say like, actually, you should probably you should only use one h1. And then you can use like more than one, h2 to h6 or anything like that. Or if you're using maxwidth media queries, they'll be like, Oh, actually, you might want to use minwidth media queries, because it's better for mobile users, because they're not loading in as many resources. And so kind of building out like the automated feedback side of it is going to be a big one. But then also, in the future, like, we really want to build it into a platform to help our community find jobs as well, like we truly believe, I truly believe that your front end mental profile could be just as important for getting hired as your Stack Overflow profile profile or your GitHub profile, as well, because like on your Frontend Mentor profile, you'll have all of your solutions to the projects that you've been working on. But then you also got all of the comments that you've been giving to other people. So all of the code reviews that you've been giving. So your Frontend Mentor profile can be a great place for recruiters to come to actually get to know you, as a developer, get to know your knowledge and all of this kind of stuff. So we'll be building out more of the business side as well.
BP Very cool. Now we know we have to crush you before you if we are going to be competing with you. Just kidding. [Matt laughs] So Matt, like it seems to me like a you know, you I can see you get excited, I can feel the energy, you know, talking about some of the little nuances of you know, front end stuff and what might help on mobile or accessibility. Where do you go to learn? Like, what resources are you drawing in these days as you're trying to keep current, you know, with some of the best practices or new new possibilities that are opening up?
MS Yeah, sure. So I at the moment, I'm kind of working through Epic React, which is Kent C. Dodds new React course. And that's like, that's incredible. That's an absolutely brilliant course that I worked through. I'm also just bought a three.js journey, which is like going through three.js like, 3d rendering in the browser is something that I have not worked with at all. And three.js journey is this brilliant new course that goes through that. And it's one that I'm focusing more on Epic React dev at the moment, that's like taking up most of my learning time. But then three.js journey is kind of the next next in line for that. And it's very much kind of buying courses from some of these, like top developers in different domains. Those are the ways that I learned mostly, I'm very much a tutorial, like taking a tutorial, and then build projects, and actually, like, put those practices that I've learned into the real world and testing myself out with them.
SC That's great. So you learn along with everyone else?
MS Yeah. Oh, yeah, for sure. Like, and I give, I try and give feedback as much as possible on the platform as well. And you can, there's so much you can learn just by giving feedback to others by reading people's code and seeing how they implement things. And then trying to give them feedback and actually articulating your thoughts in a way that's constructive. And you're not trying to, you're trying to be positive and constructive as possible and just provide as much help as you can. So by giving feedback to other people on the platform, I'm learning a bunch of myself as well.
SC That's great.
[MUSIC]
BP Alright, everybody, it is that time of the episode, I'm going to shout out a lifeboat badge winner, somebody who helped a question with a negative score, get up to a score of 20 or more and spread some knowledge around the Stack Overflow platform. Today, it goes to Banex. awarded April 21. 'why do we use NULL in strtok()?' Why don't we use null in strtok? Well, you have to check the show notes to find out. I am Ben Popper, Director of Content here at Stack Overflow. You can always find me on Twitter @BenPopper. And you can always email us podcast@stackoverflow.com.
SC And I'm Sara Chipps, Director of Community here at Stack Overflow. And you can find me @SaraJo on GitHub. Matt, who are you? And where can we find you on the internet if you want to be found?
MS So I am Matt Studdert. And you can find me on Twitter. My handle there is @_ MattStuddert and you spell my name S T U D D E R T.
BP Terrific and if people want to hop from here and check out Frontend Mentor, where should they go?
MS Yeah, so we're Frontend Mentor. Frontendmentor.io is the place to go to check out Frontend Mentor and on Twitter, we are just @frontendmentor.
BP Fabulous.
SC Great.
BP Well, thanks again for coming on. And yeah, I expect you to come to my house tomorrow with the screaming and the shouting. Otherwise, I'm not gonna learn anything. [Matt laughs]
MS I can give you a recording if you want, you can just play it over and over again.
[OUTRO MUSIC]