SHARE
After finishing your first coding course, you’re now stuck in an endless playlist of YouTube tutorials trying to apply your newfound skills. Welcome to tutorial hell! Build your frontend development skills and breakout of tutorial hell with high quality website design mockups by Frontend Mentor.
Frontend Mentor offers professional design mockup for you to code using your Frontend development skills. A Pro subscription unlocks more advanced designs and an experience closer to a professional frontend developer workflow. With or without the subscription, you can gain real web development experience, try new frameworks, and build a professional portfolio with each challenge. As a result, I often come back to Frontend Mentor to continue building my skills and confidence as a freelance web developer.
Frontend Mentor can be broken down into two parts: challenges (design mockups) and solutions (the community).
Frontend Mentor Challenges
There are over two dozen free challenges to tackle ranging in difficulty from newbie to guru. Most templates are designed with HTML, CSS, and JavaScript in mind. However, if you want to use other frameworks and languages, there’s nothing stopping you. For example, you can code a design using HTML and CSS, then try it again using a framework like SASS.
Once you choose a challenge, you can download its starter files that include:
- image files for desktop and mobile views
- an HTML file with the challenge text and a boilerplate HTML header
- a barebones “style guide” of font styles and colors
- README templates for your Github repo
- Pro subscription only: access to Figma and Sketch files
Without the Figma or Sketch design files you’ll have to eye-ball designs. While this does take longer, it’s a good skill to build.
Frontend Mentor Solutions
When you’ve finished a challenge, you can submit a link to your solution and repository of your code. Consequently, both are essential to getting community feedback. First, the solution’s link is used to showcase a screenshot of your work next to the challenge design for comparison. Additionally, the repository link lets others view your code to give feedback.
The solutions section is also a great place for feedback on your code. In my experience, the more specific your ask for feedback, the better. Feedback I’ve received has been both thoughtful and helpful. Frontend Mentor also has a dedicated and lively Slack channel if you need help on a challenge.
After submitting a challenge, you can see the solutions from others who did the same challenge. This area is full of inspiring code and clever spins other users have put on their solutions. One I enjoyed was this creative sunnyside agency solution. It’s little touches like this that turns a template used by thousands into a portfolio piece that is uniquely yours.
Home & Dashboard
Frontend Mentor is going through a redesign as I write this review. Two newly added sections are Home and Dashboard. Home is a newsfeed of other’s submissions to challenges you’ve also completed. It’s an encouraging starting point for giving feedback to others based on your own experience with a challenge. Let any experienced developer tell it, this is also a great way to build your skills.
The Dashboard is an overview of your Frontend Mentor account. Here you can see your credits, challenges (in progress and completed), followers and following, and bookmarked solutions by others. The only thing missing is an area for solutions you liked, but didn’t bookmark.
Get Out Of Tutorial Hell
If you’re serious about getting out of the proverbial tutorial hell, Frontend Mentor should be your first stop. It’s a great resource to turn theory into practice and even land you a new client. Mine have. Additionally, even experienced developers can benefit from using Frontend Mentor’s advanced designs as portfolio pieces.
Happy coding!
