loading...
Cover image for Introducing Frontend Mentor - Supercharge your front-end skills by building real projects
Frontend Mentor

Introducing Frontend Mentor - Supercharge your front-end skills by building real projects

mattstuddert profile image Matt Studdert Updated on ・3 min read

During the summer I had an idea that I thought would help people improve their front-end skills.

There are so many incredible sites and services out there for helping people learn to code. Companies like General Assembly, where I teach in London, and sites like freeCodeCamp do an amazing job at teaching people from the ground up.

But, I wanted to create a resource for people who already knew some HTML, CSS, and JavaScript. Not a step-by-step course, or code along, but a hands-off, project-based resource that emulates a real-life workflow as much as possible.

So, I'd like to introduce you to Frontend Mentor.

Screenshot of the Frontend Mentor homepage

I've had a mini-site up for a few months to test the idea and get feedback. But now it's full-steam ahead with a new brand and full re-design of the site.

Challenges on Frontend Mentor

For the challenges, I've created fictional brands to build the designs around. This helps each challenge mimic a real-life workflow. It's like building a site for an actual client!

The challenges include mobile and desktop designs, starter code (including optimised assets). A front-end style guide is also provided, which includes colours, fonts etc.

Here’s a screenshot of the desktop preview for one of the challenges:

Desktop design preview of the Huddle coding challenge on Frontend Mentor

And the mobile preview:

Mobile design preview of the Huddle coding challenge on Frontend Mentor

If you would like to take a challenge, simply download a starter code from the site and you're away. I've decided to keep the starter code as downloads, instead of using a browser-based editor. This is because I want people to use the text editor and tools that they're most comfortable with.

Plans for the future

Over the coming weeks, I'm going to be adding new challenges to the site. I'll build out a proper /challenges index page to allow for filtering etc.

I'm also thinking about the different types of challenges to offer on Frontend Mentor. I like the thought of having smaller components for quicker challenges and even multi-page sites for people who want a real challenge.

I'll be adding some challenges that involve a bit of JavaScript as well. One of my goals is to offer ‘Bring Your Own Frontend’ (BYOF) challenges. For these challenges, Frontend Mentor would provide the designs and a documented public API. People can then choose which JavaScript library/framework to practice with.

Please give your feedback and share it around

This is the absolute beginning for Frontend Mentor, so please do let me know your thoughts. There are so many different directions I could take this in and I'd love to hear your ideas.

Feel free to join the Slack community on the site as well to get help on the challenges and to help others out.

Also, follow Frontend Mentor (@frontendmentor) on Twitter for the latest updates.

I look forward to hearing everyone’s feedback! Please share the site with anyone who you think it could help 🙌

Posted on Oct 3 '18 by:

mattstuddert profile

Matt Studdert

@mattstuddert

Founder of Frontend Mentor (frontendmentor.io), front-end/JavaScript developer, part-time lead instructor at General Assembly.

Frontend Mentor

Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join over 12,000 developers building projects, reviewing code, and helping each other get better.

Discussion

markdown guide
 

These sites are gorgeous! Awesome job!

 

Thanks Ali, can't wait to see people's solutions!

 

Just saw you also work at GA 🙌

Haha, I do indeed! Always a party 🎉

 

I am definitely trying this out. Awesome indeed. By the way, did you design the illustrations yourself? I do know how to use corel draw but i have very minimal knowledge of how to create illustrations like the one in the huddle site

 

Hey Sylvester! Really happy to hear you'll try out the challenges 🙂

The illustrations for the huddle site are done by Katerina at unDraw. They're beautiful illustrations and can be used completely for free. It's an amazing resource!

 

Wow. Thanks a lot @matt . You are a life saver

 

Awesome! I'm gonna try some of them, maybe for the future you could add the sketch / PSD files? I think that it could work too for the exercise to have the choice to hack on the design files more like some real case scenarios :)

Overall great work!

 

Thanks Esteban! Great feedback as well. I’ve started out with JPGs just to try and help train people’s eye by working without precise measurements etc.

