Learn how to validate your startup idea by pre-selling it, for only $80 (includes a free 1-hour consultancy call).
Interview with a Successful Startup Founder

Making $17k/mo While Helping People Get Better at Coding

Matt Studdert
Matt Studdert
July 13, 2021
Category of startup
Education
Country of startup
United Kingdom
Revenue of startups
$10k-$25k/mo
Interview with a Failed Startup Founder

Making $17k/mo While Helping People Get Better at Coding

Matt Studdert
Matt Studdert
July 13, 2021
Category of startup
Education
Country of startup
United Kingdom
Cause of failure of the startup

Matt founded Frontend Mentor, a platform that helps people improve their front-end coding skills by building real projects. Revenue has grown consistently month-over-month since adding a subscription tier in August last year and is sitting at over $17K.

Description

CTA

Hi Matt! Who are you and what are you currently working on?

Hello! I’m Matt Studdert, and I live in London, UK. I’m the founder of Frontend Mentor, a platform that helps people improve their front-end coding skills by building real projects.

Instead of tutorials, we provide our community with professionally designed projects to build. These challenges help our members gain real experience in creating websites and web apps in a realistic workflow.

Frontend Mentor has a freemium business model where people can choose between taking our free challenges or upgrading to our PRO subscription. Our free challenges are typically smaller projects and come with JPG images of the designs. Our PRO subscription gives our members who are more serious about professional development access to the original design file for the free challenges, our premium challenges, plus a few extra features on the platform. 

Our premium challenges are as close to real professional projects as possible. They’re typically multi-page websites or web apps. The design file is included in the project. They have mobile, tablet, and desktop layout designs and a design system for colors, common components, etc. These make incredible showstopper portfolio pieces to help our members get interviews and find their dream job.

What’s your background and how did you come with Frontend Mentor’s idea?

My background is actually in sports, exercise, and nutrition! I played a lot of sports growing up—basketball in particular. When I went to university, I studied Sport & Exercise Science. After uni, I set up a personal training business in my hometown of Cambridge.

I enjoyed running my own business, but personal training wasn’t the right career for me. I enjoyed staying active and eating well, but I realized it wasn’t my passion. I still enjoyed a beer and a pizza a bit too often!

As soon as I had that realization, I knew I needed to find a new path. But all the ideas I was having were for online businesses. I didn’t have the money to spend on getting someone else to build something, so I decided to self-teach.

Back then, Lynda.com was the big platform, so I got stuck in learning Ruby on Rails over there. Very early on, I was watching a YouTube video when I came across a company called General Assembly. They had a 3-month full-time bootcamp based in London where you learn the fundamentals of web development with the view of becoming a professional developer.

After completing the course, I got a job as a front-end developer. After a year or so of being a professional, I came back to GA on a part-time basis (evenings and weekends). I started as a teaching assistant on top of my full-time job. I hadn’t written a line of code until I was 28 years old, so I had a sense that there was some serious ground to make up. Teaching others was a strategy I knew would help move me forward faster while also getting myself back into the GA community, meeting others, and building my confidence as a developer.

Another year on, and I felt ready to start teaching the courses and workshops I had been an assistant for. GA was happy for me to move up to become a part-time lead instructor, and so I started teaching the courses myself!

It was through this teaching experience that the idea for Frontend Mentor came to me. At this point, I had been trying (and failing miserably) to launch a new fitness-related online business. I had been building an app for over half a year and still hadn’t launched anything, validated the idea, or even figured out a route to market. Out of frustration, I challenged myself to ship an unrelated idea in a couple of days. 

The first idea that popped into my head was a front-end resource list for my students! Not original, I know, but it was something that was needed. I constantly shared the same front-end resources with my students, but I had no central resource to point them to. So I decided to create it.

“Frontend Mentor” seemed like a good name, plus the .io domain was available, the person who owned the .com wasn’t using it, and the social handles were all available. So I got to work!

After a couple of days, I had created my resource list and shared it with my network on LinkedIn, my students in General Assembly’s Slack channel, and the various (brand new) Frontend Mentor social channels.

I received a bunch of positive feedback and thank you notes, which gave me a massive boost! It also made me think more about creating stuff for developers.

After thinking more about typical problems my students had, I came up with another idea. A common question my students had when completing our Front-end Web Development 10-week part-time course was, “Where can I go to practice building projects and build up a portfolio?”.

