The classic CSS blog — home of the widely cited Flexbox and Grid guides
Frontend Mentor
Real design challenges to sharpen your front-end skills — well suited for portfolio-worthy practice
Content updated · 2026-09-07
What is it · 它是什么
What is Frontend Mentor?
Frontend Mentor is a challenge platform for practicing front-end against real designs: it hands you design files (source files on higher tiers), you rebuild them into working pages with whatever stack you like, then submit to the community for feedback. It fills the gap between tutorials and real work — knowing the syntax but having no design to build.
How to use · 怎么用
How to use Frontend Mentor
- Start with the free beginner challenges and reproduce the design faithfully — no improvising, because fidelity is the training goal.
- Browse the Solutions area for other people's takes on the same brief; comparing approaches teaches more than ten more tutorials.
- Pick tagged advanced challenges to practice full workflows: responsive behavior, form validation, API integration.
Key features · 核心特点
Key features of Frontend Mentor
- Challenges graded from beginner to advanced
- Your stack, your choice — same as real work
- Community feedback and reference solutions show you where the gaps are
- Basic challenges are free, while advanced ones and enhanced resources sit behind a subscription
Related sites
A free coding education platform — learn by building projects, with free certifications along each track
The Modern JavaScript Tutorial — a systematic free course from basics to advanced (Chinese translation available)