Frontend

Feature-Sliced Design

Продвинутая Frontend архитектура для React, Vue, Next, Nuxt, Angular и Svelte приложений

Обновлено 06 октября 2025 г.
ЗвездаЗвездаЗвездаЗвезда
Рейтинг 4.6на основании отзывов
Иконка аватараИконка аватараИконка аватараИконка аватараИконка аватара
40,000учеников
Иконка гарантии
Легкий возврат — 30 дней

Вернем 100% стоимости без объяснения причин — стартуйте без рисков!

изображение курса
кнопка запустить видеоО курсе
Цена от:3 999 ₽6 990 ₽
При покупке до 10.01.2026
Гарантия возврата денег — 30 дней
Неограниченный доступ
Сертификат об окончании
Знания

Чему вы научитесь?

После прохождения курса вы сможете:
Создавать удобную и расширяемую структуру проекта
Писать легкопереиспользуемый код
Разделять ответственность между компонентами
Мигрировать проекты на FSD
Избегать циклические зависимости
Применять FSD в проектах на любом фреймворке
Правильно разбивать проект на слои
Верно определять доменные области проекта
Использовать инструменты FSD для поддержки структуры

Минимальные требования: Знание любого frontend фреймворка

94урокавидео с конспектами
5 упражненийдля закрепления на практике
67 тестовдля проверки знаний
Технологии
FSDReactTypeScriptNext.jsVueNuxtAngularSvelte
О курсе

Что в курсе?

Курс подойдёт frontend разработчикам любого уровня подготовки. При этом мы на практике разберём как можно работать с FSD не только с React, но и Next, Vue, Nuxt, Angular и даже Svelte.

Мы начнём изучение разбора того, что такое FSD и как он помогает лучше структурировать наши проекты, что такое слои, слайсы и сегменты. Далее мы будем разбирать каждый слой, применяя на практике знания и создавая скелет для большого проекта.

Мы разберём инструменты, которые позволят вам удобнее и быстрее структурировать ваши проекты по FSD и контролировать изменения. Мы напрямую на макетах будем размечать различные слои, чтобы потренироваться в декомпозиции. А уже под конец курса мы посмотрим как можно использовать FSD с различными фреймворками, как Next, Vue, Nuxt, Angular и Svelte. Курс будет максимально практическим, так как изучив каждый из слоев или сегментов мы сразу же будем применять их практике, создавая приложение.

Иконка гарантии
Легкий возврат — 30 дней

Вернем 100% стоимости без объяснения причин — стартуйте без рисков!

certificate
Ваш сертификат по окончанию курса
Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 10 января 2026
Возможности обучения

Обучение в PurpleSchool

Собственная платформа

Интеграция с GitHub

Интеграция с GitHub

Все проекты для домашних заданий проверяются напрямую из GitHub

Поддержка всех устройств

Поддержка всех устройств

Обучайтесь в любом месте с десктоп и мобильных устройств

Подсветка синтаксиса

Подсветка синтаксиса

Не теряйтесь в коде, пользуйтесь привычным форматированием синтаксиса

Проверенные форматы

Мини-лекции

Мини-лекции

Короткие видео (по ~5 минут) позволяют обучаться даже тогда, когда времени на полноценное обучение не хватает

Упражнения

Упражнения

Выполняйте задачи, а затем сравнивайте с верным процессом решения в видео для самопроверки

Конспекты

Конспекты

Каждая лекция сопровождается детальными конспектами для удобного поиска информации

Домашние задания

Домашние задания

Осваивайте материал на реальных задачах, которые потом пригодятся в работе

Тесты

Тесты

Закрепляйте знания и находите слабые места с помощью точечных тестов по темам курса

Тщательно следим за актуальностью технологий и регулярно обновляем курсы

AI и тренажёры

Livecode-тренажёр

Livecode-тренажёр

Решайте мини-задачи по темам курса и получайте мгновенный разбор ошибок в коде от AI-наставника

Mock-тренажёр

Mock-тренажёр

Практикуйтесь в прохождении собеседований и находите ошибки, которые мешают пройти на нужную вакансию

Проверка домашних заданий

Проверка домашних заданий

Отправляйте Pull Request наставнику и получайте детальный разбор с учётом лучших практик

