Learning paths

Our learning paths help you improve your front-end skills step by step. Each path covers a different topic, guiding you through essential front-end development topics to become a skilled developer.

⚛️
🎨
📄
💅
1NEWBIE

Getting started on Frontend Mentor

Take your first steps as a Frontend Mentor. This path will help you get familiar with our platform and give you experience working with designs and building small projects.

8 challenges
Level 1

Learning outcomes:

  • Understand how to work with design files
  • Learn responsive design fundamentals
  • +2 more outcomes
🚀
Getting started
2JUNIOR

Building responsive layouts

A crucial part of modern front-end development is making web pages look good on all screen sizes. The challenges in this path are designed to help you get to grips with making layouts that work across all devices.

6 challenges
Level 2

Learning outcomes:

  • Master CSS Grid and Flexbox
  • Understand mobile-first design
  • +2 more outcomes
📱
Building responsive
2JUNIOR

JavaScript fundamentals

Adding interactivity to our web pages is a key skill of the front-end developer. The challenges in this path are designed to guide you through handling common user interactions with JavaScript.

10 challenges
Level 2

Learning outcomes:

  • Handle user interactions
  • Manipulate the DOM
  • +2 more outcomes
📱
JavaScript fundamentals
3INTERMEDIATE

Introduction to web accessibility

Designing and building accessible websites is crucial for front-end developers. This path introduces you to key concepts while providing challenges with specific accessibility considerations in web design.

5 challenges
Level 3

Learning outcomes:

  • Understand WCAG guidelines
  • Implement keyboard navigation
  • +2 more outcomes
Introduction to
4ADVANCED

Advanced CSS techniques

As you start building more complex projects, it helps to use more advanced CSS techniques. The challenges in this path will help you practice more difficult challenges to help you level up your CSS skills.

7 challenges
Level 4

Learning outcomes:

  • Master CSS animations
  • Use CSS custom properties effectively
  • +2 more outcomes
Advanced CSS
4ADVANCED

JavaScript frameworks and libraries

Using a JavaScript framework can provide many benefits. In this path, we outline core concepts and provide a sequence of challenges to help you enhance your knowledge and gain hands-on experience with your chosen framework.

12 challenges
Level 4

Learning outcomes:

  • Understand component architecture
  • Learn state management
  • +2 more outcomes
JavaScript frameworks
4ADVANCED

Introduction to front-end testing

Testing is a crucial skill for developers working in a production environment. This path outlines how to test your applications to increase confidence in your code and ensure it functions as expected.

8 challenges
Level 4

Learning outcomes:

  • Write unit tests
  • Implement integration tests
  • +2 more outcomes
Introduction to
3INTERMEDIATE

Getting job ready

There's a lot to stand out in the job market. This path gives you the tools you need to put your best foot forward and land your first frontend role.

6 challenges
Level 3

Learning outcomes:

  • Build a professional portfolio
  • Prepare for technical interviews
  • +2 more outcomes
Getting job