Неделя 1 — Workflow

— Знакомимся с наставником и группой.
— При помощи webpack-сборки верстаем выбранный макет выпускного проекта.
— Размещаем результат на Github и сдаём на проверку наставнику.

Открытие курса
1. Как проходит обучение (01:09:37)

Vue. Основные возможности
1. Теория (04:49)
2. Hello World (06:20)
3. Обработка событий (02:38)
4. Обработка нескольких событий (01:19)
5. Динамические значения (01:30)
6. Знакомство с директивами (05:40)
7. Сокращенные записи директив (00:37)
8. Методы с параметрами (01:36)
9. Модификаторы событий (08:52)
10. Вычисляемые свойства (10:50)
11. Вотчеры (06:02)
12. Работа с классами (03:37)
13. Работа с CSS свойствами (02:49)
14. Обращение к DOM элементам (03:50)
15. Условный рендеринг (04:46)
16. Рендеринг списков (05:12)
17. Создание компонента (04:16)
18. Локальные компоненты (02:44)
19. Реактивность данных (04:35)
20. Свойства компонента (03:52)
21. Слоты (04:37)
22. Слоты с областью видимости (04:52)
23. Пользовательские события (04:27)
24. Телепорты (02:53)

Vue. Однофайловые компоненты
1. Установка проекта. VUE-CLI (09:22)
2. Однофайловый компонент (03:18)
3. Работа со стилями (07:02)
4. Передача атрибутов и обработчиков (02:53)
5. Отдельные файлы (01:26)
6. Валидация свойств компонента (07:35)
7. Валидация пользовательских событий (02:01)
8. Двусторонняя связь данных (04:11)
9. Пользовательский v-model (05:51)
10. Хуки жизненного цикла (07:08)
11. Примеси (04:40)

NPM
1. Что такое npm? (05:50)
2. Установка и обновление npm (02:33)
3. Справка по работе с npm (01:28)
4. Поиск и установка пакетов (04:24)
5. Зависимости пакета (02:09)
6. Файл манифест package.json (03:02)
7. Удаление и обновление пакетов (03:02)
8. dependencies и devDependencies (01:51)
9. Webpack и npx (04:04)
10. npm-скрипты (04:02)
11. npm, git и github (02:40)

Yarn
1. Yarn (07:07)

Webpack. Основы работы
1. Теория (01:09)
2. Минимальный конфиг и запуск (04:41)
3. Именование файлов (02:34)
4. Лоадеры (04:28)
5. Dev-server (02:43)
6. Плагины (02:34)
7. Поиск модулей (03:18)
8. Сорсмапы (03:17)
9. Дев и прод (02:42)
10. Типы модулей (03:00)
11. Минимальная сборка (05:30)

ESLint. Обзор конфигурации
1. Введение (01:26)
2. Установка и запуск (03:10)
3. Исправление ошибок (02:04)
4. Конфигурация (05:21)
5. Формат вывода (00:52)

Figma для верстальщика
1. Figma. Интерфейс (04:37)
2. Figma. Организация проектов (01:32)

Flexbox
1. Введение (00:45)
2. Флекс-контейнер (01:43)
3. Выравнивание по главной оси (01:37)
4. Выравнивание по поперечной оси (01:50)
5. Выравнивание отдельного элемента (01:09)
6. Флекс-элемент – контейнер (00:53)
7. Направление осей (03:18)
8. Многострочный контейнер (02:54)
9. Выравнивание многострочного контента (01:25)
10. Пропорции (02:46)
11. Пропорции при сжатии (01:24)
12. Базовый размер (04:02)
13. Порядок элементов (02:40)

GIT
1. Введение (07:03)
2. Начинаем работать с Git (03:01)
3. Создание нового репозитория (01:09)
4. Добавление файлов в индекс (область слежения) Git (06:49)
5. Создание коммита (07:17)
6. Навигация по коммитам. Отмена изменений (12:10)
7. Типичный цикл работы с Git (03:34)
8. Ветвления в Git (11:27)
9. Конфликты при слиянии веток (06:06)
10. Временное (без коммита) сохранение данных (05:25)
11. Работа с удалёнными репозиториями (20:04)
12. Использование GitHub Pages для хостинга проектов (04:31)

