Это видео — часть нового курса по Feature-Sliced Design. В нарезку, по традиции, вошли уроки, которых нет в бесплатном доступе. Задача — не просто «отрезать», а действительно погрузиться в суть и пройти азы работы с FSD на начальном уровне. За 1,5 часа мы подробно разберем Feature-Sliced Design — современный подход к организации frontend architecture и архитектуре приложений на React, Vue, Next.js, Nuxt.js, Angular и Svelte. Последовательно пройдем все шаги — настройку окружения Node.js, конфигурацию VS Code, работу с Figma-компонентами. На примере проекта рассмотрим ключевые понятия FSD: Layers, Slices, Segments, слои App, Pages, разберемся, как выстроить структуру проекта с учётом принципов Clean Architecture и масштабируемости проекта. Смотрите продолжение ❇️ Полный курс «Feature-Sliced Design» у нас на платформе всего от 3999р (+бонусные 300р за регистрацию) — https://purpleschool.ru/course/fsd?utm_source=youtube&utm_medium=link&utm_campaign=%D0%BA%D1%83%D1%80%D1%81%3A+feature-sliced+design+%D0%B7%D0%B0+1%2C5+%D1%87%D0%B0%D1%81%D0%B0&utm_content=course Профессии с нуля до Middle 🚀 Frontend-разработчик на React за 12 месяцев — https://purpleschool.ru/profession/frontend/?utm_source=youtube&utm_medium=link&utm_campaign=%D0%BA%D1%83%D1%80%D1%81%3A+feature-sliced+design+%D0%B7%D0%B0+1%2C5+%D1%87%D0%B0%D1%81%D0%B0&utm_content=career 🚀 Fullstack-разработчик на React + Node.js за 18 месяцев — https://purpleschool.ru/profession/fullstack/?utm_source=youtube&utm_medium=link&utm_campaign=%D0%BA%D1%83%D1%80%D1%81%3A+feature-sliced+design+%D0%B7%D0%B0+1%2C5+%D1%87%D0%B0%D1%81%D0%B0&utm_content=career Телеграм-канал с новостями веб-разработки, полезными материалами, возможностью участвовать в карьерных консультациях, мок-интервью и активным чатом на 4 000 ребят с самым разным опытом, присоединяйтесь! ✈️ https://t.me/purple_code_channel Бесплатные материалы 🗂 Карьерные пути для развития в разработке под вашу ситуацию — https://purpleschool.ru/skills/?utm_source=youtube&utm_medium=link&utm_campaign=%D0%BA%D1%83%D1%80%D1%81%3A+feature-sliced+design+%D0%B7%D0%B0+1%2C5+%D1%87%D0%B0%D1%81%D0%B0&utm_content=maps 🗂 Курс «Основы разработки» — https://purpleschool.ru/course/code-basics/?utm_source=youtube&utm_medium=link&utm_campaign=%D0%BA%D1%83%D1%80%D1%81%3A+feature-sliced+design+%D0%B7%D0%B0+1%2C5+%D1%87%D0%B0%D1%81%D0%B0&utm_content=free_course 🗂 Курс «CSS Flexbox» — https://purpleschool.ru/course/flexbox/?utm_source=youtube&utm_medium=link&utm_campaign=%D0%BA%D1%83%D1%80%D1%81%3A+feature-sliced+design+%D0%B7%D0%B0+1%2C5+%D1%87%D0%B0%D1%81%D0%B0&utm_content=free_course Содержание 00:00 — Интро 00:49 — 1. Почему FSD 05:46 — 2. Как устроен курс 10:32 — 3. Обзор проекта 12:28 — 4. Настройка окружения 14:11 — 5. Настройка VS Code 17:17 — 6. Установка Node.js 20:53 — 7. Figma компоненты 24:09 — 8. Что такое FSD 29:52 — 9. Layers 39:29 — 10. Slices 52:22 — 11. Segments 59:52 — 12. О слое App 01:03:10 — 13. Старт проекта 01:08:19 — 14. Подготовка слоя App 01:14:34 — 15. Обзор проекта 01:19:25 — 16. О слое Pages 01:22:01 — Аутро