Frontend Mentor

What it is

Frontend Mentor is a library of coding challenges that mimic a real workflow: you receive a design (as images, or Figma files on Pro), assets, a style guide and a brief listing what users should be able to do. You build it with whatever tools you like, host it and submit your solution. Other developers can review your code and you can review theirs. As of September 2026 the site lists more than 120 challenges across five difficulty levels and a community of over 1.19 million developers. It also offers learning paths that group challenges by skill.

Free versus Pro

According to the Pro page (September 2026):

• Free: free challenges with design images, community feedback and one AI code review per month.
• Pro (monthly or yearly): an AI code review on every solution, private solutions, custom solution domains and early access to community solutions. Monthly Pro includes five Figma design files and two premium challenges a month; yearly Pro makes both unlimited.

Check the site for current prices. The free tier is enough to build a solid portfolio; Pro is mainly worth it if you want to practise working from Figma files, which is how professional teams hand over designs.

The problem it solves

After tutorials, most learners stall on what to build. Inventing a project means inventing the design too, and the result rarely looks like professional work. Being handed a real design removes that and shifts the challenge to implementation: semantic HTML, responsive layout, accessibility and matching a design closely.

Where the value really is

The feedback loop. Building in isolation entrenches habits. Having someone point out that your markup is not semantic, or your layout breaks at tablet width, is how those get fixed. Reviewing other people's solutions teaches even more than receiving reviews.

How to use it well

1. Start at the newbie level even if you feel confident. The first challenges are quick and test fundamentals like responsive images and semantic structure.
2. Before coding, list the components and plan the layout for mobile first.
3. Submit every solution with a short write up of what you learned and where you want feedback.
4. Review at least two other solutions for every one you submit.
5. Move up a level once reviews stop finding basic issues.
6. For your portfolio, choose three or four advanced challenges that use APIs or state, and polish them.

Weak spots

• Community feedback varies in quality; some solutions get little attention.
• Challenges focus on implementation, so they will not teach product thinking or design.
• Many portfolios contain the same popular challenges. Add your own twist (a feature, a backend, tests) so yours stands out.

Best for: beginners and career changers building a front end portfolio, and developers who want realistic practice matching designs.