Landing Page Intro Coding Challenge | Design by Mubin ul haq Vhora

Supercharge your front-end skills by building real projects

When trying to improve your coding ability, it is always a good idea to use many sources for learning and to challenge yourself using a wide array of techniques. For front-end development, I believe that one of the most important methods of training is to actually build projects that mimic real-world scenarios.

This was my main reason for adding front-end coding challenges to Frontend Mentor. There are plenty of websites out there that test you in very specific, logic-based challenges. FizzBuzz anyone?! That is great for building one’s problem-solving ability. But for front-end developers, I feel that there is another crucial training technique that often isn’t given the attention it deserves: actually building a project to a design. No step-by-step guides telling you what elements to put where. No hand-holding. Just a design file, some starter code with all assets required, a brief and a basic front-end style guide to get you started.

Blood Donation Landing Page Challenge | Design by Clément Marie

Since launching the site a few weeks ago, I haven’t been able to stop thinking about the type of challenges we could have on Frontend Mentor. Each design could have interesting front-end challenges baked in, to test developers along the way. We could have mobile, tablet and desktop designs and emulate the hand-off between designer and developer as closely as possible. There could be designs ranging in complexity from multi-page sites to individual components.

Pricing Tiers Coding Challenge | Design by Oleg Frolov

I don’t only believe this could be useful for individuals wanting to improve their skills or add some projects to their portfolio. I also feel these challenges could be used by tech companies and agencies as a training tool for their junior developers.

As an instructor at General Assembly I also see plenty of developers go through code tests for job roles where the brief looks something similar to this:

Here are some docs for an API that is available for you to pull data from. Now build out a [insert relevant JS framework here] front-end that displays that data. There are no designs, so we are looking for you to build it out in a layout of your choosing. Unit tests are a bonus, etc etc…

Now, I think that this is a perfectly reasonable coding test to screen candidates. But I can’t help but feel that it’s missing a huge chunk of the equation. At what point would anyone ever say to a front-end developer “build this out, but do it without designs”? Surely a more well-rounded test would be to also supply precise designs, as would be the case in a normal day-to-day environment. Then also factor in how closely they got to the design as part of the hiring process.

Next Steps

It’s still very very early days for Frontend Mentor. I built and launched the site within a few days, so I want to do some work on how the site looks. As you can tell from the how it looks I’m definitely not a designer and I had no designs to work to (ironic I know). So I’d like to make the site look the part now that I’m feeling confident about moving forward with the concept.

I also want to add some more complex designs to the site, to have a wider range of difficulties available for the challenges. I would like Frontend Mentor to be a place where people of all abilities will find value in the challenges that are offered.

These are just a couple of things that you should see change within the next month or so. I’m also working on refining the overall idea and figuring out the best model to move forward with.

Thanks for reading

If you have any ideas yourself or any feedback at all about the overall concept I’d love to hear from you. I’m on Twitter, so feel free to say high to @frontendmentor.

If you haven’t already, don’t forget to visit Frontend Mentor and maybe even attempt a challenge!

Front-end/JavaScript developer who loves to build useful products. Creator of Frontend Mentor (https://www.frontendmentor.io).