简体中文
EnglishHow Does Frontend Mentor Work Step by Step?
Updated
Frontend Mentor is a project-based learning platform where you build real frontend and full-stack projects from professional Figma designs and briefs, then submit your work for an AI code review and community feedback. The four-step loop is: choose a challenge, build it with any stack, submit for review, and level up to harder projects. It suits self-directed learners who already know some HTML, CSS, and JavaScript and want portfolio-ready work rather than tutorial follow-alongs; complete beginners may find the early challenges steep without supplemental instruction.
Step 1: Choose your challenge
Pick from 120+ professional projects spread across five difficulty levels. There are two project types:
- Design-file challenges — you build to a provided Figma design, matching layout, spacing, and behavior.
- Product challenges — you make the design decisions yourself, working from a brief rather than a pixel spec.
Start at a level where you can finish without copying a tutorial. The platform's own guidance is to hand-code the early levels to lock in fundamentals.
Step 2: Build it your way
You can use any stack: plain HTML/CSS/JavaScript, React, Node, or a full-stack setup. There is no enforced toolchain, so the challenge tests your judgment, not your ability to follow platform-specific menus.
On advanced and full-stack builds, the platform explicitly encourages practicing AI-assisted development — asking an AI questions, debugging with it, and using it to review code — framed as practice for how real teams work. The stated skill that matters is judging whether AI output is good enough to ship.
Step 3: Submit and get an AI code review
Every solution you submit can receive an AI code review with line-level findings scored against the brief's requirements. Each review feeds a skills profile that fills out as you build, so you can see which areas are strong and which need work.
Access condition: free members get one AI review per month. A review on every submission, plus the continuously updating skills profile, is a Pro feature (see the site's "Unlock Pro" page for current terms). The site markets the core learning experience as free to start; it does not state that Pro is free.
Step 4: Level up and join the community
As your skills profile grows, move to tougher challenges. You can also review other developers' code — the platform positions peer review as a way to sharpen your own reading of code and build connections. The site reports a community of over 1,202,288 developers.
What the loop looks like in practice
| Stage | Your input | What you get back |
|---|---|---|
| Choose | Difficulty level, design-file or product brief | A scoped project with requirements |
| Build | Any stack, hand-coded or AI-assisted | A working solution |
| Submit | Your solution | Line-level AI review scored against the brief; skills profile update |
| Review others | Feedback on peers' code | Sharper code-reading skills, community ties |
Is it right for you?
Good fit if: you want ready-made project ideas instead of hunting for them, you need portfolio pieces that demonstrate production-ready code, and you're comfortable learning from a brief with limited hand-holding.
Less good fit if: you need structured lessons and explanations before building, or you want unlimited AI reviews without paying — the free tier caps reviews at one per month.
A practical way to test it: pick one challenge at the lowest difficulty, build it in a stack you already know, and submit. If the review surfaces gaps you can act on, the loop is working for you.