Frontend Mentor

Improve your front-end skills by building real projects

No Employees
Multiple Founders
Founders Code
Education
Programming

Frontend Mentor is designed to help developers get out of "tutorial purgatory".

We provide designs to build to so that you can practice HTML, CSS, and JS by experiencing genuine problems in a realistic environment.

December 9, 2020 I've gone full-time on Frontend Mentor!

After 2-years of working on Frontend Mentor, I'm excited to say that I'm now full-time on it!

I've taken a slow and steady approach throughout the last couple of years. Contract work has been paying the bills up until now. This has allowed me to take my time to make sure I'm building the exact company I'd love to work on.

If you're interested in hearing some lessons I've learned, check out my separate post 👉 I've gone full-time on my project! Here are 5 lessons I've learned over the past 2-years working on it.

This is a huge milestone for me and something I've been hoping would happen ever since I started this journey.

When I announced it to the Frontend Mentor Slack community their response only made me more certain that this is the right move:

Slack message to the Frontend Mentor community with lots of positive emoji reactions

Thanks to everyone in the IH community, especially the Indie London lot for being so supportive! 🙌

August 27, 2020 $12k+ sales/$1.6k MRR 2 weeks after subs launch 🥳

2 weeks ago I pushed the button to put our Frontend Mentor PRO subscription offering live.

It was a huge moment for me, as it's taken 2 years of work to get to this point. I decided to go against the conventional (and entirely logical) IH advice of getting revenue early on. Instead, I kept up contract work on the side while I built a community around the Frontend Mentor concept. The plan was to then find out exactly what the community needed before realising a business model.

Two weeks on and the numbers are encouraging! We've hit $1.6k MRR on $12.3k of sales from 284 subscribers.

Graphs showing total revenue, monthly recurring revenue, refunds, and total sales

It feels great to know that I haven't been entirely crazy all this time and that there might really be something here from a business perspective!

I thought I'd share a few things about the launch that went well and a few things I would improve if I could have my time again.

Taking the time to do the research

As I mentioned above, the first idea for Frontend Mentor came to me 2 years ago. During that time I've been talking to members of the community, running surveys, gathering feedback and iterating the platform.

By the turn of the year I had a good idea of what a valuable MVP would look like for the subscriptions. But instead of diving straight in I tested the water with one-off purchases of the design files for the challenges and premium challenges. The premium challenges are designed to be showstopper portfolio pieces to help people in their job hunt.

That validated that people would pay for these items individually. I also started getting a lot of requests to simplify everything with a subscription, which gave me even more confidence.

Taking the time to do the research has allowed me to monetise in a way that seems naturally with what the community need. If I had rushed it I could have easily come out with much weaker offerings that didn't align with the goals of the platform.

Building interest

I was consistently talking about the subscription launch with the community a good 3 months before the launch. This built up a lot of interest. One thing I didn't do was collect emails specifically for the subscriptions launch. This is something I could have easily done and I'm sure it would have led to more sales.

However, I was consistently talking about the progress we were making in our bi-weekly newsletter that goes out to 7k+ subscribers.

Lack of a pre-sale option

Following on from not creating an email list, we also didn't offer a pre-sale option. We didn't do this due to a lack of a hard release date. In hindsight, we should have set a release date that gave us some wiggle room and had a pre-sale.

Lots of people were asking about it and there were a number of people that were worried they'd miss the Super Early Bird batch for our launch discount.

Having a pre-sale with the Super Early Bird discount would have put everyone's mind at rest and would have allowed me to drum up sales from a much earlier date.

Not using a time-based launch discount

I decided to offer two tiers of discount at the beginning, but they would be numbers-based instead of time-based.

I split the first 500 subscribers into Super Early Bird (first 250) and Early Bird (second 250). A much better option would have been a pre-sale with the large discount and a time-based smaller discount immediately after launch.

As it is, we're still offering Early Bird discounts as we haven't gone through the first 500 subscribers! I don't see this as a huge problem in the grand scheme of things. But I'm sure our numbers would be bigger by now with Super Early Bird pre-sales mixed with a 3 day (for example) Early Bird discount.

The lack of a pre-sale option also led to a flood of people hitting the /pro page immediately after launch, which took its toll on our servers. We also temporarily got blocked by Chargebee because there were too many requests going to their servers! So it was a bit of a manic launch when it could have been much calmer.

---

All-in-all I'd put this in the column of "successful launch" based on my expectations.

There have been 10 refund requests out of 284 subscribers, which isn't great, but I'm sure it's to be expected on a first version.

Now the hard work really begins of serving our PRO subscribers' needs and evolving the offering!

May 20, 2020 10k Slack members & 1st ever community AMA!

Yesterday the Frontend Mentor Slack community jumped above 10,000 members!

It has been growing fast since February (3k members) when I put the Slack sign up as part of the onboarding process after joining Frontend Mentor.

Even with the rapid growth, the community has kept its inclusive, supportive attitude which has been great to see.

As a special celebration for hitting 10k I'm going to do a YouTube Live AMA session with the FEM community tomorrow at 4pm GMT+1.