AI-наставник обучен на реальных проектах, практике студентов, официальной документации и материалах курса

Реальная практика в студии

Проектная команда

Проектная команда

Подключитесь в коллектив и пройдёте проект плечом к плечу

Рекомендательное письмо

Рекомендательное письмо

В случае успешной стажировки получите индивидуальное рекомендательное письмо от основателя студии PurpleCode

Реальные задачи

Реальные задачи

Реализуете действующий функционал, а не задачки из учебников

Еженедельное планирование

Еженедельное планирование

Освоите практики Agile, научитесь декомпозировать задачи, оценивать сроки, анализировать ретроспективу

Практикующие разработчики и HR

Проверка домашних заданий

Проверка домашних заданий

Получайте детальную обратную связь от разработчиков из ведущих компаний

Еженедельные консультации

Еженедельные консультации

Разбирайтесь с трудностями и вопросами на еженедельных встречах с наставником

Проверка резюме и мок

Проверка резюме и мок

Повышайте софтскиллы и проходите на вакансии выше уровнем

Гарантия: если в течение 30 дней после покупки поймёте, что курс не нравится и не прошли более 50% курса — вернём деньги без лишних вопросов.

Модули курса

План курса

Курс построен таким образом, чтобы доносить материал от простого к сложному. Ниже вы можете ознакомиться с планом курса и посмотреть часть открытых лекций по кнопке проигрывателя.

кнопка запустить видеоПример лекции
1.1 Почему FSD
5 мин
1.2 Как устроен курс
5 мин
1.3 Обзор проекта
2 мин
1.4 Проект домашних заданий
2 мин
1.5 AI и тренажёры
7 мин
1.6 Практика на проекте
4 мин
2.1 Настройка окружения
2 мин
2.2 Настройка VSCode
2 мин
2.3 Установка Node
4 мин
2.4 О работе NVM
10 мин
2.5 Figma компоненты
4 мин
2.6 Домашнее задание AI
18 мин
3.1 Что такое FSD
6 мин
3.2 Layers
10 мин
3.3 Slices
13 мин
3.4 Segments
7 мин
3.5 Тест - Введение в FSD
5 мин
С AI и тренажёрами3.6 Занятие - Введение в FSD
15 мин
С AI и тренажёрами3.7 Домашнее задание - Введение в FDS
60 мин
4.1 О слое App
4 мин
4.2 Старт проекта
6 мин
4.3 Подготовка слоя App
7 мин
4.4 Обзор проекта
5 мин
4.5 О слое Pages
3 мин
4.6 Структура роутинга
5 мин
4.7 Выделение slice
8 мин
4.8 Создание первой страницы
12 мин
4.9 Добавление стилей
6 мин
4.10 Layout
6 мин
4.11 Тест - Pages и App
5 мин
С AI и тренажёрами4.12 Занятие - Pages и App
15 мин
С AI и тренажёрами4.13 Домашнее задание - Pages и App
60 мин
5.1 О слое
8 мин
5.2 Константы маршрутов
8 мин
5.3 Конфигурации
6 мин
5.4 API клиент
7 мин
5.5 Библиотека
5 мин
5.6 UI компоненты
7 мин
5.7 Импорты в Shared
3 мин
5.8 Что ниже Shared
8 мин
5.9 Тест - Shared
5 мин
С AI и тренажёрами5.10 Занятие - Shared
15 мин
С AI и тренажёрами5.11 Домашнее задание - Shared
60 мин
6.1 Steiger
7 мин
6.2 Path Alias
4 мин
6.3 Tree-shaking
5 мин
6.4 CLI
5 мин
6.5 Расширения
3 мин
6.6 Тест - Инструменты FSD
5 мин
С AI и тренажёрами6.7 Занятие - Инструменты FSD
15 мин
С AI и тренажёрами6.8 Домашнее задание - Инструменты FSD
60 мин
7.1 О слое
5 мин
7.2 Создание slices
4 мин
7.3 State managment
11 мин
7.4 API
9 мин
7.5 UI компоненты
8 мин
7.6 Упражнение - Выделение entities
8 мин
7.7 Кросс-импорты
5 мин
7.8 Тест - Entities
5 мин
С AI и тренажёрами7.9 Занятие - Entities
15 мин
С AI и тренажёрами7.10 Домашнее задание - Entities
60 мин
8.1 О слое
5 мин
8.2 Примеры feature
10 мин
8.3 Специфичность в СSS
5 мин
8.4 Упражнение - Выделение features
9 мин
8.5 Упражнение - Разметка страниц
10 мин
8.6 Тест - Features
5 мин
С AI и тренажёрами8.7 Занятие - Features
15 мин
С AI и тренажёрами8.8 Домашнее задание - Features
60 мин
9.1 О слое
3 мин
9.2 Примеры Widget
7 мин
9.3 Processes
3 мин
9.4 Упражнение - Выделение виджетов
7 мин
9.5 Упражнение - Финал декомпозиции
12 мин
9.6 Тест - Widgets
5 мин
С AI и тренажёрами9.7 Занятие - Widgets
15 мин
С AI и тренажёрами9.8 Домашнее задание - Widgets
60 мин
10.1 Next
8 мин
10.2 Vue
5 мин
10.3 Nuxt
7 мин
10.4 Angular
6 мин
10.5 Sveltkit
5 мин
10.6 Миграция проектов
5 мин
10.7 Тест - Работа с фреймворками
5 мин
10.8 Отзыв о курсе
5 мин
11.1 Куда дальше
1 мин
11.2 Финальное тестирование
20 мин
С AI и тренажёрами11.3 Собеседование с AI наставником
30 мин
11.4 Рекомендуемый курс
1 мин
Со стажировкой в студии12.1 Основы Scrum
19 мин
Со стажировкой в студии12.2 Старт задачи
11 мин
Со стажировкой в студии12.3 Выполнение задачи
11 мин
Со стажировкой в студии12.4 Код ревью
8 мин
Со стажировкой в студии12.5 Старт работы
60 мин
О платформе

