Skip to content
Day 69: new resources are added every day. See what's new
Best Productivity ResourcesBy Shushant LakhyaniVerified creator

Course

Frontend Mentor

Build real-world front-end projects from professional designs.

Visit Frontend Mentor4.7

  • Rating

    4.7 / 5

  • Pricing

    Freemium

  • Difficulty

    Intermediate

  • Works on

    Web

Built with love by Shushant Lakhyani. Building bestproductivityresources.com

Free: 1,100+ ways people make money onlineFree: 399+ ways to make money online

What is Frontend Mentor?

Frontend Mentor gives you realistic website and app challenges with design files, so you can practise HTML, CSS and JavaScript by building real projects and getting feedback from the community. Many challenges are free, with one AI code review a month, while Pro adds premium projects, Figma files and more reviews.

Pros: what Frontend Mentor does well

  • Realistic project briefs
  • Builds a portfolio as you learn
  • Helpful community feedback

Cons: where it falls short

  • Design files and premium projects need Pro
  • Only one free AI review a month

Who Frontend Mentor is for

Aspiring front-end developers who learn best by building real projects.

Who can skip it

Complete beginners who have not yet learned basic HTML and CSS.

Frontend Mentor alternatives

Not sold on Frontend Mentor? These do a similar job, and each card says what it has in common.

All Learning resources

Cybersecurity Projects

Focus: cybersecurity, projects and pentesting. Shares portfolio with Frontend Mentor. Free (Frontend Mentor: Freemium). Rated 4.8 (Frontend Mentor: 4.7).

CourseFreeWeb
4.8Visit

Flexbox Froggy

Focus: flexbox, coding game and beginners. Shares css with Frontend Mentor. A web app, not a course. Free (Frontend Mentor: Freemium). Rated 4.8 (Frontend Mentor: 4.7).

Web AppFreeWeb
4.8Visit

MDN Web Docs

Focus: web development, documentation and javascript. Shares css with Frontend Mentor. A website, not a course. Free (Frontend Mentor: Freemium). Rated 4.8 (Frontend Mentor: 4.7).

WebsiteFreeWeb
4.8Visit

Grid Garden

Focus: grid, game and web design. Shares css with Frontend Mentor. A web app, not a course. Free (Frontend Mentor: Freemium). Same 4.7 rating.

Web AppFreeWeb
4.7Visit

web.dev

Focus: web development, performance and accessibility. Shares css with Frontend Mentor. A website, not a course. Free (Frontend Mentor: Freemium). Same 4.7 rating.

WebsiteFreeWeb
4.7Visit

Bencho

Focus: UI components, React and micro-interactions. Shares frontend with Frontend Mentor. A website, not a course. Rated 4.6 (Frontend Mentor: 4.7).

WebsiteFree planWeb
4.6Visit

Free alternatives to Frontend Mentor

Want to spend nothing? These free picks cover similar ground.

Codrops

Focus: web design, tutorials and animation. Shares css with Frontend Mentor. A blog, not a course. Free (Frontend Mentor: Freemium). Rated 4.6 (Frontend Mentor: 4.7).

BlogFreeWeb
4.6Visit

CSSBattle

Focus: coding game, challenges and practice. Shares css with Frontend Mentor. A web app, not a course. Free (Frontend Mentor: Freemium). Rated 4.6 (Frontend Mentor: 4.7).

Web AppFreeWeb
4.6Visit

Wakamai Fondue

Focus: fonts, opentype and typography. Shares css with Frontend Mentor. A web app, not a course. Free (Frontend Mentor: Freemium). Rated 4.6 (Frontend Mentor: 4.7).

Web AppFreeWeb
4.6Visit

Nuxt Charts

Focus: vue, nuxt and charts. Shares frontend with Frontend Mentor. A website, not a course. Free (Frontend Mentor: Freemium). Rated 4.5 (Frontend Mentor: 4.7).

WebsiteFreeWeb
4.5Visit

uncoverLAB

Focus: figma, ui design and website components. Shares frontend with Frontend Mentor. A website, not a course. Free (Frontend Mentor: Freemium). Rated 4.5 (Frontend Mentor: 4.7).

WebsiteFreeWeb
4.5Visit

Dropfolio

Focus: showcase, creative work and minimal. Shares portfolio with Frontend Mentor. A website, not a course. Free (Frontend Mentor: Freemium). Rated 4.4 (Frontend Mentor: 4.7).

WebsiteFreeWeb
4.4Visit
Are you the maker of Frontend Mentor?Get a free Featured badge for your site, a share image and ready-to-paste posts. No sign-up.

Free Notion database

1,100+ ways people are making money online

Real online businesses, creators and projects, broken down by how they make money: apps, online stores, AI tools and more. Free on Gumroad.

Get the free database

Free Notion database

399+ ways to make money online

Hundreds of online income methods in one place, so you can compare options and pick one to try. Free on Gumroad.

Get the free list

For research and ideas only. Results vary and nothing here is a promise of income. See our Disclaimer.

Weekly newsletter

Everything new, every Monday.

One short email every Monday with everything shipped that week: new free tools and websites, new guides, new free browser tools and what's new in my free Gumroad libraries, plus how the site is growing. Free, and you can unsubscribe anytime.

Join the newsletter

You sign up on Gumroad, which stores your email to send the newsletter. See our Privacy Policy.