Vue. Воркшоп #1
1. Старт проекта (05:24)
2. Компонент хедера (04:13)
3. Компонент иконок (05:06)
4. Вывод списка компонентов (02:56)
5. Компонент toggler (03:19)

Неделя 2 — Vue.js

— Делаем верстку адаптивной.
— Реализуем блок "Скиллы" на Vue.js.
— Реализуем блок "Мои проекты" на Vue.js.
— Реализуем блок "Слайдер для отзывов" с помощью Vue.js плагина.

Storybook
1. Установка (01:56) 
2. Первая история (04:35)
3. Подключение компонента (01:24)
4. Расширение конфига (04:26)
5. Общие стили (02:08)
6. Стори для компонента (05:23)
7. CDD (04:16)
8. Создание компонента (02:28)
9. Применение компонента (02:29)
10. Логирование событий (03:29)
11. Аддон Backgrounds (01:41)
12. Аддон Knobs (02:28)
13. Аддон Source (02:17)
14. Заключение (01:11)

JavaScript — ES6
1. Строковая интерполяция (07:39)
2. Упрощение описания методов (13:35)
3. Значения по умолчанию (30:08)
4. Деструктурирующее присваивание: Объекты (07:30)
5. Новые возможности и старые браузеры (13:07)

Асинхронность в JavaScript
1. Таймеры (23:44)
2. Загрузка картинок (22:21)
3. Промисы (36:29)
4. AJAX (32:28)

Axios. Библиотека для запросов
1. Введение (02:23)
2. Отправляем запрос (02:12)
3. Обзор конфигурации (04:30)
4. Тело запроса (01:43)
5. Настройки по умолчанию (01:38)
6. Перехватчики (02:11)
7. Сервисы (02:33)
8. async-await (01:18)

Vue. Воркшоп #2
1. Подготовка (02:39)
2. Подключение компонента (02:16)
3. Вывод контролла (02:38)
4. Компонент Progress (05:09)
5. Запрос к серверу (06:38)
6. Вывод данных (05:55)

Неделя 3 — Нативный JavaScript

— Верстаем админку.
— Изучаем Storybook и применяем в своём проекте.
— Осуществляем необходимую обработку (валидацию) форм проекта.

VueRouter. Роутинг в браузере
1. Введение (04:31)
2. Создание ссылок (02:41)
3. Программная навигация (02:35)
4. Параметры пути (04:42)
5. Параметры как свойства (00:49)
6. Расширенные параметры и 404 (03:29)
7. Вложенные маршруты (03:23)
8. Классы активности (02:37)
9. Разные Router-View (01:08)
10. Динамические импорты (02:00)
11. Красивый URL (02:16)

Vuex. Менеджер состояния
1. Введение (01:13)
2. Подключение (02:30)
3. Экшены (02:27)
4. Мутации (02:16)
5. Геттеры (02:02)
6. Применение на практике (08:07)
7. Функции помощники (02:59)
8. Модули (05:18)
9. Динамические модули (01:38)
Вопрос-ответ

Vue. Воркшоп #3
1. Верстка (04:33)
2. Вывод данных (02:42)
3. Подготовка к анимации (02:14)
4. Отображение кнопок (03:45)
5. Догрузка контента (11:38)
6. Отображение слайда после перехода (02:17)

Неделя 4 — Vue.js, SPA

— Реализуем SPA в админ-панели.
— Изучаем работу с данными через хранилище приложения
— Используем ajax для связи с api, настраиваем взаимодействия клиент-сервер.

Авторизация. Токены
1. Типы авторизации (04:20)
2. GitHub OAuth (01:42)
3. Создание приложения GitHub (02:28)
4. Получение токена (08:38)
5. Хранение данных в коде (01:46)
6. Защита роутов (04:13)

Vue. Воркшоп #4
1. Подготовка (01:33)
2. Создание экшена (02:30)
3. Состояние загрузки (04:01)
4. Запрос (02:27)
5. Удаление дубликатов (03:29)
6. Защита роутов (03:23)
7. Логаут (00:51)

Неделя 5 — Практика

— Выводим сохраненные данные из админ-панели на лендинг.
— Тестируем компоненты.
— Групповая работа над проектом с наставником.