Обзор платформы

Наша платформа создана так, чтобы вы могли не просто прослушать лекции, а действительно освоить материал. Здесь вы сможете пройти видеолекции, потренироваться на интерактивных тренажёрах, выполнить домашние задания, поработать с AI-наставником и проверить свои знания с помощью тестов. Всё это помогает закрепить теорию на практике и быстрее достичь результата.

Видео
Тренажёры
Домашние задания
Занятия с AI
Тесты
Командный проект
Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 10 января 2026
О проектах

Что будем писать?

Самостоятельный

Сервис сравнения компаний

Сервис сравнения компаний

Сервис с категориями, авторизацией, подборками сравнения компаний, отзывами, правками к статье и сообществом.

О PurpleSchool

Наши проекты

Антон Ларичев

Антон Ларичев

Основатель PurpleCode, школы обучения разработки PurpleSchool. 14 лет опыта разработки, более 10 лет управления ИТ проектами и интернет маркетинга.

PurpleSchool

Школа PurpleSchool

Направления
40 000

учеников по всему миру

30 дней

гарантия возврата денег

90%

студентов рекомендуют курсы

4.8
ЗвездаЗвездаЗвездаЗвездаЗвезда
4.8
ЗвездаЗвездаЗвездаЗвездаЗвезда
4.7
ЗвездаЗвездаЗвездаЗвездаЗвезда

Студия PurpleCode

Направления
50+

проектов за последний год

15

лет опыта

7

команд разработки

Практика в PurpleCode

1
Собеседуем выбранных участников
2
Прошедших отбор берём на оплачиваемую стажировку
3
После 3-х месяцев успешной стажировки - оффер
Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 10 января 2026
О тарифе

Тариф с командным проектом

  • Реальный проект

    Вы будете работать вместе с командой на реальным проектом

  • Практика

    2 недели интенсивной практики и погружения в процессы разработки

  • Наставничество

    Несколько опытных наставников будут проводить код ревью и помогать с задачами

  • Командная работа

    Вы научитесь синхронизироваться с командой и совместно реализовывать сложные фичи

  • Практика Agile

    Вы будете работать по Scrum и познакомитесь с Agile процессами

