Full Stack

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

• Роль FrontEnd у світі IT. Взаємодія "фронту" з "беком" і дизайнером.
• Етапи життя проєкту
• Інструменти для розробки (редактор коду, Photoshop, devTools)
• Рендеринг сторінки
• Базові принципи верстки. Кросбраузерність і валідність - що це і чому це важливо
• Браузери
• Структура HTML-документа
• Взаємини блоків: вкладений, дочірній, сусідній, батьківський

CSS

• Що таке CSS
• Способи завдання стилів
• Селектори CSS.
• Каскад ("вага" селекторів)
• Комбінування та угруповання селекторів. Ієрархія селекторів. Успадкування. Значення inherit
• Вбудовані стилі браузерів. CSS reset.
• Блокова модель
• border
• Властивість display
• Потік
• Властивість float
• Позиціювання
• Властивість overflow
• Властивість transition
• Властивість transform
• CSS3-анімація

CSS-Flex-box

• Вбудовані стилі браузера
• Блокова модель
• border
• Box-sizing
• Властивість display
• Потік
• Властивість float
• clearfix
• Властивість overflow

Responsive

• Adaptive & Responsive
• Види "девайсів"
• CSS-інструменти для респонсування
• Налаштування для респонсування сторінки
• Медіа-запити CSS
• Breakpoints (контрольні точки)
• Навігація на сайті
• Pixel Perfect

Практична верстка

• Social networks за допомогою SVG-іконок
• Шрифти та їх підключення
• Практична верстка

GIT

• Основи: команда diff
• Системи контролю версій
• Команда init
• Статуси файлів, команди status, add, commit, config, log
• Робота із віддаленим репозиторієм, ssh, ключі
• Основні команди

Linux

• WHO IS OPERATION SYSTEM
• UNIXWAY
• Automation, scripting, network tools (ssh, rsync, ftp, telnet)
• Networking
• Docker
• Docker-compose

Bootstrap

• Framework. Що? Навіщо? Чому?
• Bootstrap: встановлення, налаштування
• Компоненти Bootstrap
• Утиліти (Utilities)

Модуль 1

Загальний вступ. Знайомство з JavaScript

• Калькулятор
• Вирази
• Властивості виразів
• Змінні
• Присвоєння
• Блоки коду
• Отладка

Вступ до типів даних. Числа та порожні типи.

• Типи даних
• Числа
• Операції та вирази з числами
• Спеціальні значення
• Пусті типи даних

Рядки

• Устройство рядку
• Літерали рядків
• Базові операції з рядками
• Сhaining
• Знайомство з регулярними виразами

Boolean та логічні вирази

• Boolean
• Приведення до типу Boolean
• Тернарний оператор
• АБО (||, ??), І (&&)
• Знайомство з умовами `if-else`

Масиви

• Hoisting (Підняття)
• Масиви
• Черги та стеки
• Посилання
• Деструктуризація
• Цикл for...of
• Ітеруючі методи масивів

Об'єкти

• Об'єкти огляд
• Літерали для створення об'єктів
• Робота зі значеннями в об'єкті
• Посилання
• Spread (...)
• Деструктуризація
• Ключове слово in
• Цикл `for ... in`
• Знайомство з JSON
• Упорядкованість ключів в об'єктах
• Висновки

Функції

• Знайомство: Функції, дії
• Вирази пов'язані з функціями
• Рівні абстракції
• Стрілкові функції =>
• Виклик
• Callback

Висновок про синтаксис, типи даних і вирази. Знайомство з DOM

• Огляд
• Деревовидність коду та його ефекти
• Відокремленість
• Незалежність та зв'язність коду
• Визначення типу значення (typeof та .constructor.name)
• Вирази
• Аксіоми

Розгалуження (if та switch)

• Розгалуження (if і switch)
• Блоки коду
• if-else
• switch-case

Цикли

• Визначення
• Загальна структура циклів
• while, do .... while
• for
• for .... of
• for .... in
• Загальні підходи до написання циклів
• Нескінченні цикли, що не запускаються
• Ітеруючі методи масивів

Замикання

• Області видимості
• Замикання
• Let Over Lambda (LOL)
• Як користуватися замиканнями
• Які проблеми вирішують замикання
• This в стрілочних
• Стандартні помилки
• JS реалізація ООП: замикання теж об'єкти

Redux і друга частина DOM

ФООП

• Принципи ООП
• Функціональне ООП
• Знайомство з new, та прототипами
• Приховування (інкапсуляція)
• Стан

Рекурсія try-catch-finally

Асинхронна архітектура браузера. Promise

• Асинхронна архітектура браузера
• WebAPI
• Мережеві можливості браузера
• Promise: ідея стан, результат
• `then`, `catch`, `finally`
• Що сприймає та повертає `then` та інші методи промісу

Async, Await. Паралельність vs послідовність

• Async, Await
• Паралельність та Послідовність
• Хронологія роботи та результат асинхронної функції
• Схожість із звичайними функціями
• Симетрія виклику
• Використання .then та .catch спільно з await
• Коли використовувати послідовний або паралельний сценарій виконання коду і як цим керувати

REST, GraphQL та JWT

• Загальний огляд розповсюджених сучасних мережевих API.
• REST - простий та нестандартизований
• GraphQL більш потужний
• Яким чином сервер відрізняє користувачів від анонімів та один від іншого

Redux Thunk та CombineReducers. Модульне завдання

• Просунутий Redux - сценарії роботи з Redux та засоби об'єднання ред'юсерів.
• Підготовка до модульного завдання

Генератори

ООП, Прототипне ООП, ES6 класи

• Принципи ООП
• Будова JS Класів - Конструктори та Прототипи
• Наслідування

Консультаційні заняття

Модуль 2

Вступ

• Що є ядро ​​та API
• Що є в ноді
• Серверне господарство
• Файли. Бази. Мережа
• npm
• Підходи до реалізації обробки безлічі клієнтів
• Мультитред
• Async/coroutines
• Потоки

Мережа та Express

• Що і навіщо?
• MVC
• REST
• + && -
• File Upload
• Alternatives
• JSON-RPC
• graphql

Знайомство з СКБД. NoSQL. MongoDB. ODM

• Mongo та mongoose

SQL СКБД. MariaDB/MYSQL. DDL

• Datatypes
• Data Definition Language
• CREATE DATABASE && TABLES
• CRUD (create-read-update-delete)

SQL СКБД. MariaDB/MYSQL. DML. Знайомство з ORM

• INSERT, DELETE, SELECT, JOINS
• Sequelize

JWT Аутентифікація, знайомство з GraphQL

• Як працює аутентифікація
• Як створити та підписати JWT Token
• Різниця між GraphQL та REST
• Базовий каркас GraphQL

Захист модульноi роботи

Вступ. Загальний огляд, шаблонiзацiя та JSX.

• Загальний огляд: Що таке React та якi проблеми вiн вирiшує
• Шаблонiзацiя. Що повинні вмiти шаблонiзатори
• Верстка та JSX
• children
• JSX синтаксис. Toolchain. Пошук та замiна
• Ланцюжок JSX => React.createElement => VirtualDOM
• Можливостi та особливостi JSX

Стан

• Коли оновлюється (перевикликається) компонент React
• Стан
• Програмний інтерфейс компоненту
• Проблеми функцiональних компонентiв

Життєвий шлях та цикл, Компоненти-класи

• Життевий шлях та цикл
• ref
• Аксiоми React
• Мінімальний компонент-клас, Пропс, Стан в компонентах-класах
• Життевий шлях та цикл

Засоби комбiнування коду в React

• Controlled Components
• Контейнери та презентори
• Render Prop
• High Order Component (HOC)
• Custom Hooks

Routing та Redux

• Router
• Route
• Link
• Параметри
• Redirect
• Hooks
• Redux
• connect
• useDispatch
• useSelector

Redux Toolkit

• Redux Toolkit
• RTK-Query
• redux-persist

Випуск

Опис

• Дипломна робота включає в себе створення сайту. Сайт має містити: реєстрацію та логін, індивідуальний кабінет (залежить від конкретного проєкту), роутинг, захищений роутинг за наявності ролей на беку, заливка файлів, структурне розташування коду на диску, один із фреймворків або своя верстка: Bootstrap, Ant Design. Структурна верстка, розбиття на компоненти за суттю. Сховище, Redux + кілька ред'юсерів, серверна взаємодія та тривалі сценарії: actionCreator + Thunk або Saga, робота з беком.

Захист дипломної роботи

• Необхідно здати практику, передбачає демонстрацію робочого проєкту, відповіді на будь-які питання пов'язані з проєктом, демонстрацію коду на вимогу. Та здати співбесіду на Junior Developer, сторонньому, незалежному експерту За обидва блоки можна отримати від 0 до 10 балів