Vue.js. Composition API
1. Введение (01:29)
2. Общий пример (03:57)
3. Функция композиции (01:51)
4. Функция reactive (00:55)
5. Функция toRef (01:35)
6. Функция toRefs (00:58)
7. Computed свойства (00:56)
8. Функция watch (01:41)
9. Функция watchEffect (03:14)
10. Функция readonly (00:40)
11. Функции-проверки (02:30)
12. Функция unref (01:27)
13. Хуки жизненного цикла (00:58)
14. Пример. Обзор проекта (00:53)
15. Пример. Функционал подгрузки (01:20)
16. Пример. Категории (02:20)
17. Пример. Начальная фильтрация (02:46)
18. Пример. Переключение фильтра (02:11)
19. Пример. Остальные функции фильтрации (02:03)
20. Пример. Метод сортировки (03:05)
Тестирование JS-кода
1. Введение (16:05)
2. Jest (15:47)
3. Польза тестов (09:01)
4. Coverage (10:02)

Vue.js. Тестирование компонентов
1. Настройка пакетов (04:39)
2. Обертка компонента (04:13)
3. Что тестировать (02:48)
4. Первый тест (05:25)
5. Проверка эмит-события (03:44)
6. Передача свойств (02:58)
7. Работа с элементами форм (05:42)
8. Общие установки (01:15)
9. Моки (05:04)
10. Подключение библиотек (02:32)
11. Тестирование экшена (03:26)
12. Тестирование стора (02:53)
13. Тестирование снимками (03:08)

Тестирование. Моки
1. Создание мока (02:39)
2. Работа с аргументами (01:39)
3. Возвращаемое значение (02:57)
4. Модули (04:24)
5. Таймеры (02:05)

Vue. Воркшоп #5
1. Простой компонент (03:03)
2. Компонент со стором (05:21)
3. Тестирование. Подготовка (03:20)
4. Тестирование. Toggler (02:38)
5. Тестирование. Issues (05:08)

Неделя 6 — Завершение работы над проектом

— Дорабатываем проект.
— Сдаём проект на проверку наставникам.
— Выставление оценок в дипломы.

Как получить работу в IT: фишки и советы
1. Как получить работу в IT? Поиск, собеседование и испытательный срок (42:21)
2. Как найти удаленную работу и фриланс-заказы? (20:12)
3. Первая работа в IT — как себя вести? Стажировки, официальное трудоустройство и работа "за еду" (14:11)
4. Как пройти испытательный срок? (27:10)
5. Как подготовиться к собеседованию в компании уровня FAANG (08:52)
6. Процесс загрузки web страницы (25:19)
7. Собеседование программиста – всё, что нужно знать (01:24:07)
8. Решение задачи с собеседования программиста (19:36)
9. Собеседование Frontend-разработчика (01:37:17)

React.js Разработка веб-приложений

Неделя 1 — Введение в React.js

— Знакомимся с командой курса и одногруппниками.
— Изучаем JSX и Virtual DOM в React.
— Рассматриваем компонентный подход и способы передачи данных.

Знакомство
1. Открытие курса (05:41)

I React.js
1. Что такое React (07:05)
2. Virtual DOM (02:46)
3. JSX (06:10)
4. Рендеринг с условиями (05:11)
5. Работа со списками (02:45)
6. Компоненты (02:41)
7. Props (01:45)
8. State (06:45)
9. События (02:26)
10. React Devtools (03:58)

II React.js
1. Lifecycle методы (05:19)
2. Компоненты - функции (01:29)
3. Pure Component (02:54)
4. Synthetic Events (01:42)
5. Работа с формами (02:51)
6. Обработка ошибок (01:39)

Разбор заданий #1
1. Workshop #1 (30:36)

Неделя 2 — Паттерны React.js, тестирование

— Изучаем компоненты, элементы и экземпляры класса компонент.
— Рассматриваем библиотеку Recompose, паттерны high order components и Render Props.
— Разбираемся в преимуществах тестов, изучаем Jest, Enzyme, Snapshots.

III React
1. Intro (01:43)
2. PropTypes (10:18)
3. Context (05:19)
4. Refs (05:18)
5. Portals (05:02)
6. Hooks (10:42)