It will be my first ever, so wish me luck! 😅

March 26, 2020 Frontend Mentor is live on Product Hunt! 🥳

First off, I hope everyone's doing OK and are managing to stay safe and healthy in these difficult times.

I'm excited to announce that Frontend Mentor is live on Product Hunt!

This is my first ever Product Hunt launch, so I'm hoping it all goes well. I'll do a full write-up next week detailing my approach. I'm sure it will be nothing new!

Frontend Mentor has been live now for over a year, but I decided to hold off on the PH launch. I've had my reasons, which I'll mention in the write-up. Saying that though, I definitely could (and probably should) have done this sooner!

From now on I'll definitely increase the cadence of these "launches" and aim to get better at getting FEM out to a wider audience.

Thank you so much for any support you give. I'd love to hear any feedback that you've got. Feel free to ask me anything 🙂

March 2, 2020 10,000 registered users & $1,000 monthly revenue

Over the weekend, Frontend Mentor ticked above 10,000 registered users on the platform. Also, revenue for February was $1,011 after launching the first premium challenge on the site.

To have hit these two milestones over the same weekend is a great feeling. Everything is in place now to really start pushing forward and add new premium challenges to the site.

It's not recurring revenue yet, as the premium challenges will be one-off purchases. But I'll be building more features into the platform that will be for paid users to offer recurring value. Once that's in place and I've built up the library of premium challenges I'll offer a subscription option.

I hope everyone else is having a great start to the new month!

February 14, 2020 First Premium Challenge launched and first sales!

On Wednesday afternoon I launched the first premium challenge on Frontend Mentor. Up until now, all challenges have been free with the option to buy the original Sketch design file. So this is the first time people have had to pay to actually take a challenge.

The reaction from the community has been overwhelmingly positive. I'll still continue to add free challenges to the platform, but the premium challenges will aim to offer some key differences vs the free ones:

  • Premium designs will be for fully-functional, multi-page websites and web applications. Whereas the free challenges are typically a single landing page or a smaller component.
  • Mobile & desktop designs are available in free challenges. Premium will add tablet designs in addition to mobile & desktop.
  • Free challenges include static JPEG design files with the option to buy the original Sketch file. Premium challenges will include the Sketch file in the download.
  • Premium challenges will include a professional design system to show all colors, fonts, and component styles.

The aim of the premium challenges is to create the most realistic front-end development experience outside of actually receiving a professional development contract.

As I build up the library of challenges they'll be available as one-off purchases. However, once the library has built up and I've built some features into the platform that offer more recurring value I'll also offer a subscription option.

The premium challenge generated over $150 in the first 24 hours since it went live, which was a nice start. I'm now building out more context by adding a /premium landing page and I'll also be adding FAQs for the challenge detail pages to give more information. For anyone who wants to take a look, you can see the challenge here.

It feels great to have the first premium challenge out of the door. This is another big step to making Frontend Mentor a sustainable business.

One member of the community commented yesterday that he's enjoyed seeing the platform evolve from 3 challenges on a static Wordpress site to the platform that it is today. To think that it was less than a year ago since I launched the platform is pretty crazy. It's easy to get lost in the day-to-day and feel like everything is moving slowly. But when you zoom out and look at what's changed in a year, it feels pretty amazing!

So, whatever project you're working on just keep chipping away at it whenever you can. The small changes really do add up over time!

February 1, 2020 Community Sponsorships are live!

Happy 1st of the month everyone! It's an exciting day for me, as it's the first day that Frontend Mentor has actual community sponsors on the site.

  • ZEIT is a company that I've been a massive fan of for years. Static hosting with ZEIT Now is an incredible experience — so easy to set up. They also release amazing OSS. Frontend Mentor is actually built using the Next.js framework, which came out of ZEIT!
  • PixelSnap has quickly become a key tool in my front-end workflow. It's awesome to have them sponsoring as I think the Frontend Mentor community will love the tool.
  • Triplebyte is a really nice offering if you're looking for a new role. It's a free service that lets you take a confidential quiz. Based on your results companies will pitch you for their vacant roles!

It's an exciting first step to turning this platform into a sustainable business and I can't thank these companies enough for being the first sponsors.

For anyone who's wondering, here's the basic email template I used for the cold outreach to these sponsors:

Hello,

My name is Matt Studdert. I'm the founder of a company called Frontend Mentor.

First off, I'd just like to say that [PERSONAL PRAISE FOR THE PRODUCT/COMPANY]

The main reason I'm getting in touch is that I've recently opened up some sponsorship spots on Frontend Mentor. [SHORT SENTENCE ON HOW COMPANY/PRODUCT'S PROPOSITION ALIGNS WITH OUR AUDIENCE'S NEEDS].

You can read more about the details of the sponsorship offer on our sponsorship page.

If you have any questions at all please let me know. I look forward to hearing from you.

Kind Regards,
Matt Studdert

I'm sure the copywriters/sales experts/marketers in this community will have a better approach, but this has worked for me so far.

I've been extremely selective with what companies I approach and have only gone for the ones who I feel will benefit the Frontend Mentor community the most and who I personally believe in.

