Finding yourself in need of practice or a place to improve your front-end skills? That's me! Having to learn various new technologies is always fun but sometimes trying to come up with a way to utilize said skills in practice can be quite challenging. What should I do with x? What should I make with y? By the time you finally come up with something, your entire day is away! (not speaking from experience or anything..)
Enter Frontend Mentor
Meet Frontend Mentor! Frontend Mentor is a community platform where you can sign-in and solve real-world problems utilizing professional designs. The purpose of this platform is to provide developers of various skill levels an opportunity to work through curated professional web designs and transform it into a living website. From the most veteran developers all the way to barely just learning HTML, they have challenges for just about anyone, making the platform beginner friendly.
Sounds amazing! What's the catch?
The catch? Well.. the platform is free! You can get a jumpstart on your front-end skills immediately with no catch whatsoever! The platform does indeed have a pro tier where you pay a monthly subscription to gain additional resources and challenges such as Figma/Sketch design files, private solutions, and the premium-only challenges. Do not let this deter you though as a majority of the featured challenges are free, so it's not exactly mandatory to pay to get started on using the platform, but doing so can give you additional perks so it's good to keep that in mind.
How does the platform work?
The platform can be summarized within 4 steps:
- Choose your challenge
- Code the design
- Submit your solution
- Code Review
Choose your challenge
Go through the challenges and select one that interests you(See the challenges here. There are various filters for the challenges to help you comb through the giant list, such as filtering for pro-only tiers and free tiers. Once you find a challenge that you like, press Start Challenge and you can immediately begin; It's as simple as that!
Code the design
Once you start your challenge, you'll download a zip that contains all the project files you need.
They'll usually include professional design files, images needed to recreate the design, markdown files that contains information in regards to the project, and an index.html file to help you get started. Your goal - Build your website and replicate it as close as to the design files as possible!
Submit your solution
Once you finished your project, you can post your solution on the platform for everyone else to see. This allows you, as a developer, to get feedback on your code from other learning developers in the community. This gives you the opportunity to learn how other developers would approach the challenge by giving you their feedback on making your code better. Not only that..
Code Review
Thinking critically and being able to perform a code review is just as important as writing out code. Once you complete and submit a challenge, you gain the opportunity to look at the solutions of other developers who also completed the challenge and provide feedback to them. This gives you insight on how other developers approached the same challenge and deepen your own front-end knowledge. Don't be discouraged on posting or giving feedback back to the community as the community is quite nice and helpful!
How did Frontend Mentor helped me?
Thinking back on my experiences so far, I definitely learned quite a lot of tooling and concepts when it comes to front-end development. Topics like Flexbox, CSS Grid, Clamps, Semantic HTML, etc, became quite important topics that I felt the need to practice each concept multiple times before I felt quite confident in utilizing them.
Unfortunately, I'm not exactly the sharpest tool in the shed when it came to thinking up ideas on the fly but I knew I needed some way to practice the topics on hand before I slither back to tutorial hell because let's be honest: we have all been there before.
Frontend Mentor gave me the opportunity to practice those skills. Instead of racking my brains all day in trying to create something in order to practice something, why not practice by completing real-world challenges that utilizes those skills? Not only would I be able to create something that looks amazing to put on my portfolio/Github, it would also allow me to gain experience and improve any existing skills or apply new skills on my development journey.
If you have ever found yourself in a similar boat as I did, then I can definitely recommend trying out Frontend Mentor for yourself. After all, the best way to learn any concept in general is to apply it and what better way than applying them to create something amazing that is sure to wow anyone?