IV React.js
1. High Order Components (HOCs) - Компоненты Высшего Порядка (10:33)
2. Ref-forwarding (HOCs) (04:31)
3. Рендер пропс паттерн (05:25)
4. Библиотека ХОКов Recompose (10:32)
5. Профайлинг (04:02)

Тестирование
1. Intro (05:06)
2. Test Runner (02:51)
3. Test DSL (08:41)
4. Enzyme (06:57)
5. Snapshots (03:09)
6. Testing sagas (05:01)
7. React Testing Library (06:32)

Разбор заданий #2
1. Workshop #2 (27:54)

Неделя 3 — Redux, роутинг

— Изучаем роутинг: Simple routing, роутинг со Switch, а также вложенный роутинг.
— Знакомимся с библиотекой Redux: основные понятия и концепции Store, Actions, Reducers, React-redux.
— Рассматривается middleware как способ работы с Sideeffect.

Роутинг в браузере
1. History API (02:48)
2. Simple routing (05:39)
3. Роутинг со Switch (04:16)
4. Вложенный роутинг (05:32)
5. Приватный роут (04:39)

I Redux
1. Intro (04:07)
2. Store (05:03)
3. Actions (02:17)
4. Reducers (07:56)
5. React-redux (03:26)

II Redux
1. Intro (03:11)
2. CreateActions (redux-actions) (09:13)
3. Middleware (07:54)
4. Handle actions (05:52)
5. Selectors (06:17)
6. Reselect (04:49)
7. Ducks (06:56)

Разбор заданий #3
1. Workshop #3 (39:13)

Неделя 4 — Redux-saga

— Изучаем библиотеку Redux-saga. Повторяем generator* functions. Учимся запускать их параллельно.
— Разбираем метод Take. Изучаем select, как способ получения данные из Store.
— Рассматриваем способы стилизации React приложения. Изучаем библиотеки ClassNames, StyledComponents, BrowserList, MaterialUI.

I Redux-saga
1. Intro (00:57)
2. Overview (02:08)
3. Generators (04:11)
4. Adding sagas (02:07)
5. React on actions (03:53)
6. Запуски функций (02:06)

II Redux-saga
1. Intro (00:27)
2. Выполняем эффекты параллельно (03:41)
3. Эффект Take (02:45)
4. Эффект Select (02:04)
5. Отмена эффектов (04:05)

Работа со стилями
1. Intro (01:34)
2. CRA Styles (05:21)
3. ClassNames (06:32)
4. StyledComponents (07:11)
5. BrowserList (01:37)
6. Material UI (08:13)

Разбор заданий #4
1. Workshop #4 (09:55)

Неделя 5 — Формы, CI & DI & Client error handling

— Рассматриваем работу с формами с помощью библиотек Formik, Redux Forms, React Final Form.
— Рассматриваем методы обеспечения качества production кода. Разбираем такие инструменты как: Husky, TravisCI, HerokuNow.
— Изучаем набор полезных библиотек для разработки (Storybook, RamdaJS, Axios).
— Рассматриваем TypeScript.

Работа с формами
1. Intro (05:07)
2. Formik (08:51)
3. Redux form (06:22)
4. React final form (06:36)

CI & DI & Client error handling
1. Intro (05:07)
2. Husky (02:32)
3. CI using TravisCI (03:32)
4. Deploy to heroku (04:57)
5. Rollbar (02:00)

Набор полезных библиотек для разработки
1. Storybook (05:32)
2. RamdaJS (04:47)
3. Axios (05:52)
4. Typescript (09:31)

Разбор заданий #5
1. Workshop #5 (13:17)

Неделя 6 — Работа над проектом

— Доделываем приложение и отправляем на проверку.

Как получить работу в IT: фишки и советы
1. Как получить работу в IT? Поиск, собеседование и испытательный срок (42:21)
2. Как найти удаленную работу и фриланс-заказы? (20:12)
3. Первая работа в IT — как себя вести? Стажировки, официальное трудоустройство и работа "за еду" (14:11)
4. Как пройти испытательный срок? (27:10)
5. Как подготовиться к собеседованию в компании уровня FAANG (08:52)
6. Процесс загрузки web страницы (25:19)
7. Собеседование программиста – всё, что нужно знать (01:24:07)
8. Решение задачи с собеседования программиста (19:36)
9. Собеседование Frontend-разработчика (01:37:17)