Stepik О курсе
Подробнее
Курс подойдёт frontend разработчикам любого уровня подготовки. При этом мы на практике разберём как можно работать с FSD не только с React, но и Next, Vue, Nuxt, Angular и даже Svelte.
Мы начнём изучение разбора того, что такое FSD и как он помогает лучше структурировать наши проекты, что такое слои, слайсы и сегменты. Далее мы будем разбирать каждый слой, применяя на практике знания и создавая скелет для большого проекта.
Мы разберём инструменты, которые позволят вам удобнее и быстрее структурировать ваши проекты по FSD и контролировать изменения. Мы напрямую на макетах будем размечать различные слои, чтобы потренироваться в декомпозиции. А уже под конец курса мы посмотрим как можно использовать FSD с различными фреймворками, как Next, Vue, Nuxt, Angular и Svelte. Курс будет максимально практическим, так как изучив каждый из слоев или сегментов мы сразу же будем применять их практике, создавая приложение.
Требования
Что нужно для старта
- Знание любого frontend фреймворка
Результат
Что вы получите
- Создавать удобную и расширяемую структуру проекта
- Писать легкопереиспользуемый код
- Разделять ответственность между компонентами
- Мигрировать проекты на FSD
- Избегать циклические зависимости
- Применять FSD в проектах на любом фреймворке
- Правильно разбивать проект на слои
- Верно определять доменные области проекта
- Использовать инструменты FSD для поддержки структуры
Аудитория
Для кого этот курс
- Для Frontend разработчиков на любом фреймворке: React, Next, Vue, Nuxt, Angular и даже Svelte.
Содержание
11 занятийПрограмма курса
№ТемаЧто внутри
01Введение
- Почему FSD
- Как устроен курс
- Обзор проекта
- Обзор курсов
- Перенос курса
02Настройка окружения
- Настройка окружения
- Настройка VSCode
- Установка Node
- О работе NVM
- Figma компоненты
03Введение в FSD
- Что такое FSD
- Layers
- Slices
- Segments
- Тест - Введение в FSD
04Pages и App
- О слое App
- Старт проекта
- Подготовка слоя App
- Обзор проекта
- О слое Pages
- Структура роутинга
- Выделение slice
- Создание первой страницы
- Добавление стилей
- Layout
- Тест - Pages и App
05Shared
- О слое
- Константы маршрутов
- Конфигурации
- API клиент
- Библиотека
- UI компоненты
- Импорты в Shared
- Что ниже Shared
- Тест - Shared
06Инструменты FSD
- Steiger
- Path Alias
- Tree-shaking
- CLI
- Расширения
- Тест - Инструменты FSD
07Entities
- О слое
- Создание slices
- State managment
- API
- UI компоненты
- Упражнение - Выделение entities
- Кросс-импорты
- Тест - Entities
08Features
- О слое
- Примеры feature
- Специфичность в СSS
- Упражнение - Выделение features
- Упражнение - Разметка страниц
- Тест - Features
09Widgets
- О слое
- Примеры Widget
- Processes
- Упражнение - Выделение виджетов
- Упражнение - Финал декомпозиции
- Тест - Widgets
10Работа с фреймворками
- Next
- Vue
- Nuxt
- Angular
- Sveltkit
- Миграция проектов
- Тест - Работа с фреймворками
- Отзыв о курсе
11Заключение
- Куда дальше
- Финальное тестирование
01Введение
- Почему FSD
- Как устроен курс
- Обзор проекта
- Обзор курсов
- Перенос курса
02Настройка окружения
- Настройка окружения
- Настройка VSCode
- Установка Node
- О работе NVM
- Figma компоненты
03Введение в FSD
- Что такое FSD
- Layers
- Slices
- Segments
- Тест - Введение в FSD
04Pages и App
- О слое App
- Старт проекта
- Подготовка слоя App
- Обзор проекта
- О слое Pages
- Структура роутинга
- Выделение slice
- Создание первой страницы
- Добавление стилей
- Layout
- Тест - Pages и App
05Shared
- О слое
- Константы маршрутов
- Конфигурации
- API клиент
- Библиотека
- UI компоненты
- Импорты в Shared
- Что ниже Shared
- Тест - Shared
06Инструменты FSD
- Steiger
- Path Alias
- Tree-shaking
- CLI
- Расширения
- Тест - Инструменты FSD
07Entities
- О слое
- Создание slices
- State managment
- API
- UI компоненты
- Упражнение - Выделение entities
- Кросс-импорты
- Тест - Entities
08Features
- О слое
- Примеры feature
- Специфичность в СSS
- Упражнение - Выделение features
- Упражнение - Разметка страниц
- Тест - Features
09Widgets
- О слое
- Примеры Widget
- Processes
- Упражнение - Выделение виджетов
- Упражнение - Финал декомпозиции
- Тест - Widgets
10Работа с фреймворками
- Next
- Vue
- Nuxt
- Angular
- Sveltkit
- Миграция проектов
- Тест - Работа с фреймворками
- Отзыв о курсе
11Заключение
- Куда дальше
- Финальное тестирование
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Feature-Sliced Design» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Направления:Frontend-разработка
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
