Improve your coding skills by building realistic projects

Our professionally designed challenges help you gain hands-on experience writing HTML, CSS, and JavaScript. We create the designs so you can focus on the code and see your skills skyrocket!

B
C
D
E
F
G
H
I

Join 1,064,925 developers building projects, reviewing code, and helping each other improve.

"
"I love how Frontend Mentor challenges developers to think about responsive design and accessibility. The community is incredibly supportive and the challenges are well thought out."
KP
Kevin Powell
CSS Evangelist
"
"Frontend Mentor has been instrumental in helping me improve my CSS skills. The challenges are realistic and the community feedback is invaluable for growth."
JC
Jessica Chan
Software Engineer

Escape tutorial Hell

Stop watching tutorials and start building! Our challenges give you the designs and requirements. You write the code. It's that simple.

  • PREMIUM

    Mood tracking app

    • HTML
    • CSS
    • JavaScript
    3INTERMEDIATE

    Build a mood tracking app to help users log their daily feelings and track their emotional wellbeing over time.

  • PREMIUM

    Browser extension manager

    • React
    • TypeScript
    • CSS
    4ADVANCED

    Create a browser extension manager interface with the ability to enable, disable, and configure extensions.

  • FREE

    Personal blog

    • HTML
    • CSS
    • JavaScript
    2JUNIOR

    Build a personal blog with article listing, individual article pages, and a responsive design.

Why choose Frontend Mentor?

Our challenges are designed to help you improve your skills in a fun, realistic way.

😈

Build portfolio-worthy projects

Practice with professional designs that you can add to your portfolio. Show potential employers what you can build.

🤩

Gain real-world experience

Our challenges simulate real-world projects. You'll work with designs, requirements, and constraints just like in a real job.

🚀

Practice new tools

Try out new frameworks, libraries, and tools on projects that matter. Build your skills with the latest technologies.

🛠️

Improve your workflow

Learn to work with design files, manage your code with Git, and deploy your projects. Build professional development habits.

How it works

Our simple 4-step process helps you build real projects and improve your skills

1

Start challenge

Download the starter files and get set up

2

Download assets

Get all the design files and assets you need

3

Submit solution

Upload your solution and get feedback

4

Review solutions

Learn from others and improve your skills

PREMIUM

Take your skills to the next level with Pro

Unlock premium challenges, design files, and exclusive features to accelerate your learning journey.

Premium challenges

Access to advanced multi-page projects

Design system access

Professional Figma files and design tokens

Exclusive community

Connect with other Pro members

Priority support

Get help faster from our team

Frontend Mentor Pro

Premium challenges and features

$8
per month
Premium challenges
Figma design files
Solution videos
Exclusive Discord access
🚀
💎

Join 1,064,870 people building portfolio-worthy projects

Our highly supportive, positive community is here to help you improve your skills. We all try to help each other out wherever possible. We'd love to welcome you to our community!

"Frontend Mentor helped me land my first developer job. The portfolio projects I built here were exactly what employers were looking for."
A
Alex Rivera
@alexdev
"
"The community here is amazing. Everyone is so helpful and supportive. I've learned more here than in any bootcamp."
S
Sarah Chen
@sarahcodes
"
"The challenges are perfectly designed to teach real-world skills. I use the techniques I learned here every day at work."
M
Mike Johnson
@mikejs
"

FAQs

Frequently asked questions about Frontend Mentor

Frontend Mentor is a platform that provides real-world coding challenges to help you improve your frontend development skills. We provide designs and requirements, and you build the projects using whatever tools you prefer.
Simply choose a challenge, download the starter files, and start coding! You can submit your solution to get feedback from the community and see how others approached the same challenge.
Yes! We have many free challenges available. We also offer a Pro subscription that gives you access to premium challenges, Figma design files, and other exclusive features.
We have challenges for all skill levels, from complete beginners to experienced developers. Each challenge is labeled with a difficulty level to help you choose appropriate projects.
Absolutely! You can use any tools, frameworks, or libraries you want. The goal is to practice and improve your skills using the technologies you're interested in.
Our Discord community is the best place to get help. Thousands of developers are there to help answer questions and provide guidance when you're stuck on a challenge.

Are you looking to hire talented, passionate developers?

Our Hiring Platform helps you connect with our diverse community of talented early-career developers. Stop wading through hundreds of resumes and get chatting to skilled developers in minutes.

S
Sarah Chen
React Developer
ReactNode.js
M
Mike Johnson
Frontend Dev
Vue.jsCSS
A
Alex Rivera
Full Stack
AngularPython
L
Lisa Park
UI/UX Dev
FigmaTailwind
1M+
Developers
95%
Success Rate