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
Previous Post | February 6, 2021
Image Gallery with CSS Grid
I built an image gallery with CSS grid and a lightbox. CSS Grid is great fun.