Introduction
A year ago, I put the following task on my to-do list: Finish all of Frontend Mentor's free challenges. I had been relearning basic HTML and CSS, and I started with what seemed like the simplest project on the site: The NFT Preview Card. I toiled for hours that first day, not very confident in what I was doing. The mental shift from following tutorials and trying to create something by myself was almost tangible. I was not able to figure it out the first day, but managed to create something like the design specs on the second! It was the first project of nearly sixty I went on to complete this year, but now I can look back and smirk at my struggle to complete a project that would now probably take me less than 30 minutes. In this article, I will share with you what I learned from completing every free challenge on Frontend Mentor.
But first, what is Frontend Mentor? Frontend Mentor is a website that provides a diverse set of front-end challenges that coders can build with any tools of their choice. The free version of the site offers photos of how the challenge should look on both desktop and mobile, and instructions in the README file that outline how to complete the challenge.
How I Benefitted
I developed many skills by completing Frontend Mentor's challenges, including:
- The HTML validation reports and the design requirements made me pay attention to things like accessibility, responsiveness, and active states.
- You'll learn how to deploy your projects, and its a great chance to practice Github skills.
- Repeating similar design styles or functionality throughout the projects helped those skills become automatic
- The diversity in challenges pushed me to learn how to incorporate new functionality, like reading through API documentation, using React libraries, exploring the usage of different React hooks, learning regex, and adding color themes.
- With each project I wanted my code to be more clean and efficient, because I knew the hassle of having messy code. Over time I did better at organizing my code files and writing reusable code.
- I learned how to more accurately estimate how long it would take me to code something, as sometimes my estimates would be way lower than how long the challenge actually took to complete, and sometimes I would be pleasantly surprised at completing a challenge in less time than my estimate.
- The important coding philosophy "you can solve anything with enough Google searching" ingrained in my head after each time I got frustrated at not being able to figure something out, pushing through, and eventually figuring it out.
- The social aspect of the website, where people can like your project, leave comments, and you can see other people's solutions, was inspiring as I knew I was not alone in the journey.
- After completing multiple challenges of varying difficulty, I was given the confidence to make my own website ideas and code them from scratch.
- They currently offer 59 free challenges, and release more every so often. When you start out coding, everyone's advice is to "just build things", but you may not have ideas of what to build. This site offers plenty of ideas! It is a website I will definitely return to whenever I have something a new skill I want to practice.
Overview of Challenges
In this section, I will share my experiences with some of the challenges you can find on Frontend Mentor.
Newbie Level
All of these challenges are pretty much the same. They are good challenges to get comfortable using HTML and CSS, and flexbox or grid will become you're best friend. If you want to practice CSS preprocessors or frameworks, now would be a good time to do so.
The Interactive Rating Component challenge and the Intro component with sign up form are Newbie challenges that incorporate some JavaScript, where you can practice selecting dom elements, checking and validating input values, and dynamically adding and removing classes.
Junior Level
Reaching the junior level challenges feels exciting! While it may be considered overkill to use JavaScript frameworks like React, Angular, Vue, etc., I think completing these challenges is a great way to get comfortable building with those frameworks. I had just finished a 50 hour React course when I started the junior challenges, but again, the shift from tutorial land to figuring it out yourself is a tough one. It took me a long time to figure out how to complete the Advice generator app challenge in React, but that boost of confidence I got when I figured it out is a feeling I could bottle. However, it is also a smart idea to advance your regular JavaScript skills by building these projects. These are great projects to practice dynamically inserting data, and you will need to learn how to fetch data as well. You will also learn how to implement dark and light mode.
A highlight project in this level for me was the Crowdfunding Product Page. It was the first challenge I had to think about mutliple types of functionality, and had to have data shared amongst multiple parts of the app, so I solved it using Redux.
Intermediate Level
The intermediate level, as well as the junior level, will contain lots of lots of landing pages. A total of thirteen, to be precise. Lots of hamburger menu practice. I did all of them in succession, and it was a bit of a slog to be honest, but its a good time to practice writing resusable code. You will also have to learn how to use some sort of storage for persisting data. There is an opportunity to practice backend code as well, by building some of the projects as a fullstack application, such as the Todo app challenge. Following a long Kevin Powell's tutorial for the Space tourism multi-page website will teach you to think about design systems, accessibility, and some cool CSS knowledge.
Advanced Level
Unfortunately, there are only two advanced level challenges in the free version of Frontend Mentor. Fortunately, once you finish all of these projects, you will be confident to tackle any challenge before you, no matter how complex! The transition from intermediate to advanced level projects was not very prominent, but I think this shows how much progressing through the challenges will teach you.
Guru
Paying for premium will allow you to access five Guru level challenges, and they definitely look like they step up the complexity.
Summary
Frontend Mentor is an amazing resource for those wanting to gain confidence in whatever frontend skill they want to learn. It was an essential part of my learning journey, and will continue to be. I am so grateful to have found it 11 months ago, and to check Finish all of Frontend Mentor's free challenges off of my todo list. I hope this article will provide some sort of inspiration to others. Keep coding, with peace.