My first piece of advice was to build their projects and build sites for friends. However, they would come back by saying something along the lines of “But I’m no good at design. Anything I make looks amateurish. Where can I go to get designs?”.

My second recommendation was to go to Dribbble, find a design, and build it in code. But many students would come back and say it was hard to find designs to work to, and once they did, the assets weren’t included, so it was hard to recreate the designs.

When I was thinking about other difficulties for my students, my mind jumped to this problem. Why didn’t a website exist that provides developers with professional designs complete with starter code and optimized assets? That would remove so much friction and allow developers to focus on writing code with the additional benefit of creating beautiful-looking projects that would look great in any portfolio.

So this is how Frontend Mentor was born!

How did you go from idea to product?

I started Frontend Mentor as a free offering. I was focused more on helping developers and solving their core needs. I knew there was a chance it could turn into a business in the future, but I didn’t want to rush a business model. At this point, I had quit my full-time job but had increased my hours at GA, so I was earning enough money to keep me afloat.

After the lightbulb moment of creating projects for front-end developers, I spent another day getting a project up on the site. I found a Sketch design on a Sketch resources website, emailing the designer to get permission to use their design in return for a link to their portfolio site. Another LinkedIn article, some Slack messages to my classes, and some social media posts later, I was ready to test my idea!

Sure enough, people started downloading the project, completing the challenge, sharing their solutions, and asking for feedback. This was perfect! After talking to early participants, I knew it was a way of learning people enjoyed. It was also very close to a real-life workflow, so people were gaining hands-on experience coding a project using a design as a reference. 

The next step was to put a few more projects on the site to see if people would complete multiple challenges. They did! At this point, I had validated a few things:

  1. Given a design and a project spec, people would try to build the project to practice writing front-end code.
  2. Once they finished their project, they’d often share their solution with their network to try and get feedback.
  3. People enjoyed the process, found it rewarding to build the projects, and were incredibly proud of their creations.

Not only had I validated some key hypotheses, but I also realized that this was the perfect project for me to build. I loved everything about the idea, and I could see myself working on it for years to come.

As you can see from this Wayback Machine snapshot from June 2018, the visual side of the site needed some work (oh, the irony!). Luckily, I’ve got a good friend who’s a brilliant designer, and he offered to pull together some simple branding and initial template designs as a favor. After a day’s work together, we had the Frontend Mentor brand and some designs ready!

I went down my usual channels for the launch of the new-look site, plus I published articles on dev.to and Hackernoon, and a Show HN on Hacker News.

With this launch, I also started up a Slack community. This was initially to provide a place for people to get help on projects and share their solutions. But I realized as the community grew that it was so much more than that. People were building friendships, collaborating on projects, giving feedback on the site, plus loads of other things. It was (and still is!) a great place to hang out!

At this point, the site was just a static site using the WordPress API. There was no logging in, submitting projects, and getting feedback yet. My goal was to build incrementally to increase my chances of making the right decisions. The Slack community became my research group! Every day, talking to community members gave me a clear view of exactly what we needed for the first version of the web app.

I’m a front-end developer by trade but can pull together a (very sketchy!) Node.js API. Before my evening teaching work at General Assembly, I’d often arrive early and set up shop in the communal area to get some coding done. I knew the GA staff well after years of teaching there part-time. One day, Mike, an instructor, sat down, and as we were chatting, he asked me what I was working on. I showed him Frontend Mentor, and he liked the idea so much he offered to help me out on it! I wasn’t actively looking for a co-founder, but Mike is a brilliant back-end developer, so our skills matched perfectly, and we get along really well, so we gave it a go. 

He started working on it casually at first. After a few months, we were comfortable that we worked well together. So we decided to make it more formal, using the Slicing Pie method to start dividing equity while the business wasn’t making any money.

We chose not to publicize the launch of the web app externally to help keep everything manageable. Instead, we focused on community feedback to build the right platform with the right features.

At this point, we still hadn’t settled on a business model. We wanted to find one that was the right fit for ourselves and the community. Lots of people were asking for 1:1 mentorship and the ability to see an “official” solution. We didn’t want to build a mentorship marketplace, so that was a no-go. We also didn’t want to provide official solutions, as this could become a crutch for the community and would reduce the likelihood people would review each other’s code.

