Supercharge your front-end skills by building real projects
Improve your HTML, CSS and JavaScript while using a real-world workflow. Our challenges provide designs, starter code, project brief and a front-end style guide. The rest is up to you!
Browse Challenges
How it works
Download starter
Each starter code has everything you need to get up and running. Designs, colors, fonts, it’s all there. There’s also a readme to help get you started.
Code the designs
Now it’s time to build! Use any text editor you like and code it any way you want. You can also join our Slack community to get support from others.
Share your solution
Now that you’ve built your site, it’s time to share it! We can all learn from each other, so share in our community and start the conversation.
Challenges
- beginner
- HTML,
- CSS
Huddle landing page with single column layout
This challenge is perfect for beginners. The content is mostly in a single column layout, with some complexity in the footer.
View challenge - beginner
- HTML,
- CSS
Huddle landing page with split benefits section
This challenge is great if you're just starting to build more complex pages. It's mostly a single column layout, but with a couple of more challenging areas.
View challenge - beginner
- HTML,
- CSS
Fylo landing page with features grid section
Test your layout skills on this challenge with a couple of tricky areas. Both the features section and the footer will need some planning to find the best solution.
View challenge
Resources
Want some amazing front-end resources? Of course you do. Check out our curated list of (mostly) free resources for HTML, CSS, JavaScript and more.
- JS
Superhero.js
Some resource-ception here with Superhero.js. The site has an amazing collection of articles, videos and presentations on all things JavaScript. Definitely worth checking out!Visit website- general
Front-End Checklist
Don't launch a site without running through this front-end checklist. It's a crucial resource to make sure you've checked all the necessary boxes before deployment.Visit website- HTML,
- CSS,
- JS
HTML Cheat Sheet
Although called HTML Cheat Sheet, this site is also a great resource for CSS and JavaScript. Perfect for when you're getting started as a front-end developer.Visit website
Subscribe to the Frontend Mentor newsletter
Stay up-to-date with new challenges, blog posts and general front-end goodness.
FAQs
Is there anywhere to post my solution code?
At the moment there isn't a specific place to post solution code. However, we are currently building a platform where this will be possible. In the meantime, please tweet us @frontendmentor with your Github URL and we'll retweet and have a quick peek at your code.
I need help. Is there anywhere I can get support?
Of course! Join our Slack community (below) and you can post questions and also help others out.
Are the challenges free?
Yes! All of the challenges are completely free. Simply download the starter code from the challenge page and you're up and running!
Who started Frontend Mentor?
Frontend Mentor was started by Matt Studdert, who is a Front-end/JavaScript developer and web development instructor. He currently teaches at General Assembly in London, UK.
Join our Slack community
Talk to others taking the challenges, get help with your code, discuss features. Chat about everything front-end!