Frontend разработчик - курс 47 600 rub. от Loft School, обучение 3 месеца, дата 28 ноември 2023 г.

Разширено уеб развитие на Vue.js

Седмица 1 - Работен процес

— Срещаме ментора и групата.
— С помощта на сглобяването на webpack създаваме избраното оформление за крайния проект.
— Публикуваме резултата в Github и го изпращаме на ментора за проверка.

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

Vue. Основни функции
1. Теория (04:49)
2. Здравей свят (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-модел (05:51)
10. Куки за жизнен цикъл (07:08)
11. Примеси (04:40)

НПМ
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. зависимости и devDependencies (01:51)
9. Webpack и npx (04:04)
10. npm скриптове (04:02)
11. npm, git и github (02:40)

Прежда
1. Прежда (07:07)

Webpack. Основи
1. теория (01:09)
2. Минимална конфигурация и стартиране (04:41)
3. Наименуване на файлове (02:34)
4. Товарачи (04:28)
5. Dev-сървър (02:43)
6. Плъгини (02:34)
7. Търсене на модули (03:18)
8. Sorsmaps (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. Фигма. Интерфейс (04:37)
2. Фигма. Организация на проекта (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 страници за хостване на проекти (04:31)

Vue. Работилница №1
1. Начало на проекта (05:24)
2. Компонент на заглавката (04:13)
3. Компонент на икона (05:06)
4. Показване на списък с компоненти (02:56)
5. Превключване на компонент (03:19)

Седмица 2 - Vue.js

— Ние правим оформлението адаптивно.
— Ще внедрим блока „Умения“ във Vue.js.
— Ще внедрим блока „Моите проекти“ във Vue.js.
— Внедряваме блока „Плъзгач за прегледи“ с помощта на приставката Vue.js.

Книга с разкази
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. Добавка за фонове (01:41)
12. Addon Knobs (02:28)
13. Източник на добавка (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)

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

Vue. Работилница №2
1. Подготовка (02:39)
2. Свързване на компонент (02:16)
3. Контролен изход (02:38)
4. Компонент на напредъка (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. Различни изгледи на рутери (01:08)
10. Динамично импортиране (02:00)
11. Красив URL (02:16)

Vuex. Държавен управител
1. Въведение (01:13)
2. Връзка (02:30)
3. Екшън (02:27)
4. Мутации (02:16)
5. Getters (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. API за композиция
1. Въведение (01:29)
2. Общ пример (03:57)
3. Функция на песента (01:51)
4. Реактивна функция (00:55)
5. функция toRef (01:35)
6. функция toRefs (00:58)
7. Изчислени свойства (00:56)
8. функция за гледане (01:41)
9. функция watchEffect (03:14)
10. функция само за четене (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. Шега (15:47)
3. Ползите от тестовете (09:01)
4. Покритие (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. Тестване. Превключвател (02:38)
5. Тестване. Проблеми (05:08)

Седмица 6 – Завършване на проекта

— Завършваме проекта.
— Изпращаме проекта за преглед от ментори.
— Дипломи за оценка.

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

Разработка на уеб приложения React.js

Седмица 1 – Въведение в React.js

— Запознаваме се с екипа на курса и съучениците.
— Изучаване на JSX и Virtual DOM в React.
— Обмисляме компонентния подход и методите за пренос на данни.

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

I React.js
1. Какво е React (07:05)
2. Виртуален DOM (02:46)
3. JSX (06:10)
4. Изобразяване с условия (05:11)
5. Работа със списъци (02:45)
6. Компоненти (02:41)
7. Реквизит (01:45)
8. Държава (06:45)
9. Събития (02:26)
10. React Devtools (03:58)

II React.js
1. Методи на жизнения цикъл (05:19)
2. Компоненти - функции (01:29)
3. Чист компонент (02:54)
4. Синтетични събития (01:42)
5. Работа с формуляри (02:51)
6. Обработка на грешки (01:39)

Анализ на задачи №1
1. Семинар #1 (30:36)

Седмица 2 - React.js модели, тестване

— Ние изучаваме компоненти, елементи и екземпляри от класа на компонента.
— Вземаме предвид библиотеката Recompose, компоненти от висок ред и модели на Render Props.
— Разбираме предимствата на тестовете, изучаваме Jest, Enzyme, Snapshots.

III Реагирайте
1. Въведение (01:43)
2. PropTypes (10:18)
3. Контекст (05:19)
4. Референции (05:18)
5. Портали (05:02)
6. Куки (10:42)

IV React.js
1. Компоненти от висок ред (HOC) - Компоненти от по-висок порядък (10:33)
2. Ref-forwarding (HOCs) (04:31)
3. Образец за изобразяване на подпори (05:25)
4. HOK Library Recompose (10:32)
5. Профилиране (04:02)

Тестване
1. Въведение (05:06)
2. Test Runner (02:51)
3. Тествайте DSL (08:41)
4. Ензим (06:57)
5. Моментни снимки (03:09)
6. Изпитателни саги (05:01)
7. Библиотека за тестване на React (06:32)

Анализ на задачи №2
1. Семинар #2 (27:54)

Седмица 3 - Redux, маршрутизиране

— Ние изучаваме маршрутизиране: просто маршрутизиране, маршрутизиране с Switch, както и вложено маршрутизиране.
— Запознаване с библиотеката Redux: основни концепции и концепции на Store, Actions, Reducers, React-redux.
— Мидълуерът се счита за начин за работа със Sideeffect.

Маршрутизиране в браузъра
1. API за история (02:48)
2. Обикновено маршрутизиране (05:39)
3. Маршрутизиране от Switch (04:16)
4. Вложено маршрутизиране (05:32)
5. Частен маршрут (04:39)

I Redux
1. Въведение (04:07)
2. Магазин (05:03)
3. Действия (02:17)
4. Редуктори (07:56)
5. React-redux (03:26)

II Редукс
1. Въведение (03:11)
2. CreateActions (redux-действия) (09:13)
3. Мидълуер (07:54)
4. Действия за управление (05:52)
5. Селектори (06:17)
6. Повторен избор (04:49)
7. патици (06:56)

Анализ на задачи №3
1. Семинар #3 (39:13)

Седмица 4 - Redux-saga

— Ние изучаваме библиотеката Redux-saga. Повторете функциите на генератора*. Нека се научим как да ги изпълняваме паралелно.
— Нека да разгледаме метода Take. Нека проучим избора като начин за получаване на данни от магазина.
— Търсим начини за стилизиране на React приложение. Изучаваме библиотеките ClassNames, StyledComponents, BrowserList, MaterialUI.

I Redux-сага
1. Въведение (00:57)
2. Обзор (02:08)
3. Генератори (04:11)
4. Добавяне на саги (02:07)
5. Реагиране на действия (03:53)
6. Пускане на функции (02:06)

II Redux-сага
1. Въведение (00:27)
2. Изпълнение на ефекти паралелно (03:41)
3. Влиза в сила (02:45)
4. Изберете ефект (02:04)
5. Отмяна на ефектите (04:05)

Работа със стилове
1. Въведение (01:34)
2. CRA Styles (05:21)
3. Имена на класове (06:32)
4. StyledComponents (07:11)
5. BrowserList (01:37)
6. Материален потребителски интерфейс (08:13)

Анализ на задачи №4
1. Семинар #4 (09:55)

Седмица 5 – Формуляри, CI & DI & обработка на грешки на клиента

— Обмисляме да работим с формуляри, като използваме библиотеките Formik, Redux Forms, React Final Form.
— Обмисляме методи за осигуряване на качеството на производствения код. Анализираме инструменти като: Husky, TravisCI, HerokuNow.
— Ние изучаваме набор от полезни библиотеки за разработка (Storybook, RamdaJS, Axios).
— Обмисляме TypeScript.

Работа с формуляри
1. Въведение (05:07)
2. Formik (08:51)
3. Redux форма (06:22)
4. React окончателна форма (06:36)

CI & DI & обработка на грешки на клиента
1. Въведение (05:07)
2. Хъски (02:32)
3. CI с помощта на TravisCI (03:32)
4. Разгръщане в heroku (04:57)
5. Ролбар (02:00)

Набор от полезни библиотеки за разработка
1. Книга с разкази (05:32)
2. RamdaJS (04:47)
3. Axios (05:52)
4. Машинопис (09:31)

Анализ на задачи №5
1. Семинар #5 (13:17)

Седмица 6 – Работа по проект

— Попълваме заявлението и го изпращаме за преглед.

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