But we’ll see how people get on 🙂

 

Wow, great project! I was looking for something like that for quiet a long time. I think Esteban has a valid point, though. PSD/Sketch files are must have for a Front-End project.

Thanks! Noted about the Sketch files. Even though you would have them in the real world, I want to see how people get on with just the JPGs for the time being.

It's kind of like not being able to Google your way out of a question in a coding interview. You know you would be able to do it in your professional workflow, but it helps to think through the problem at the time.

We'll see how people get on. I hope you enjoy the challenges! 🙂

 

This looks great!

Pick a challenge, click the download button and you're ready to go - this is my favorite part of your project, makes it so easy to setup and start doing stuff.

I will try one of the challenges next weekend :)

 

Thanks Helder! Yeah, I wanted to make it super easy for people to get set up.

Mention @frontendmentor on Twitter when you've finished your challenge. I'd love to take a look at what you build!

 

Yeah great idea !!! specially to help back-end dev like me to improve their skills. I suggest you to add a feature like a forum, but i a special way, like a forum per challenge in which users will discuss about the current challege.
Are you looking for collaborator to add features in the site ? I am available. ;-)

 

Hey! Thanks for the feedback. Will be looking to build out a platform in the near future, so collaborators will definitely be welcome! 🙌

Please feel free to sign up to the Slack community where everyone can talk about ideas 🙂

 

It looks amazing! A hearty congratulations on this.

 

Thanks a lot John 🙂Feels great to have it out in the wild finally! Hope you find it useful 👍

 

Truth be told I started working on something similar about a month ago. So I'm glad I'm not alone in thinking UI focused training and practice is valuable. I love what you have done here!

Ah awesome! Yeah, I think it's really valuable. Would love to see what you've built when it's ready. Feel free to get in touch whenever as well to talk more 👍

Thanks very much! I will keep you posted. :)

 

This looks like a pretty awesome site. Once hacktoberfest finishes I am going to go ahead and take part of these challenges :D

 

Awesome! Look forward to having you involved in the challenges 👍What have you been working on so far in hacktoberfest?

 

At the moment I have been working on two PRs for a project that I am a maintainer, plus reviewing and merging PRs haha

The project it’s called opsdroid and it’s a chat-ops bot

Ah awesome! Good work mate 👍 Enjoy the rest of Hacktoberfest and I look forward to having you give one of the Frontend Mentor challenges a go!

 
 

Thanks a lot, I'm glad you like the site!

 

Great resource. I've been looking for something like this. Awesome Job Matt.

 

Thanks Kinyanjui! Really happy that you like it. Hope you enjoy doing the challenges! 👍

 

Thank you Sensei. This is gold for me (/resources). ✨🔥

 

Awesome! I've found those resources very useful over the years. Will be adding more soon too!

 
 
 
 

It looks really nice and it's a very good idea! I am looking forward to checking it this weekend!

 

That's awesome! Remember to tweet to @frontendmentor when you're done. Would love to see your solution! 🙂

 

Awesome! Seems to have a Project Euler vibe to it and I love it! Wish there were more sites like this 😁

 

Haha, thanks! Glad you like it 🙂

 

I am rushing to go have a taste of the crunch for myself....
Thanks for such a bright idea..

 

Haha, thanks Mario! Hope you enjoy the challenges! 🚀

 

Really cool idea, Matt. I'm sharing this. 😁

 

Thanks Devon! 🙌🙌🙌 Really appreciate it 👍

 

I'm very glad I stumbled upon this. It's a really good project. 👍

 

I'm really happy you like it, John! I hope you find the challenges useful 🙂

 

This is great! We need more coding exercises like this.

I hope you can add the solution in the future.

I'm also doing the coding exercises from frontloops.io.

 

Hey! 👋

Glad you like it. Adding solutions is definitely something that can be done in the future. Great to see you've joined the Slack community. We can chat more about it there 🙂

Frontloops looks like an awesome site too!

 
 

Thanks, Maria! I hope you enjoy the challenges!