Онлайн-курс
Full-Stack

Знайомство та план курсу

Типи файлів

Браузер

Мови програмування

Редактори коду

Структура HTML-документу

Теги, атрибути тегів

Розмітка тексту за допомогою HTML

Посилання, списки, таблиці

Зображення. Формати зображень

Форми

Медіа (video, audio). Iframe

Теги-орієнтири (header, main, aside, nav, section, article)

Каскадність. Спадкування

Підключення CSS

Рідні стилі. Normalize.css Reset.css

Селектори

Стилізація тексту, шрифти

Блокова модель

Float. Float layout. Clearfix

Position

Псевдокласи. Псевдоелементи

Flexbox. Flexbox layou

CSS Grid. Grid layout

CSS препроцесори, фреймворки, методології

SVG

SVG спрайти

Іконочні шрифти

Адаптивна графіка. Тег picture

Оптимізація графіки

Viewport. @media

Одиниці вимірювання vh, vw, vmin, vmax, rem

Знайомство з концепцією Responsive Web Design

Mobile-first/Desktop-first

Оптимізація сторінки

Семантична розмітка

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

Transform

Transition

Filter

Animation

Знайомство та план курсу

Введення в технологію веб-розробки

Підключення скриптів, перший запуск програми

Взаємодія з користувачем через примітивні функції

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-елементів

Фази обробки подій

Делегування подій

Об’єкт event та його методи

BOM-об’єкти

Основні елементи-керування

Базові навички динамічної роботи з елементами керування

Валідація отриманих даних від користувача

Cookies

LocalStorage

SessionStorage

Практика

Створення регулярного вираза

Робота з регулярними виразами за допомогою методів

Модифікатори регулярних виразів

Структура шаблонів. Метасимволи. Дужки. Квантифікатори

Огляд популярних бібліотек та фреймворків

Встановлення бібліотек за допомогою NPM

Приклади роботи з розповсюдженими бібліотеками

EventLoop

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

EcmaScript

Babel

Spread & Rest оператори

Деструктурізація масивів та об’єктів

Оператор Nullish coalescing

Оператор Optional chaining

Інші найновіші оператори

Огляд клієнт-серверної архітектури

Що такое протокол HTTP та як він працює

Огляд технології Ajax

Методи роботи з сервером по технології Ajax

Приклади відкритих API

Технологія WebSockets

Вступ до Promise

Стан Promise

Обробка Promise за допомогою методів then, catch, finally

Одночасна обробка кількох Promise

Livecoding

Основні поняття ООП

Фунції-конструктори

Прототипне успадкування

Створення об’єкту з певним прототипом

Створення сутностей за допомогою class

Успадкування сутностей створених через class

Приватні властивості

Статичні властивості за методи class

Практика

Створення власних асінхронних функцій

Обробка асінхронних функцій з інструкцією await

Обробка помилок

Огляд сучасних систем збирання коду

Основи роботи з Gulp

Компіляція та зборка sass-файлів

Транспіляція та зборка js-файлів

Плагін ESLint

Огляд можливостей Webpack

Встановлення та конфігурація Webpack

Налаштування базових лоадерів та плагінів до Webpack

Запуск локального серверу за допомогою Webpack

Огляд поняття SPA

Введення в React

Основні концепції React

Створення первого React-додатку

Основи роботи з JSX

Варіанти створення компонентів

Передача props до компонентів

Обробка подій у React-компонентах

Етапи життєвого циклу компонентів

Порівняння класових та функціональних компонентів

Робота з класовим компонентом

Методи життєвого циклу класового компоненту

Робота зі state

Основи роботи з функціональним компонентом

Особливості роботи з хуками: useState, useEffect, useRef, useCallback, useMemo, useContext

Створення власних хуків

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

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

Огляд бібліотек-компонентів AntD/Material UI

Робота з стилями у React за допомогою CSS-модулів та бібліотеки styled-components

Огляд бібліотеки для створення таблиць даних Ag Grid

Що таке state management?

Вступ до Redux та основні поняття

Основні етапи data flow у Redux

Інтеграція Redux з React-додатком

Робота з хуками useDispatch та useSelector

Middlewares на прикладі redux-thunk

Livecoding

Оптимізація роботи з Redux за допомогою Redux-Toolkit

Основні поняття Redux-Toolkit

Створення та використання RTK Query

Вступ до TypeScript — переваги та недоліки

Статична типізація у TypeScript

Типи та інтерфейси

Аліаси, можливі значення, необов’язкові параметри

Generics

Робота з TypeScript в React-додатку

Основні поняття тестування програмного забезпечення

Модульне тестування за допомогою бібліотеки Jest

Тестування React-додатків за допомогою бібліотеки React-Testing-Library

Eventloop

Стандарти, які підтримуються (ECMAscript 5, ECMAscript 6)

Core

Streams

Event emitter

Callback

Promise

Async (caolan)

Sync/await

Connect

HTTP

Express

Pug

Nunjucks

Query

Aggregation