February 23, 2021

Frontend Mentor - Coding Challenges

Frontend Mentor is a series of coding challenges for front-end developers.

I've done a lot of coding challenges, ranging from the dead-simple to very complex. Things like #100 days of Code, DailyUI, 100 Days of CSS Challenges, and more are great, but something I've always found that has been lacking is a real sense of community and an in-depth process. Most of these challenges don't have a "log in" - a way to track your progress of the challenges in the ecosystem, see all the solutions in one place, or interact with other people completing these challenges on the challenge platform.

Frontend Mentor seems to cover all of these bases and it requires solutions to be created in a real environment - not just a Github Gist or quick pen thrown on CodePen. I'm not saying those are bad ways to do it, just that the style feel much more disposable. Frontend Mentor requires solutions to be submitted via Github and also requires that your solution lives somewhere on the web that isn't just a pen or fiddle. I think this makes the solutions feel much more substantial - at least for me. The thing that really pulled me in, though, was the "points" system. Users get points for completing challenges, commenting on solutions, and upvoting content. Careful with that downvote, though, as it'll remove points from your tally. I also really like that feedback can be requested and that fancy slider that does a side-by-side comparison of the design mockup and finished product. Oh, and the way challenges are structured.

The Abstract Challenge

Challenges start when the user selects the challenge on the Frontend Mentor website. Once signed up for a challenge, the user can view the requirements and download starter files. Starter files consist of the design mockups and any static assets (like images used in the mockup). Starter files also contain a readme and a style guide, which starts you off with the colors used in the design, fonts, and design breakpoints (which are always wild, IMO). Once the user gets the challenge all coded up, they commit the code to a GitHub repo and publish it. To complete the challenge, the user submits the completed code by way of the repo URL, the live site URL, and any comments.

What I've Done

I started in mid-February of 2021 and have since completed 5 challenges. I'm not sold on getting the "pro" version yet so I'm working with smaller challenges for the time being. I'm excited to complete more, though! Listed below are links to the Frontend Mentor solutions pages for each challenge I've completed.


March 8th, 2021

Single Price Grid Component

February 26th, 2021

Social Proof Section

February 23, 2021


February 16, 2021

Four Card Feature Section

February 7th, 2021