I hope everyone has a great month! 🙂

January 31, 2020 Slack community has hit 3,000 members

Yesterday the Frontend Mentor community jumped above 3,000 members.

I created the community in October 2018 and it's grown steadily ever since.

It's been amazing to see it grow and see people helping each other out. I'm still extremely active in it reviewing people's code and offering help if people get stuck on the challenges. But it's great to know that if I'm not on it for a day or two now everyone just helps each other and cracks on with it.

Having a Slack community is also an amazing tool for product development on your platform. You see patterns start to emerge in conversations and they can give you ideas for new features. For example, a lot of people have started collaborating on the challenges in Slack. So I've done a number of user interviews and will be looking to add a collaborations feature to the platform itself as a result.

If you have a product/platform of any sort, I'd strongly recommend starting up a community, whether it's Slack or Discord. It's such a great way to build a strong relationship with the people in your community.

January 28, 2020 First profitable month!

Frontend Mentor is about to have its first-ever profitable month since I started building it!

I've gone completely the opposite route that @csallen recommends when it comes to monetising. Sorry, Courtland! 😬

I first had the idea in the summer of 2018, got the first version up within a couple of days and started to slowly iterate whenever I could work on the project.

The platform itself (with authentication, solutions, etc) went live in April last year. Traffic and registrations have been growing steadily while I've been ironing out creases in the UX and overall user journey. The site is now getting over 20,000 visits per month and the platform has over 7,000 registered users.

Throughout this whole time, I've been working as a web development instructor at General Assembly in London to pay the bills. My main reasoning was that there are potentially lots of ways to monetise the platform and I didn't want to rush into a route that could potentially send the platform in the wrong direction.

The platform is now in a position where I feel I can really start pushing it and focusing on growth and revenue. The first step to this was to open up some spots for "Community Sponsors" on the site.

I'm really happy to say that I've signed two companies up for February so far! There's still one spot available, but even if it remains at two for the first month its live it's still a great result.

I couldn't be happier with the first two companies who have decided to become sponsors as well:

  • ZEIT is a company that I've loved for years. The products and OSS they release are always the highest quality and their hosting with ZEIT Now is so simple to set up.
  • PixelSnap is an unbelievably useful tool for front-end developers and designers. It helps you measure anything on your screen really quickly.

These are both companies and products that I personally love and I think the Frontend Mentor community will find extremely useful.

Both of these companies were ones that I personally contacted as a result of thinking that they would be perfectly aligned with our community's needs.

For ZEIT I actually ended up using the chat widget on the site to make the first contact, which couldn't have worked better!

With both, I made the messages as personal as possible, first mentioning what I loved about their products. I then explained the Frontend Mentor offering and the exact reason why I thought their brand aligned perfectly with our audience.

I got some amazing help and feedback on the sponsorship offering from @AndrewKamphey on this IH post before I started contacting people.

I also received some invaluable help from Emma and Louis in the IH London Slack group. I can't thank them all enough for the advice they gave.

As I mentioned, there is still one spot available for February. If you are a company or know a company who helps front-end developers in some way, please feel free to check out the sponsorship page and get in touch!

November 22, 2019 2 major platform updates 🥳

With the Frontend Mentor platform still in its infancy, there are still a lot of UX refinements to be made.

The most glaring issue has been a lack of peer-to-peer engagement. So my whole focus lately has been around supporting that engagement and finding ways to stimulate conversations.

This week I've launched two major changes to the platform, which are two big first steps.

The first change that went live on Tuesday was a complete re-working of the scoring system. Now, every user has a single Mentor Score on the platform and certain actions carry varying point weightings based on contribution back to the community. This is a first step into gamifying the platform.

Within this change, and arguably a bigger deal was a re-factor of the comments data structure. Comments used to be a nested resource on the solution model, whereas they've now been broken out to their own collection. This will allow me to show the latest comments from a user on their profile page.

The comments re-factor also allowed for the second major change, which went live yesterday.

This change brought in a dashboard for logged in users. Before, logged in users on the home route would still see the actual homepage. Whereas now, they see the dashboard which will include 4 initial tabs:

  • Questions: A timeline of the latest questions that are being asked when solutions are submitted.
  • Community Feedback: This will highlight feedback happening on other people’s solutions. A lot of lessons can be learned just by reading the feedback on other people’s solutions, so this tab will make these comments easier to find.
  • Wall of Fame: This tab will highlight the Top 20 users (based on Mentor Score) from the last Week, Month, Year and All-Time. I’ll be looking to add more features (and prize draws) around this in the future.
  • Personal Feedback: This is where you’ll find all of the latest feedback on your own solutions.

The dashboard will help bubble conversations and questions to the surface making it much easier for people to get involved in conversations.

Only the questions tab is active at the moment, so I'll be adding the other tabs over the coming week. Then it will be onto the next round of changes!

If anyone has any experience with growing an engaged community (including @csallen 😉) and has any input I'd love to hear it.

About

Frontend Mentor is designed to help developers get out of "tutorial purgatory".

We provide designs to build to so that you can practice HTML, CSS, and JS by experiencing genuine problems in a realistic environment.