During the summer I had an idea that I thought would help people improve their front-end skills. There are so many incredible sites and services out there for helping people learn to code. Companies like , where I teach in London, and sites like do an amazing job at teaching people from the ground up. General Assembly freeCodeCamp But, I wanted to create a resource for people who already knew some HTML, CSS, and . Not a step-by-step course, or code along, but a hands-off, project-based resource that emulates a real-life workflow as much as possible. JavaScript So, I’d like to introduce you to . Frontend Mentor I’ve had a mini-site up for a few months to test the idea and get feedback. But now it’s full-steam ahead with a new brand and full re- of the site. design Challenges on Frontend Mentor For the challenges, I’ve created fictional brands to build the designs around. This helps each challenge mimic a real-life workflow. It’s like building a site for an actual client! The challenges include mobile and desktop designs, starter code (including optimised assets). A front-end style guide is also provided, which includes colours, fonts etc. Here’s a screenshot of the desktop preview for one of the challenges: And the mobile preview: If you would like to take a challenge, simply download a starter code from the site and you’re away. I’ve decided to keep the starter code as downloads, instead of using a browser-based editor. This is because I want people to use the text editor and tools that they’re most comfortable with. Plans for the future I’m thinking about the different types of challenges to offer on Frontend Mentor. I like the thought of having smaller components for quicker challenges and even multi-page sites for people who want a real challenge. I’ll be adding some challenges that involve a bit of JavaScript as well. One of my goals is to offer ‘Bring Your Own Frontend’ (BYOF) challenges. For these challenges, Frontend Mentor would provide the designs and a documented public API. People can then choose which JavaScript library/framework to practice with. Please give your feedback and share it around This is the absolute beginning for Frontend Mentor, so please do let me know your thoughts. There are so many different directions I could take this in and I’d love to hear your ideas. Feel free to join the Slack community on the site as well to get help on the challenges and to help others out. Also, for the latest updates. follow Frontend Mentor (@frontendmentor) on Twitter I look forward to hearing everyone’s feedback! Please share the site with anyone who you think it could help 🙌

Assembly

Slack

Twitter

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Introducing Frontend Mentor — Supercharge your front-end skills by building real projects

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps