Курс Front-end Pro

Після проходження курсу випускники здобудуть навички для застосування JavaScript на достатньому рівні, щоб писати скрипти та форми, навчаться працювати з AJAX, а також налаштовувати збірку проєкту. Успішне завершення курсу дозволяє претендувати на вакансії Junior Front-End Developer.

Програма курсу

Знайомство з JS

• Знайомство та план курсу
• Введення в технологію веб-розробки
• Підключення скриптів, перший запуск програми
• Взаємодія з користувачем через примітивні функції
• Git, Github

Змінні та оператори

• Коментарі
• Оголошення змінних
• Сплив змінних
• Порівняння var, let, const
• Типи даних
• Оператори

Умовні конструкції

• Умовна конструкція if/else
• Умовна конструкція switch
• Тернарний оператор
• Практика

Цикли

• Введення в цикли
• Види циклів
• Цикл while
• Цикл do…while
• Цикл for
• Інструкції break та continue
• Вкладені цикли
• Нескінчені цикли
• Практика

Масиви

• Основи роботи з масивами
• Варіанти створення масивів
• Методи для роботи з масивами
• Перебір масивів за допомогою циклів for, for…in, for…of
• Видалення елементів з масиву
• Створення простих об’єктів
• Практика

Основи функцій

• Основи роботи з функціями
• Варіанти створення функцій
• Параметри функцій, значення за замовчуванням
• Область видимості функції
• Передача параметрів у функцію за значенням та за посиланням
• Повернення значення з функції
• Замикання
• Лексична область видимості
• Рекурсія

Контекст виконання функції

• Глобальний об'єкт window
• Функціональний контекст
• Функції в об'єктах - методи
• Методи підміни контексту
• Стрілочні функції та їх відмінності від звичайних

Функції

• Функція-коллбек
• Функція вищого порядку
• Перебір масивів за допомогою методів forEach, find, map, filter, reduce

DOM

• Що таке DOM?
• Отримання існуючих DOM-елементів
• Динамічне створення та видалення нових DOM-елементів
• Керування атрибутами та вмістом DOM-елементів
• Можливі події
• Додавання обробників подій DOM-елементів

Events

• Фази обробки подій
• Делегування подій
• Об'єкт event та його методи
• BOM-об'єкти

Робота з формами

• Основні елементи-керування
• Базові навички динамічної роботи з елементами керування
• Валідація отриманих даних від користувача

WebStorages

• Cookies
• LocalStorage
• SessionStorage
• Практика

Практика та Livecoding

Регулярні вирази

• Створення регулярного вираза
• Робота з регулярними виразами за допомогою методів
• Модифікатори регулярних виразів
• Структура шаблонів. Метасимволи. Дужки. Квантифікатори

Бібліотеки та фреймворки

• Огляд популярних бібліотек та фреймворків
• Встановлення бібліотек за допомогою NPM
• Приклади роботи з розповсюдженими бібліотеками

Асинхронне виконання коду

• EventLoop
• Функції відкладеного виконання коду

ESNext

• EcmaScript
• Babel
• Spread & Rest оператори
• Деструктуризація масивів та об’єктів
• Оператор Nullish coalescing
• Оператор Optional chaining
• Інші найновіші оператори

HTTP

• Огляд клієнт-серверної архітектури
• Що таке протокол HTTP та як він працює
• Огляд технології Ajax
• Методи роботи з сервером по технології Ajax
• Приклади відкритих API
• Технологія WebSockets

Promise

• Вступ до Promise
• Стан Promise
• Обробка Promise за допомогою методів then, catch, finally
• Одночасна обробка кількох Promise
• Livecoding

ООП

• Основні поняття ООП
• Фунції-конструктори
• Прототипне успадкування
• Створення об'єкту з певним прототипом
• Створення сутностей за допомогою class
• Успадкування сутностей створених через class
• Приватні властивості
• Статичні властивості за методи class
• Практика

Робота з асинхронними функціями

• Створення власних асинхронних функцій
• Обробка асинхронних функцій з інструкцією await
• Обробка помилок

Системи збирання коду

• Огляд сучасних систем збирання коду
• Основи роботи з Gulp
• Компіляція та зборка sass-файлів
• Транспіляція та зборка js-файлів
• Плагін ESLint

Webpack

• Огляд можливостей Webpack
• Встановлення та конфігурація Webpack
• Налаштування базових лоадерів та плагінів до Webpack
• Запуск локального серверу за допомогою Webpack

Node.js

• Огляд технології Node.js
• Створення сервера на Node.js
• Приклад створення сервера за допомогою бібліотеки express на Node.js
• Приклад роботи власного фронтенд та бекенд додатків
• Огляд програми Postman

React