We often received requests for the Sketch/PSD (Figma wasn’t that big back then) of the designs, seeing as we only provided JPGs in the challenges. This seemed like the perfect opportunity for an optional add-on. We quickly uploaded the design files to Dropbox and used Buy Me a Coffee to test the idea. Sure enough, some people started buying the designs...our first internet money!!

Another request that started coming in was for more comprehensive challenges. People wanted showstopper portfolio projects to show hiring managers and help them get hired. So we tested “premium” challenges. These projects would be the closest thing you could get to a real-world project without actually being a professional developer. We launched one at first, and it started selling!

Frontend Mentor Landing Page

Everything was single-purchase items to this point. So we decided to roll it all into a subscription and added some extra “PRO” features to the platform, like private solutions. 

But before we could do that, we needed to “launch” the site more publicly. We knew people liked the concept, and we were on the road to a viable business. So it was time to push the site out to more people.

A year after putting the beta web app live, we “launched” on Product Hunt. That may seem like a long time, but it was by design. A big mistake I’ve seen repeatedly happen on PH is people launching before they have an audience or a community. I was determined not to get over-excited about the PH launch and rush it before we had a solid foundation. The PH launch was a weird one. The UK had just gone into lockdown a week or so earlier, so I felt uncomfortable being overly salesy and promotional trying to promote Frontend Mentor. I nearly pulled the launch entirely but decided if I did, we might never launch, so it went ahead. We managed to earn 3rd place on a pretty competitive day, receiving lots of great feedback and publicity, which I counted as a win!

Not long after that, Frontend Mentor started getting picked up in web development newsletters and even appeared in a CSS Tricks article written by Chris Coyier (front-end legend) himself!

A few months later and we were ready to launch the PRO subscription. The community was excited, and we had some lifetime early bird offers for the first 500 subscribers. We managed to sell nearly $10K worth of subscriptions within the first few days, with a steady flow of subscriptions coming in after the initial splash. So we knew we had created something the community wanted.

If I could have my time again, one major thing I’d do better is to move faster. I was too slow (I like to call it methodical, but who am I kidding?) validating the business model and launching the subscription. Realistically, we could have had a PRO subscription with design files and premium challenges up and running within months!


Which were your marketing strategies to grow your business?

Beyond the articles I mentioned above, I haven’t pro-actively done a huge amount of marketing. Most of our growth has come from word-of-mouth, with people recommending Frontend Mentor to others and sharing their solutions.

One thing I noticed was that some people were streaming themselves taking our challenges. In some instances, they had pretty big audiences! So over time, I’ve built great relationships with some streamers. It’s perfect because they get brilliant content that they can create for their audience, their audience learns a ton, and Frontend Mentor gets excellent publicity. So it works well for everyone!

Marketing is something I’m determined to get better at, though. There will be many incredible products out there that have died due to a lack of marketing savvy. I don’t want Frontend Mentor to be one of them!

How are you doing today and what are your goals for the future?

Frontend Mentor is on a great path at the moment. Revenue has grown consistently month-over-month since we launched our subscription in August last year. Revenue last month was just over $17K, which now means Mike has also come on board full-time (I made the jump in January when we were at $6K).

With our expenses, contractors, and salaries, we’re break-even at this point, but hopefully, revenue will stay on the same trajectory, and we can grow further!

We’re very clear on our goals for Frontend Mentor. We want to run the company as a calm, sustainable business that allows for a well-rounded, comfortable lifestyle for anyone who works within it. We are entirely opposed to the hustle culture message. We believe firmly that through processes, scalable solutions, and a clear vision, we can grow without sacrificing the team’s physical and mental health.

We’re looking at companies like Gumroad and Buffer as models of the type of business we’d like to run. We want to build a house that we want to live in!

Our next move on the business side will be to find ways to help connect companies with our incredible community of talented developers. We have an abundance of skilled developers from all over the world in our community, many of whom are looking for jobs. 

This is what I think will unlock the full potential of the platform. People’s Frontend Mentor profiles will become the perfect place for people to show off their skills building projects and display their knowledge by giving feedback on other people’s solutions. My goal is for a developer’s Frontend Mentor profile to be just as important as their GitHub or Stack Overflow profile when looking for work.


Since starting Frontend Mentor, what have been your main lessons?

Although I said earlier I would have moved faster if I could have my time again, an important lesson has been not to rush things. New ideas pop into my head daily. One thing I’ve learned is not to be too impulsive.

