Про курс
- В цьому курсі будуть розглянуті всі основи Front-end розробки. Навчання складатиметься з теорії, практики та домашніх завдань. Також, до кожного уроку будуть прикріплюватись посилання на різні ресурси для самостійного ознайомлення з темою. Варто акцентувати увагу саме на самостійному ознайомлеенні, поскільки в данній сфері дуже важливо вміти шукати інформацію. Яким би досвідченим спеціалістом ви не були, вам завжди потрібно буде гуглити. Тому краще почати це робити на перших кроках свого шляху. Знаючи основи та термінологію (що я і хочу Вам дати в даному курсі), робити це буде досить не складно. Також, найкраще інформація описана на англомовних ресурсах, тому варто звикати шукати інформацію саме англійською. Не варто панікувати, якщо ваш рівень англійської не високий. Сучасні інструменти (Розширення Google Перекладач) чудово допомагають з цим. З часом вони вже не знадобляться.
- У вас буде дві лінії практики: домашні завдання та розробка проекту.
- Домашні завдання "Малі перемоги".
Кожне д/з складається із задач, які потрібно виконувати в правильній послідовності. Так ми закріплюємо теорію із занять.
- Розробка проекту.
Ви створите декілька веб-сайтів різної складності.
У Вас буде можливість обрати проект самостійно або ми знайдемо для Вас реальний проект.
Що ти вивчиш (План курсу)
- Введення в галузь. Як працюють сайти. Хто такий фронтенд розробник
- Інструменти для роботи. Вибір та розгляд редактора коду
- Що таке верстка.
- HTML
- CSS
- Ознайомлення з інструментами браузера (Chrome DevTools)
- Інструменти для полегшення верстки: Препроцессори (SASS / SCSS), Таск-менеджери (на прикладі Gulp)
- Адаптивна верстка
- Що таке системи контролю версій (На прикладі Git, розглянемо основні команди)
- JavaScript
- Перемінні та суворий режим
- Класифікація типів даних
- Оператори
- Умови
- Цикли
- Функції
- Основні методи та властивості string і number
- Об’єкти та деструктиризація об’єктів
- Масиви та псевдомасиви
- Методи передобу масивів
- Передача по посиланню або по значенню
- Основи ООП
- Динамічна типізація в JS
- Отримання елементів зі сторінки
- Дії з елементами на сторінці
- Події та їх обробники
- Навігація по DOM-елементах
- Делегування подій
- Скріпти та час їх виконання
- Робота з датами
- Параметри вікна / документа. Робота з ними
- Функції конструктори
- Контекст виклику (this)
- Класи
- Локальні сервери
- JSON формат
- Технологія AJAX
- Promise
- Fetch API
- Async / Await
- Local storage
- Регулярні вирази
- Гетери та сетери
- Інкапсуляція
- Прийом - модуль
- Функції генератори
- Event loop
- ES6 Modules
- Frameworks, що це та які існують
- React (Базовий рівень)
- Принципи реакту
- Встановлення React, ознайомлення з JSX
- Елементи та компоненти
- Суворий режим
- Пропси
- Робота з масивами в React
- Стан компонентів
- Події в React
- Форми, контрольовані та неконтрольовані компоненти
- Іммутабельність стану
- Підйом стану
- React фрагменти
- Стилі в React
- React (Середній рівень)
- API
- Новий проект з API
- Трансформація даний з API
- Хороший тон додатку (відображення статусів запиту на сервер)
- Життєвий цикл компонентів
- Error Boundaries
- Пагінація данних
- PropTypes
- props.children
- Render-props паттерн
- Ref
- Портали
- React хуки (Просунутий рівень)
- Введення в хуки
- useState
- useEffect
- useCallback
- useMemo
- useRef
- Кастомні хуки
- React Router
- Динамічні імпорти та React.lazy
- React.memo, Pure Component
- React Context і useContext
- useReducer
- Компоненти вищого ладу HOC
- React Transition Group
- Formik, Yup
- SEO, React-helmet
- React + Redux
- Принципи Redux
- Чисті функції
- actionCreators , bindActionCreator
- Інтеграція Redux в React
- Комбінування редюсерів та CreateSelector
- Store enhancers
- Middleware
- Redux-thunkякщо
- Redux Toolkit
- Redux Saga
Вартість та тривалість
- 30 занять;
- 3 місяці;
- Навчання за методологією розробки Програмного забезпечення Agile - Kanban.
- Тривалість 3 місяці
- Понеділок 19:00 / Четвер 19:00