Курс Full-Stack JavaScript

Курс Full-Stack дозволить швидко засвоїти навички розробки на JavaScript з клієнтської і серверної сторони. В процесі навчання студенти дізнаються що таке Node.js, Express, React та як їх застосовувати, як створювати повноцінні веб-додатки з нуля, розробляти RESTful API.

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

Вступ. Встановлення необхідного ПЗ

• Знайомство та план курсу
• Типи файлів
• Браузер
• Мови програмування
• Редактори коду

HTML

• Структура HTML-документу
• Теги, атрибути тегів
• Розмітка тексту за допомогою HTML
• Посилання, списки, таблиці
• Зображення. Формати зображень
• Форми
• Медіа (video, audio). Iframe
• Теги-орієнтири (header, main, aside, nav, section, article)

Git. Github

CSS

• Каскадність. Спадкування
• Підключення CSS
• Рідні стилі. Normalize.css Reset.css
• Селектори
• Стилізація тексту, шрифти
• Блокова модель
• Float. Float layout. Clearfix
• Position
• Псевдокласи. Псевдоелементи
• Flexbox. Flexbox layout
• CSS Grid. Grid layout
• CSS препроцесори, фреймворки, методології

Просунута робота з графікою

• SVG
• SVG спрайти
• Іконочні шрифти
• Адаптивна графіка. Тег picture
• Оптимізація графіки

Адаптивна верстка

• Viewport. @media
• Одиниці вимірювання vh, vw, vmin, vmax, rem
• Знайомство з концепцією Responsive Web Design
• Mobile-first/Desktop-first
• Оптимізація сторінки

Семантика і доступність

• Семантична розмітка
• Доступність для користувача інтерфейсів

CSS анімації

• Transform
• Transition
• Filter
• Animation

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

• Знайомство та план курсу
• Введення в технологію веб-розробки
• Підключення скриптів, перший запуск програми
• Взаємодія з користувачем через примітивні функції
• 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
• Практика

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

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

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

• Огляд популярних бібліотек та фреймворків
• Встановлення бібліотек за допомогою 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

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

NodeJS

• Eventloop
• Стандарти, які підтримуються (ECMAscript 5, ECMAscript 6)
• Core
• Streams
• Event emitter

Знайомство з асинхронністю

• Callback
• Promise
• Async (caolan)
• Sync/await

Знайомство з проміжними обробниками

Connect.

Створення веб-сервера

• HTTP
• Express

Використання шаблонизаторів

• Pug
• Nunjucks

Робота з MongoDB

• Query
• Aggregation

Підключення та документація

• Підключення авторизації і аутентифікації
• Тестування і написання документації

Виконання дипломного проєкту

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

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

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

• Сергій Никифоров - Front-end Developer at LiveKick
• Влад Балабаш - Solution Architect, Senior JavaScript Developer
• Владислав Повелиця - Front-end Developer at SOLAR Digital
• Денис Когут - Lead Software Engineer
• Михайло Педченко - Front-end Engineer at GlobalLogic
• Олексій Толстоног - Software Developer at SoftServe
• Андрій Фоменко - Architect at Astravel
• Олексій Павленко - Senior Full-Stack JavaScript Developer at Sitecraft