I could have easily taken Frontend Mentor in a completely different direction that may well have killed it completely by now. If you have an idea, sit on it for a bit. Take the time to talk to users (or potential users) about it and see if it keeps coming back to you. Good ideas always find a way of staying on your mind. I’ve had many nights where I can’t sleep because I’m thinking through all the ramifications of a potential new idea. If that starts often happening with an idea, it’s probably time to start building it!

Also, be clear about why you’re creating your business. For us, it’s not all about growth and money. I genuinely believe that there’s a different way to run a business than the usual pressure cooker, growth at all costs approach. That’s not what we want for our lives. So why lie to ourselves and try to build a business in that way?

Our goal for Frontend Mentor is to build a calm, sustainable business that is a pleasure to work in. If we’re lucky enough to grow a team, we plan to create a healthy work environment where everyone is treated with respect and trusted to do the work they were hired to do. It amazes me how many companies still treat their employees like children, forcing specific work hours and micro-managing every part of their role.

I’ve read some books over the past couple of years that have shaped my thinking, and I’d recommend to anyone looking to build a calm company:

 We’ll see what happens as the business grows, but it will be fun experimenting with different ways of working and finding what feels right for us!

What were the biggest obstacles you overcame? What were your worst mistakes?

The biggest obstacle we’ve had to overcome is time and resources (which is much the same for anyone starting!). It was only January this year that I went full-time on Frontend Mentor, and Mike only came on full-time this month. So we’ve been juggling building Frontend Mentor with our paid work for a couple of years!

I had been working as a contractor, so I had more available hours to work on it. Whereas Mike has always been full-time elsewhere, so he could only manage the odd evening and weekend.

This has meant we’ve both needed to be patient, but it’s also helped us get good at prioritizing the right work because of our lack of available time.

Over time, the community has continued to grow, and it has picked up more and more pace as each month has gone by. In May, we surpassed 150,000 registered members on the site!

Another obstacle we’re starting to see is copycat sites. Some of whom have copied our model and wording to a tee. It’s frustrating, but there’s plenty of room for other players in the space, and I’m all for competition and offering alternatives to the development community. 

For anyone facing copycats or competitors launching, I’d recommend reading The Innovation Stack by Jim McKelvey. It offers a brilliant reminder that the small decisions you make through research, feedback, and gut instinct compound to create something truly unique. Others may try to copy, but as long as you’re clear on your vision, it will be hard to stop you.

We’ve also turned down investment in favor of trying to build the company sustainably. We’ll see in time whether or not that’s a mistake!


What tools & resources do you recommend?

We use a bunch of tools that I’d happily recommend to other people creating an online business.

First off, Mike and I are very privacy-focused people. So finding a privacy-first analytics solution was key. I’m a big fan of Paul Jarvis’ approach to business (after reading Company of One) and knew he had co-founded a privacy-first analytics company called Fathom Analytics, so we went with that. I’ve loved using Fathom and would recommend it to anyone looking for a privacy-first analytics solution!

Our tech stack is all JavaScript-based, with MongoDB, Node.js, and Next.js. We’re toying with the idea of switching to PostgreSQL and a Rails API, but that’s not certain yet.

We use Chargebee for subscription management and can’t recommend them highly enough. They’ve built a great solution, and their customer support is brilliant. We then use Stripe and PayPal as our payment gateways. We’ve also integrated Chargebee with ProfitWell for deeper insights on subscription metrics and monthly revenue goal tracking.

The community that runs alongside our platform is a Slack community. If I were starting from scratch, I’d probably choose Discord instead. Discord is doing much more to support and build open communities. We’ve got over 60,000 people in our Slack community, though, and it’s doing a reasonable job. So the switching cost would be too high at this point.

I’m also a member of the Founder Summit community, which is full of people focused on building calm companies. For anyone hoping to do the same, I’d recommend joining!

Where can we go to learn more?

I don’t have a blog, so the best place to keep up to date with what I’m doing is my personal Twitter account. I’m not hugely active on there, but I post updates on Frontend Mentor. I enjoy writing, though, so tweeting more and starting up a blog is something I plan on doing!

Description

CTA
The All-In-One Newsletter for Startup Founders

90% of startups fail. Learn how not to with our weekly guides and stories. Join +40,000 other startup founders!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.