• Огляд поняття SPA
• Введення в React
• Основні концепції React
• Створення первого React-додатку
• Основи роботи з JSX
• Варіанти створення компонентів
• Передача props до компонентів
• Обробка подій у React-компонентах

Компоненти React

• Етапи життєвого циклу компонентів
• Порівняння класових та функціональних компонентів
• Робота з класовим компонентом
• Методи життєвого циклу класового компоненту
• Робота зі state

Функціональні компоненти в React

• Основи роботи з функціональним компонентом
• Особливості роботи з хуками: useState, useEffect, useRef, useCallback, useMemo, useContext
• Створення власних хуків

Робота з формами в React

• Робота з основними елементами керування форми

Маршрутизація в React

• Основи роботи з бібліотекою react-router-dom

Бібліотеки для роботи з React-компонентами

• Огляд бібліотек-компонентів AntD/Material UI
• Робота з стилями у React за допомогою CSS-модулів та бібліотеки styled-components
• Огляд бібліотеки для створення таблиць даних Ag Grid

Redux

• Що таке state management?
• Вступ до Redux та основні поняття
• Основні етапи data flow у Redux
• Інтеграція Redux з React-додатком
• Робота з хуками useDispatch та useSelector
• Middlewares на прикладі redux-thunk
• Livecoding

Redux-Toolkit

• Оптимізація роботи з Redux за допомогою Redux-Toolkit
• Основні поняття Redux-Toolkit
• Створення та використання RTK Query

TypeScript

• Вступ до TypeScript – переваги та недоліки
• Статична типізація у TypeScript
• Типи та інтерфейси
• Аліаси, можливі значення, необов’язкові параметри
• Generics
• Робота з TypeScript в React-додатку

Тестування React-додатків

• Основні поняття тестування програмного забезпечення
• Модульне тестування за допомогою бібліотеки Jest
• Тестування React-додатків за допомогою бібліотеки React-Testing-Library

Екзамен

Особливості курсу

• Для фахівців, які вже вміють верстати і бажають поглибити свої знання
• Заняття проходять в режимі онлайн-трансляції
• Особистий кабінет для кожного учня
• Оперативна служба підтримки студентів
• Відеозаписи занять зберігаються в особистому кабінеті
• Усі записи уроків залишаються у студентів після закінчення навчання
• Велика кількість практичних занять і Livecoding
• Викладачі курсу - практикуючі фахівці, що працюють в топових компаніях
• Можливість повернути всі внесені за навчання кошти до шостого заняття
• Бонуси курсу:
  • тренінги по проходженню співбесіди та складанню резюме з HR-фахівцем компанії;
  • тестова співбесіда з технічним фахівцем.

Викладачі курсу

• Володимир Кривошапов - Senior JavaScript Developer at Playtika
• Денис Решетняк - Senior Front-end Developer at WorkBuzz
• Олексій Павленко - Senior Full-stack Developer at Sitecraft
• Соломія Браташ - JavaScript Developer at EPAM
• Владислав Проценко - Chief Technology Officer at Profair Games
• Володимир Шайтан - Senior Full Stack Developer at UKEESS Software House
• Олексій Толстоног - Software Developer at SoftServe
• Володимир Шкарупін - Senior Developer at Archer
• Василь Петров - Senior Front-end Engineer at Pin-up.tech
• Дмитро Крулькевич - Software Engineer at Continuumua
• Валерій Хомченко - Front-end Developer at SOLAR Digital
• Денис Лебеденко - Front-end Developer at Reply
• Олексій Дом'янич - Senior Software Engineer at UKEESS Software House
• Андрій Черненко - Front-end Developer at Wargaming
• Валерій Тернавський - Software Developer at Sense Bank
• Сергій Савчук - Full Stack Developer at Copgemini Engineering
• Любомир Рудько - Senior Software Engineer at N-IX
• Ігор Михайличенко - Software Engineer at BonApp
• Роман Таран - Senior Front-end Engineer at EPAM
• Катерина Шиповська - Senior JavaScript Engineer, Software Architect at Boosta
• Роман Яремій - Full-stack Developer at NIX
• Максим Бєлкін - DM & JS Team Lead at Capgemini Engineering
• Дмитро Прокудін - JavaScript Software Engineer at Capgemini Engineering
• Антон Головін - Front-end Team Lead at ForForce
• Владислав Продан - Middle Front-end Developer at Eleks
• Андрій Посітко - Front-end Engineer at CHI Software
• Віталій Пархоменко - Front-end Developer at Capgemini Engineering
• Арсеній Деркач - Senior React.js Software Engineer
• Сергій Котерняк - Software Engineer
• Влад Балабаш - Solution Architect, Senior JavaScript Developer
• Олександр Фурманов - Front-end Developer
• Марія Манойло - Teacher at Hillel IT School