team project
  1. 1

    Планируем спринт

    1 раз в неделю мы проводим звонок и планируем спринт, декомпозируем задачи и начинаем работать над итерацией.

  2. 2

    Синхронизируемся

    Каждый день мы синхронизуемся в чате, а наставники помогают с задачами и отвечают на вопросы.

  3. 3

    Выполняем задачи

    Работая по GitFlow вы выполняете задачи и отправляете их на ревью. Код ревью проводят наставники, которые проверяют качество кода и дают рекомендации.

  4. 4

    Проводим ретроспективу

    В конце спринта мы проводим звонок-ретроспективу, где разбираем сделанные задачи и анализируем спринт.

Для вас подготовлены дополнительные материалы
  • additional material

    Макеты для вёрстки и создания компонент

  • additional material

    Техническое задание на итерацию от ProductOwner

  • additional material

    Процессы по работе в команде и код ревью

Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 10 января 2026
Команда курса

Автор курса

фото команды
Автор курса

Антон Ларичев

Основатель PurpleSchool

Основатель PurpleSchool и ex-CTO. Занимаюсь разработкой уже более 14 лет и имею большой опыт: JavaScript, TypeScript, Php, Go, C#, Swift и Python. Активно внедряю гибкие методологии разработки в компании и внутренние обучения для команд.

Изучи направление Фронтенд разработчик

Благодаря направлению вы сможете последовательно изучить все аспекты Frontend разработки под руководством опытного наставника, добавить множество проектов в портфолио и получить практический опыт разработки.

7
7 месяцевдлительность направления
11
11 проектовдля портфолио
1 раз
в неделю живые встречи
Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 10 января 2026

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile

Курсы с наставником и без

Для компаний

Все курсы доступны для приобретения для сотрудиков компаний по безналичному расчёту. Процесс получения доступа очень простой, нужен только ваш ИНН и число сотрудников.

Свяжитесь со мнойЧерез форму ниже или по почтеcontact@purpleschool.ru
Оплата счётаВы оплачиваете счёт на нужное число мест и курсов
СтартНа email сотрудников открывается доступ
Наши курсы выбирают:
Остались вопросы?

Частые вопросы

Курс построен таким образом, чтобы доносить материал от простого к сложному. Ниже вы можете ознакомиться с планом курса и посмотреть часть открытых лекций по кнопке проигрывателя.

Вы получаете неограниченный по времени доступ к курсу и можете проходить его в темпе, в который комфортен вам. Но занятия с наставником и проверка домашнего задания ограничена 2-мя и 3-мя месяцами для 2-х тарифов.
Для тарифов с наставником доступен прямой чат с наставником, где вы можете задавать вопросы. А для всех тарифов есть общий чат и комментарии под каждой лекцией.
После приобретения курса у вас открывается доступ на приватный Telegram канал, где созданы отдельные чаты для каждого курса и есть возможность задавать вопросы наставнику напрямую. Там же проводятся голосовые звонки с наставником.
Оплата доступна по всему миру. Стоимость курса будет автоматически сконвертирована в валюту вашей страны по текущему курсу.
Если в течение 30 дней курс вам не понравился или не подошёл, вы можете запросить возврат средств если не прошли более 50% курса, написав на электронную почту contact@purpleschool.ru. После возврата средства зачисляться в течение 3-х рабочих дней.
Да, сертификат будет вам автоматически отправлен после завершения курса на электронную почту, указанную при регистрации.
На все тарифы с наставником доступна рассрочка на 2 и 3 месяца в зависимости от тарифа.
Конечно, мы дорожим своей репутацией и работаем полностью открыто, платим налоги и формирует чеки. Всю информацию о компании можно найти на сайте ФНС по ИНН, указанному в подвале сайта.
Основная ценность курса в том, что весь материал структурирован и подан в правильной последовательности. Благодаря этому вы можете получить знания быстро, качественно и структурировано. А поддержка наставника обеспечивает вам быструю обратную связь и поддержку от профессионального разработчика.
Мы рекомендуем выделять на курс от 10 до 20 часов в неделю, чтобы двигаться в хорошем темпе. Если вы приобретаете курс для самостоятельного обучения, то можете двигаться в своём темпе.
Мы всегда идём на встречу и в индивидуальном порядке продлеваем время с наставником, если вам необходим перерыв в изучении материала.
Остались вопросы? Их можно задать в чате Telegram.