How to get the most out of Frontend Mentor
At Frontend Mentor, we have a precise aim: to help you get hands-on experience building websites. We believe the best learning comes from experiencing problems first-hand and solving them.
Our challenges are professionally designed to give you the most realistic development experience possible.
Beyond building projects, there are many ways you can level up your skills and get the support you need on Frontend Mentor. This guide is designed to give you all the tools necessary to turn our community into one of your most powerful development resources.
So let’s begin!
Completing challenges
Our challenges are the cornerstone of the platform. Everything revolves around them. By building our projects, you’ll be gaining genuine coding experience in the most realistic way possible outside of professional development work.
Whether you’re simply looking to improve your skills or you want to build a portfolio of beautiful projects, our challenges will help you achieve your goals.
Start at the right level
Choosing the right level of challenge difficulty is a key decision early on. Our challenges have five levels: Newbie, Junior, Intermediate, Advanced, and Guru.
If you’re unsure where to begin, we recommend starting with a Newbie challenge. The smaller, the better! This will help you get up and running. On our challenges page, we have filters to filter by difficulty, languages used, and more.
As you become more comfortable, you can start trying larger and larger projects. Taking a gradual approach by completing lots of smaller projects first is a great way to go. There are few things more disheartening than biting off more than you can chew and getting completely stuck on a tough challenge.
So take it one step at a time. The saying “it’s a marathon, not a sprint” definitely rings true here.
We recommend starting with the QR code component challenge and working your way up gradually from there.
Don’t worry about time
A common question we get asked from the community is, “how long should it take me to complete the XYZ challenge?”. Whilst it’s great to be thinking about time, we recommend not placing too much importance on it, especially when comparing yourself to others.
Instead, a great exercise to do is to estimate how long you think it will take you. Then time yourself while working on it and see how close your estimate was.
Estimating work is a key skill for developers that is often overlooked. Being able to estimate your work accurately will make for happy bosses and clients in the future!
As you build more projects and get better at breaking work into chunks, your estimates will become increasingly accurate.
The main point here is not to compare yourself to others. Instead, measure yourself and try to make improvements wherever you can. That will be a far better use of your time.
Focus on quality
As I mentioned above, don’t worry too much about time, especially in the beginning. A better area to focus on is the quality of your solution.
It will undoubtedly be tricky to get your project to match the design when you first start. You’ll also make some errors and hit some roadblocks along the way. This is completely natural and is part of the learning process, so don’t worry about it.
As you get more projects under your belt, you’ll naturally become faster, your code quality will increase, and your accuracy will improve. This is when you can start to take it up a notch!
If you’re looking to become a professional developer, it can be valuable to treat these projects as client projects.
When talking about sports stars like Michael Jordan and Kobe Bryant (I like basketball 😆), people often cite that they practised with the same intensity as they would have in a game. This is a great mentality to take into your projects on Frontend Mentor, especially as you get more comfortable completing the challenges.
Pretend like you’re building these projects for a client. Try using best practices wherever possible. Spend time testing your project and making sure it’s accessible, responsive, accurate, etc.
The more intentional you can be with your practice, the more you’ll get out of it.
Don’t chase pixel-perfection
Even though I mention focusing on quality, don’t feel like you need to create pixel-perfect projects. As developers, it’s our responsibility to use designs as visual guides. But the code is always the source of truth, not the design. So feel free to make small tweaks wherever you feel necessary. I’d recommend reading “Chasing the pixel-perfect dream” by Josh Comeau when you have some time. It’s a great article that explains why chasing pixel-perfection should never be the goal.
Submitting solutions
Completing a challenge is a gratifying feeling. You’ve been typing away on your keyboard, and you’ve seen your project grow in front of your eyes. Now it’s time to show the community!
Each challenge comes with a README file as part of the starter download. Be sure to read that thoroughly, as it will give you all the information you need to submit your solution on the site.
Submit once you feel you’re “done”
Some people submit incomplete solutions, but we’d recommend against this. By submitting a half-finished project, you’re missing out on a big chunk of potential feedback. It’s much easier for people to provide feedback on a completed project.
If you’re stuck during the challenge, you can ask for help in our Discord community. Other community members will then be able to jump in and help get you unstuck. I’ll talk more about our Discord community later and how you can join.
Write a good README
In the starter download, we provide a README-template.md file. This is intended for you to use and overwrite our default challenge README.
Our template will help guide you on what to include in your project README. Feel free to play around with it as much as you like. The more effort you put into creating a strong README, the better. Here are some reasons why writing good READMEs is beneficial:
- It helps you explain the project to anyone viewing your repository for the first time. You can outline the goals of the project, tech choices, etc.
- It provides a perfect opportunity for you to recap some of your major learnings. Taking the time to write about new concepts you’ve picked up can help reinforce that knowledge and give you a reference if you ever want to come back to review it!
- If you’re applying for jobs, good README files are a way to set yourself apart from other developers. A well-written README shows that you’ve paid attention to detail and taken the time to explain the project to anyone reviewing it.
- They’ll be very helpful to anyone reviewing your code to give you feedback. A well-written README will provide more context about your project. This could help you learn more about your project through more detailed feedback on the platform!
Ask specific questions
If you’re looking for feedback on your solutions, be sure to ask questions to the community when you submit them. Firstly, this will make your solution show up on the “Feedback Requested” tab on the solutions page. Secondly, it will give you a chance to ask for feedback on specific aspects of your project.
The keyword there is “specific”. Be sure not to write generic statements like “Feedback would be appreciated”, “Please give me feedback”, or “What can I improve?”.
The aim is to help guide potential reviewers on exactly what you want feedback on. The more detailed and specific you are with your questions, the more likely you’ll receive valuable feedback from the community.
Share your solution
Once you’ve submitted your solution, it’s time to share it! We provide templates to help you share your solution on Discord, Twitter, and LinkedIn.
Although using the templates makes it easy to share your solution quickly, I’d recommend taking some time with this.
Firstly, I’d recommend re-writing the content so that you’re asking specific questions. As I mentioned above, the more specific you can be, the better.
Next, I’d recommend taking a screenshot of your project or taking a quick video of you walking through your project. This will make your posts much more engaging and can lead to more interaction from other web development community members.
Once you’re ready, you can share your creation with the world!
If you’re looking for some inspiration, here are a couple of great posts from our community:
You don’t even need to wait until you’ve completed your projects to share them. Sharing progress updates is just as powerful, and it’s a great way to connect with other developers.
You also never know who else might be watching! Here’s a message I received from one of our community members. They had been sharing progress updates while building our challenges and received an interview offer from a CEO who was impressed with what they were building!
Receiving feedback
So your solution is out there on the platform, and someone has taken the time to review your code and suggest some improvements. What next?
Reply to comments
Be sure to reply to the person who commented on your solution. Whether it’s to say thanks or to ask more questions, you’re showing you appreciate the time they’ve taken to look at your project.
Getting into discussions with other developers about code is an incredible way to learn more about things you’re unsure of!
Mark helpful comments as helpful
If the reviewer's comment helped you out, be sure to mark it as helpful. Frontend Mentor is a collaborative learning platform. We’re all here to get better and help others along the way.
If someone’s taken the time to give you feedback and it’s helped you out, marking the comment as helpful is a perfect way to show your appreciation. This awards them some points and adds to their reputation on the Frontend Mentor platform.
If you want to say a quick “thanks” or acknowledge a comment that hasn’t necessarily helped you in a specific way, an upvote is best.
Giving feedback
I’m excited to talk about this, as this is a powerful tool to help you level up your skills even faster.
If you’re not commenting on other people’s solutions, you’re missing out on a huge learning opportunity on the platform! Thinking critically about other people’s solutions and then providing feedback is an incredible way to learn concepts deeper.
Once you’ve finished a challenge, I’d recommend looking at other people’s solutions for the same challenge before moving on to the next one. This will help you see how other people have completed it and give you a chance to share ideas and support others.
Let’s talk more about how giving feedback to others can be beneficial…
Help others improve
One major reason is to help others! We’re all trying to make our way as web developers, and why not lift others around us and make some friends while we’re at it?
By helping others, you’ll be giving yourself a chance to get to know other developers within the community. That’s priceless! Building out a strong network of developer friends makes everything so much more enjoyable.
A nice byproduct of helping others is that they’re more likely to help you! Please take a look at solutions from top members on our Wall of Fame. You’ll see they get lots of comments!
Supercharge your learning
I’m a big advocate of learning by teaching. Teaching others is an incredible way to learn concepts at a deeper level. To teach others, you need to give clear and simple explanations.
Even if you’re not 100% confident on a topic, try helping others by providing feedback on the design's visual side. We provide a design comparison slider, where you can see the difference in the final solution vs the design. This is a great tool to see differences in font sizes, spacings, colours, etc. If you see some major differences, it can help others if you let them know and give them some support wherever possible.
At the time of writing, ApplePieGiraffe is the top community member on our all-time Wall of Fame leaderboard. Here’s an excerpt from an article APG wrote called “Frontend Mentor Guide 2021”:
Don’t be shy about giving feedback to others even if you are completely new to web development. When I first began giving feedback on Frontend Mentor, I didn’t know very much about how to solve problems on a website, but I sure knew how to spot them! I would often take a look at a solution, click around the page, and resize my browser window and point out any obvious oversights or mistakes I found. 😊
Besides just being a help to others, a couple of other benefits of giving feedback on Frontend Mentor is that it’s great practice reading code (especially other people’s code), spotting mistakes, and hunting for bugs — all of which are important skills for every developer.
If you can’t find anything that needs improvement or to suggest, leaving a simple word of encouragement and letting a user know of your favorite part of their website can go a long way in making someone else’s day. 🎉
If you’re interested in reading the whole article and hearing it straight from the horse’s (or is that giraffe’s?!) mouth, you can read APG’s guide here.
Be supportive
We’re all here to learn and get better at coding, so always support others and avoid shaming people. Frontend Mentor is open to people of all levels, so make sure you’re providing constructive feedback instead of bashing someone else’s code.
Our community is built around being supportive, inclusive, and positive. So please take those values into any interaction you have with other community members.
Build key skills
Reading other people’s code, thinking critically about it, and providing constructive feedback are essential skills. Code reviews are a common part of being a professional developer. So you might as well get started early!
By building these skills early on, you’re going to seriously impress your teammates in the future and be a great developer to work with.
Joining Discord
One massive benefit of the Frontend Mentor platform is that we also have a Discord community that runs alongside it. If you don’t know Discord, it’s a great messaging platform that allows people to chat in real time.
We have thousands of developers in our Discord community, so it’s an incredible place to ask questions, get help on challenges, set up collaborations, and meet other developers.
If you’ve not joined yet, you can get an invite to our Discord community here.
Introduce yourself
The first thing to do when you join our Discord community is to introduce yourself. We have an “introductions” channel specifically for this, and we’d love to hear more about you and your goals!
Get involved
There’s a lot to be learned by reading other people’s messages, but there’s much more to be learned by becoming an active member of the community!
We love seeing new members taking an active role in the community, sharing resources, asking questions, supporting others, etc.
Set up a collaboration
Another way to get ready for the world of professional web development is to practice working in a team. An easy way to do this is to set up a collaboration in our “collaborations” channel.
If you’re looking to work with others on a project, we recommend writing a message on the channel that includes the following:
- A link to the challenge you’re looking to work on
- Any tools you might be looking to use (e.g. Sass, React, Vue, Tailwind, etc.)
- How many teammates you’re looking for
- Any other information you think others might like to know
Once you’ve found your teammates, you can organise how you’re going to communicate. One easy way is to create a group direct message in Discord.
Ask/Answer questions
Our Discord community is there to give everyone an easy way to chat with each other. That makes it a perfect place to get help on challenges and ask questions!
If you’re stuck on something, don’t suffer in silence. The community is here to help you out and support you in your development journey. So please do feel free to ask questions whenever you’ve got them!
If you’re stuck on a challenge and are looking for help, be sure to share links to your GitHub repository and a live version of your project when you ask your question. This will help others in the community help you faster.
Please also feel free to answer any questions you feel you can help with on the flip side. We’re all here to support each other, so any community members' input is always massively appreciated!
Practising like a PRO
If you’re looking to become a professional developer, then our PRO subscription might interest you.
We’ve designed the subscription to give you the most realistic development experience possible outside of actually being a professional developer.
Use the design files
As a PRO member, you’ll have access to the original design files for all our challenges. We provide both Sketch and Figma versions of each design, so you can choose which tool you’d prefer to use.
On a daily basis, professional front-end developers work with design files. Using the design files while completing our challenges will help you gain experience working with design tools like Sketch and Figma. They’ll also make it much easier to build accurate projects and speed up your development time drastically.
Build incredible projects
Our challenges are separated into two categories: free and premium. Our free challenges are available to everyone. They come with JPG versions of the designs by default and can make brilliant portfolio projects.
But, if you’re looking for the most realistic projects possible, our premium challenges are the ones you’ll want to try out. Our premium challenges come with the mobile, tablet, and desktop (with the default and active states) layout designs and a professional design system for common styles. The original design file is included in the project.
Most of our premium challenges are multi-page websites and web apps and will make incredible portfolio projects to “wow” any hiring manager.
Curate your profile
If you’re ready to start applying for roles and prefer only to show your top projects, you can choose to make some of your projects private as a PRO member. This means they won’t show up to others looking at your profile, but you can still view them yourself and share the solution URLs with anyone you like.
To do so, go to My Challenges on your profile and select one that you’d like to make private. Go to Update Solution in the challenge hub, toggle it to private, and then save.
Getting hired
If you’ve joined the Frontend Mentor community, there’s a good chance you’re either planning to become a professional developer or already are one.
If you’re looking for a new development role, your Frontend Mentor profile can become an incredible way to showcase your skills and your knowledge.
Show off your projects
Your profile shows all the projects you’ve completed on the site. Be sure to refine your projects and improve them even after you’ve submitted them on the site.
Refactoring your code and showing your projects in their best light will help impress any hiring manager you might talk to.
Some people also use Frontend Mentor as a way to discover talent. So ensuring your profile always looks professional and up-to-date will give you the best chance possible to impress whoever might be looking.
Display your knowledge
Your profile isn’t just a place to display your projects. We also show any comments you’ve made on other people’s solutions. By reviewing other community members’ code, you not only help other people, but you’re displaying your knowledge and personality to anyone who sees your profile.
Giving and receiving code reviews is a key part of being a professional developer. By giving others feedback on Frontend Mentor, you’re displaying an incredible skill to potential employers.
So be sure to give other people code reviews and give as much feedback as you can. It will not only help other members of the community, but it could help you land your dream role!
Conclusion
If you want to improve your skills by building projects and being part of a supportive development community, Frontend Mentor is an incredible place to be.
Be sure to focus on more than just completing challenges. Engage with others by giving code reviews, get active in the Discord community, and above all, have fun!
We’re here to support you and help you reach your development goals! 🚀
