Онлайн-курс
занять
занять на тиждень
старт
За тиждень записалося
Залишилося
Стань веб-розробником!
Курс призначений для глибокого вивчення мови програмування JavaScript і бібліотеки React, яка використовується для створення складних Front-end додатків.
Популярна мова JavaScript використовується при створенні веб-додатків для додання інтерактивності веб-сторінок. Написання коду в React дуже схоже на роботу в HTML, що дає можливість легко почати писати код, упустивши синтаксис. Одна з головних особливостей React — свобода дій.
На курсі ви познайомитеся з принципами ООП, DOM, REST API і отримаєте практичні навички створення додатків з використанням «реакт-стека», що дозволить претендувати на посаду Junior Front-end Developer.
Цілі курсу
- Навчитися взаємодіяти з серверами за допомогою JavaScript
- Освоїти ООП
- Навчитися працювати з REST API
- Вивчити всі особливості бібліотеки React
- Вивчити всі нюанси: від того, як працює DOM, до того, як зібрати додаток Webpack-ом
Вивчаємо такі технології
-
ES6
-
Git
-
MongoDB
-
DOM
-
AJAX
-
jQuery
-
JavaScript
-
React
Програма онлайн-курсу
Front-end Pro

-
Знайомство з JS
Знайомство та план курсу
Введення в технологію веб-розробки
Підключення скриптів, перший запуск програми
Взаємодія з користувачем через примітивні функції
Git, Github
-
Змінні та оператори
Коментарі
Оголошення змінних
Сплив змінних
Порівняння var, let, const
Типи даних
Оператори
-
Умовні конструкції
Умовна конструкція if/else 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
- Екзамен
Бонуси курсу
Додайте навички в резюме
-
JavaScript (Примітиви, Об'єкти, Масиви, Функції)
-
Навички маніпуляції із DOM деревом
-
Основні патерни програмування
-
ООП у JavaScript
-
Робота з REST API
-
MVC/MVP/MVVM архітектури
-
Бібліотека ReactJS для SPA
-
Принципи роботи роутингу на прикладі бібліотеки react-router
-
Зберігання стану програми на прикладі redux та redux-thunk
Як проходить навчання
Переваги онлайн-навчання в Комп'ютерній школі Hillel
-
Групи по 17 осіб Викладач приділяє час кожному студенту.
-
Викладачі практики У нас викладають тільки практикуючі фахівці з топових IT-компаній.
-
Система особистих кабінетів Ефективне і зручне навчання.
-
Оперативна служба підтримки студентів Термінові питання — своєчасне рішення.
-
Доступ до відеозаписів занять Записи уроків залишаються у студентів після закінчення навчання.
-
Практичні заняття Велика частина занять орієнтована на практику.
-
Що ми робимо для того, щоб ви досягли успіху?
-
Проводимо майстер-класи з підготовки резюме та пошуку роботи
-
Регулярно оновлюємо програми курсів під вимоги ринку
-
Запрошуємо викладати тільки кращих практикуючих фахівців
-
Розвиваємо нашу мережу партнерів серед топових IT-компаній
-
Наші викладачі часто самі забирають до себе наших кращих Студентів ;)
Наші викладачі та випускники працюють в топових IT-компаніях світу
Часті питання
-
Який потрібно мати комп'ютер, щоб навчатися на курсі Front-end Pro?
Вимоги до комп'ютера для навчання на курсі Front-end Pro.
Операційна система:
- Windows 10 64-біт
- macOS 10.13 або вище
- Linux: Ubuntu 16.04 - 20.04
Процесор* :
- Мінімум intel core i5 4-го покоління
- Рекомендується i5 7-го
Оперативна пам'ять:
- Мінімум 8 Гб
- Рекомендується 16 Гб
Пам'ять:
- Мінімально 500 Гб HDD і більш
- Рекомендується 200 Гб SSD і більш
* Допустимі аналоги від AMD
-
Ваші викладачі беруть участь у будь-яких проектах / чи працюють вони по їх IT-спеціалізації / чи мають досвід викладання?
У нашій школі викладають тільки практикуючі фахівці (не нижче Senior-рівня) з найбільших IT-компаній міста. Навчання вони проводять, орієнтуючись на останні тенденції IT-ринку для того, щоб наші випускники мали найбільш затребувані знання і досвід.
-
Де можна подивитися відгуки про вашу Школу?
Ви можете прочитати відгуки наших Студентів та Випускників на нашому сайті за цим посиланням. Ще ви зможете знайти відгуки і інформацію про нас на DOU.ua або можете прописати назву нашої Школи у Google, де ви також зможете побачити відгуки про нашу Школу у Google-акаунті або на Google-картах.
-
Чи будуть задавати домашнє завдання? Чи перевіряється виконане завдання викладачем?
Так! Адже це обов'язкова і дуже важлива частина процесу Вашого навчання. Оскільки кожен студент повинен закріпити весь отриманий на занятті матеріал вдома, за допомогою виконання домашнього завдання. Кожне задане ДЗ буде перевірятися разом з усією групою і викладачем на наступному занятті. Без дотримання даного пункту ніхто не зможе домогтися очікуваного результату.
-
Теорія або практика? Чому приділяється більше часу на заняттях?
Метою більшості курсів нашої Школи є можливість подальшого працевлаштування наших Студентів та Випускників. Тому ми робимо упор на опрацювання та вивчення практичних кейсів, найбільш актуальних на даний момент у роботі тієї чи іншої спеціальності IT-сфери. Безумовно, ми відводимо час на наших заняттях і на вивчення важливої теоретичної бази, яка також необхідна будь-якому фахівцеві. Але зазвичай у процентному співвідношенні теорії приділяється близько 30% часу заняття і 70% — практиці.
-
Як отримати максимальний бал за домашнє завдання?
Виконання домашніх робіт, одна з найважливіших складових навчання. Для того, щоб отримати максимальний бал за домашнє завдання, потрібно:
- Виконати завдання в зазначені терміни
- Виконати всі умови завдання
- Виконати завдання без помилок
- Перездача домашнього завдання не більше одного разу
-
Як я можу сплатити за навчання?
Оплата провадиться через виставлення інвойсу на E-mail через сервіси LiqPay та Fondy.
- Як пройти співбесіду по JS? І навіщо?
- 83713
- 3391
Як пройти співбесіду по JS? І навіщо?
дивитись 71 хв-
Юрій Федоренко Senior Front-End Developer у MacPaw
- Замикання у JavaScript
- 48472
- 3125
Замикання у JavaScript
дивитись 6 хв-
Юрій Федоренко Senior Front-End Developer у MacPaw
- Як пройти співбесіду по JS? І навіщо? vol.2
- 29335
- 1811
Як пройти співбесіду по JS? І навіщо? vol.2
дивитись 69 хв-
Юрій Федоренко Senior Front-End Developer у MacPaw
- JavaScript. Робота з API Telegram, Youtube, VK
- 17062
- 152
JavaScript. Робота з API Telegram, Youtube, VK
дивитись 61 хв-
Петро Кучер JS Developer у Playtika
- Об'єкти і робота з ними в Javascript
- 15718
- 504
Об'єкти і робота з ними в Javascript
дивитись 122 хв-
Савелій Сичов Software Engineer у Microsoft
- Про роботу з DOM в Javascript
- 14200
- 429
Про роботу з DOM в Javascript
дивитись 114 хв-
Савелій Сичов Software Engineer у Microsoft