What is Frontend Mentor?

Frontend Mentor is a platform where you can solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.
 

Pros

• Categories

One of my favorite things about Frontend Mentor is the barrier to entry is very low which makes it very beginner friendly. But that doesn't mean it is only for beginners. There is something for everyone. The challenges are well categorized (Newbie, Junior, Intermediate, Advanced, Guru) So you can choose your level.

• Versions

There are two versions. One is a free version and the other is the PRO version (paid). I only tried the free version and I have been very pleased with it. You can check out the differences here

• Scoring system

It has a very engaging scoring system. You earn points through solving problems and interacting with the community. Badges were introduced on Jun 15, 2020. You can earn the badges through points. And it was a great addition. It acts as a motivational incentive for those who are competitive.But don't get disheartened if you don't see yourself at the top. The scoring system is more geared towards being an active member of the community than being the best developer.

You can also check the Wall of Fame to see the leader board.

• Community

The community is very helpful. You will get feedback almost instantly. You also get points for interacting and by getting up votes on your comments which is an added incentive.

• Escaping Tutorial Hell

Every self-taught developer has gone through tutorial hell. And it is very difficult to get out of it. But Frontend Mentor does a wonderful job of helping you get out it. It is also helpful for those who want to code and learn rather than building up a website from scratch.

• Learning Git/GitHub

Many beginner developers are scared of the idea of learning git and GitHub as it has quite a steep learning curve but Frontend Mentor forces you (in a good way) to learn git and GitHub.

• Learning Hosting

Hosting is an important part of Web Development. Frontend Mentor provides a shortlist of free hosting platforms that can be used to host your static websites.
 

Cons

To be honest, I wasn’t dissatisfied with any part. It was overall a very good experience.

Tips

• Don't skip challenges

It might be tempting to pass on challenges you find too easy. Again on the flip side, you might get stuck on a challenge you find difficult. Try your best not to skip it. Push your boundaries and get out of your comfort zone as often as possible. That is the only way to grow.

• Create a separate GitHub repository

If you plan on doing more than 5 challenges, creating a single repository for every challenge might populate your GitHub repository and it will be hard for you to find the repository in the future. So my recommendation would be to keep all the challenges in a single repository and keeping every project/challenge in a different folder inside the repository
 
Example - https://github.com/Munem-Prionto/frontendmentor.io
 
P.S : I don’t know if this is conventionally correct but I personally find this process helpful.

• Write READMEs

Frontend Mentor provides you with a README template. You might want to skip writing the README but it is a good practice to write README because if someone visits your repository, the README will enable them to understand the project. It is the medium of communication between you and the users.

• Time-box yourself

There is no time limit on the challenges which is a good thing as you can go at your own pace but it can also be a bad thing. When there is no time limit we tend to waste more time. So time-boxing yourself is a great way to tackle this problem. When you take a challenge, estimate the time that you need to complete that challenge and try your best to complete it within your estimation. This will also help you to understand yourself and your skill level. It will also improve your estimation game which will come in handy if you venture into freelancing. But don't get disheartened if you fail to complete it within your estimation.

• Compete with your friends

If you have friends that are on the same skill level as you, have a friendly competition. Who can do the most challenges? Who can do it faster? Who can do it better? But avoid comparing yourself with someone who is clearly ahead of you and has put in more hours than you. Be realistic whilst comparing with others. And keep in mind that everyone has a different learning speed.

• DON’T be a perfectionist

A lot of us have a perfectionist mindset but being a perfectionist can slow you down. If your website is close enough to the design and looks good, submit the challenge and move on to the next one. Use the design as a guideline and not the finished product.

My experience

In the last 7 days , I learned a lot from Frontend Mentor. It helped me get motivated to code again and do it consistently. It got me out of tutorial hell. I tried my best to get the "Mentor of the week" badge (solved 16 newbie and junior challenges) but came up a little short. But it was still a great experience. My goal is to complete all the challenges the free version provides. And if you are willing to take your HTML CSS and JavaScript skill to the next level, I recommend Frontend Mentor highly. It is an amazing platform.

Lastly I would recommend you to take my advice with a pinch of salt as I am a beginner myself.

Munem Prionto.