Курс Fullstack розробник

Курс для тих, хто хоче стати Full Stack Developer з нуля. На заняттях ви опануєте усі необхідні інструменти frontend & backend розробки: HTML/CSS, JavaScript, React, React Native, Node.js, а також здобудете комплекс необхідних hard та soft скілів для роботи.

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

HTML/CSS

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

• Що потрібно знати.
• Для чого потрібна ця професія.
• Що таке веб.
• Шляхи розвитку.

Початок роботи

• Налаштування середовища.
• Програми для роботи.
• Завантаження першого сайту.

Введення у HTML

• Теги та атрибути.
• Семантика.
• Робота з текстом.
• Зображення.
• Інтерактивні елементи.
• Списки.

Продовження HTML

• Інструменти розробника.
• Таблиці.
• Символьні підстановки.
• Медіаконтент, фрейм.
• Оформлення і валідація коду.

Введення в CSS

• Підключення стилів.
• Синтаксис, селектори.
• Каскадність і специфічність.
• CSS змінні.

Шрифти

• Підключення шрифтів.
• Локальні шрифти.
• Оформлення тексту.

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

• Геометрія елемента.
• Типи елемента.
• Структурні псевдокласи.

Flexbox

• Основні концепції.
• Flex-контейнер і flex-елемент.
• Практичне застосування.

Розкладка CSS Grid

• Основні концепції.
• Grid-контейнер.
• Grid-елемент.
• Практичне застосування.

Декоративні ефекти

• Типи зображень.
• Фон.
• Градієнти.
• Тінь.
• Псевдоелементи.

Графіка

• Растрова графіка.
• Векторна графіка. SVG.
• Додавання SVG на сторінку.
• SVG-спрайт.

Позиціонування

• Типи позиціонування.
• Властивість overflow.
• Накладання елементів.

Анімація

• Трансформація.
• Переходи.
• Анімація.

Практика: тестування API

• Основи роботи.
• Елементи форм.
• Групування полів.

Валідація веб-форм

• Види валідації.
• Перевірка введених значень.
• Псевдокласи стану.

Препроцесори

• Препроцесори SASS, SCSS.
• Вкладені правила.
• Директиви.
• Вендорні префікси.

CSS Методології

• Навіщо потрібні методології.
• Методологія БЕМ.
• Блок, елемент, модифікатор.

Адаптивність і Адаптивна графіка

• Типи і види верстки.
• CSS media запити.
• Стратегії Mobile і Desktop first.
• Адаптив і ретинізація фонових та контентних зображень.

Іспит HTML/CSS

Іспит з пройденого матеріалу.

JavaScript

Введення

• JavaScript – що це таке.
• Підключення скрипта.
• DevTools.
• Визначення об'єктів, властивостей та методів.
• Типи данних.

Оператори

• Оператори.
• Вивід данних/Ввід данних.
• Вирішення логічних задач та побудова алгоритмів.
• Умови if/else та switch/case.

Масиви і цикли

• Масиви.
• Цикли.
• Методи присвоєння.
• Методи масиву.
• Області видимості.

Функції

• Функції.
• Стрілочні функції.
• Лексичне оточення.
• Контексти і виклики.

Замикання this

• Замикання this.
• Контексти і виклики.
• Call, apply, bind.

Об'єкти та класи

• ООП.
• Об'єкти.
• Інкапсуляція, абстракція, наслідування, поліморфізм.
• Практика.

ES6

• Конструктори.
• Внутрішні методи.
• Прототипи.
• ES6.

DOM

• DOM.
• Навігація по DOM.
• Властивості.
• Робота з DOM-вузлами.

Події

• Події.
• Форми.
• Event propagation.
• Drag'n'Drop.

Local Storage & Node.js

• Local Storage.
• Node.js.
• Установка і використання.
• Додавання/видалення бібліотек.

Асинхронний Js & дата

• Асинхронний JS.
• Синхронність, асинхронність, багатопотоковість.
• SetTimeout і setInterval.
• Дата.
• Promise.

Протоколи передачі даних

• TCP/IP.
• HTTP.
• HTTPS.
• Коди відповіді.
• Помилки і обробка.

REST API

• REST API.
• Ajax.
• Fetch.
• Практика.

WebPack & Gulp

Складання проєктів: WebPack, Gulp.

React

• Основи популярної бібліотеки.
• Створення зборки.
• Використання React на прикладах.

Іспит з JavaScript

React

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

• Що таке React.
• Налаштування і інструменти.
• Що таке JSX.
• Компоненти.
• Компоненти-класси vs Функціональні компоненти.

State & Події

• Ререндер компонентів.
• Що таке стейт.
• Що таке JSX.
• Робота зі стейтом, зміна та оновлення стейту.
• Події і SyntheticEvent Object.

Props, види рендеру

• Рендер за умовою.
• Рендер колекцій, Що таке key.
• Що таке Props.
• Передача пропсів між компонентами.

Життєві цикли компонентів

• Монтування, оновлення та розмонтування.
• Методи класового компоненту:
  • componentDidMount;
  • componentDidUpdate;
  • componentWillUnmount.

Хуки частина 1

• useEffect.
• useLayoutEffect.
• useState.
• useReducer.
• useRef.

Хуки частина 2, кастомні хуки React memo

• Хуки для оптимізації, useMemo, useCallback.
• React memo.
• Що таке кастомні хуки, як їх використовувати.

Стилізація

• Inline Styles (інлайнові стилі).
• Звичайний CSS.
• CSS модулі.
• CSS in JS.

Форми

• Неконтрольовані елементи.
• Контрольовані елементи.
• Складні форми.
• Бібліотеки для роботи з формами.

HTTP запити

• Робота з REST АРІ, хороші практики.
• Обробка процесу завантаження.
• Обробка помилок, Error Boundary.

Реакт роутинг, частина 1

• Що таке URL, структура.
• Бібліотека React Router.
• Базовий роутинг Routes and Route.
• Вкладені роути.
• Компонент Outlet.
• Компоненти Link, NavLink.

Реакт роутинг, частина 2

• Робота з історією.
• Приватні роути.
• Програмна навігація "useNavigate" і "navigate".
• Lazy Loading.
• ErrorElement для обробки помилок в додатку.

Стейт менеджмент, useContext. Бібліотека Redux частина 1

• UseContext.
• Вступ до стейт менеджменту, які найпопулярніші.
• Вступ до бібліотеки Redux, Redux Toolkit.
• Базове налаштування бібліотеки Redux.

Бібліотека Redux частина 2

• Робота з Redux Toolkit.
• ConfigureStore.
• CreateAction.
• CreateReducer.
• CreateSlice.

React Native

Знайомство з React Native

• Що таке React Native.
• Особливості роботи.
• Expo.
• Відмінність React від React Native.
• Документація.

Теги і робота з данними

• Огляд базових компонентів.
• Введення даних.
• Обробка данних.
• AsyncStorage.

Стилі

Робота зі стилями.

Навігація

• Створення екранів.
• Переключення екранів.
• Передача данних між сторінками.

Додаткові включення

• Робота з картами.
• Робота з календарем.
• Доступ до данних.

API

• Підключення бібліотеки.
• Надсилання запитів.
• Обробка результатів.

Зовнішні посилання і QR

• Створення сторінки з зовнішніми посиланнями.
• Обробка QR-code.

Завершення

• Рефактор коду.
• Збірка білда для Android.

Node.js

Основи Node js. Цикл подій. Створення консольного застосунку

• Що таке Node.js.
• Робота з бібліотеками.
• Написання консольного застосунку та його запуск.
• Робота з дебагером у VSCode.

Основи Express. CRUD. Postman

• Встановлення.
• Що таке CRUD.
• Написання найпростішого серверу.
• Робота з Postman.

Бази даних. Реляційна база даних SQLite

• Види баз даних.
• Реляційні бази.
• Встановлення SQLite.
• Робота з SQLite.
• Мова SQL.
• Додавання у сервер роботи з базою даних.

Нереляційні бази даних. MongoDB. Схеми й методи Mongoose

• Відмінності реляційних і нереляційних баз данних.
• Встановлення MongoDB.
• Додавання у сервер роботи з базою даних.

Аутентифікація

• Безпека застосунку.
• Захист даних користувача.
• Додавання таблиці користувачів.
• Допуск до виклику ендпоінтів гостей (незареєстрованих юзерів), звичайних юзерів та адміністраторів.

Робота з файлами. Буфери. Завантаження файлів у базу даних

• Стандартна бібліотека роботи з файлами.
• Читання, створення, редагування та зберігання файлів.
• Обробка помилок.
• Завантаження файлів у базу даних.

Робота з об'єктами у Node.js

• Робота з об'єктами. Обмеження.
• Властивості об'єкту.
• Методи роботи з об'єктами.
• Цикл for…in.

Створення модулів. Тестування. Mocha. Chai

• Створення власних локальних модулів.
• Import та required.
• Тестування коду. Хто має писати тести?
• Приклад тестування коду за допомогою Mocha та Chai.
• Дебагер у тестах.

Фінальний проєкт. Розробка серверу. Деплой на Heroku. Допоміжні інструменти розробника: основи git, linter

• Завершення розробки серверу.
• Оформлення проєкту у репозиторії.
• Написання документації до проєкту.

Пошта. Docker

Вебсокети

Python

Введення в Python. Встановлення середовища

• Ознайомлення з мовою Python: історія, застосування
• Встановлення Python та налаштування середовища розробки
• Запуск першої програми на Python

Основи синтаксису Python: змінні, оператори, типи даних

• Змінні та їх типи: числа, рядки, списки, словники
• Оператори: арифметичні, порівняння, логічні
• Вбудовані функції для роботи з типами даних

Керуючі конструкції: умовні оператори та цикли

• Умовні оператори: if, else, elif
• Оператори порівняння та логічні вирази
• Цикли: while і for. Ітерування по послідовностям

Структури даних: списки, кортежі, словники

• Списки: створення, індексація, зрізи, методи
• Кортежі: особливості та використання
• Словники: ключі, значення, методи роботи

Функції та модулі

• Визначення та виклик функцій
• Параметри функцій: позиційні, іменовані
• Робота з модулями: імпорт, створення власних модулів

Введення в ООП. Класи та об'єкти

• Основні поняття ООП: класи, об'єкти, атрибути, методи
• Створення класів та екземплярів класів
• Ініціалізація об'єктів через конструктор

Наслідування та поліморфізм

• Принцип успадкування та його застосування
• Розширення класів, перевизначення методів
• Поліморфізм: загальний інтерфейс для різних класів

Інкапсуляція та абстракція

• Інкапсуляція: обмеження доступу до атрибутів та методів
• Абстракція: визначення загального інтерфейсу класу
• Абстрактні класи та методи

Принципи SOLID в ООП

• Принцип єдиного обов'язку (Single Responsibility Principle)
• Принцип відкритості/закритості (Open/Closed Principle)
• Принцип підстановки Барбари Лісков (Liskov Substitution Principle)
• Принцип розділення інтерфейсу (Interface Segregation Principle)
• Принцип інверсії залежностей (Dependency Inversion Principle)

Основи веб-розробки та архітектура клієнт-сервер

• Основні поняття веб-розробки: клієнт, сервер, HTTP-протокол
• Принципи роботи клієнт-серверної архітектури

Введення до FastAPI. Встановлення та перша програма

• Знайомство з фреймворком FastAPI: особливості, переваги
• Встановлення FastAPI та створення простої веб-програми
• Маршрутизація запитів та обробка маршрутів

Введення до баз даних та ORM (Object-Relational Mapping)

• Основи роботи з реляційними базами даних
• Поняття ORM та переваги його використання
• Інтеграція ORM SQLAlchemy з FastAPI

Визначення моделей даних та створення таблиць

• Визначення класів моделей даних з використанням SQLAlchemy
• Створення таблиць в базі даних на основі моделей

CRUD-операції та робота з даними

• Створення, читання, оновлення та видалення даних з використанням SQLAlchemy
• Основи роботи з сесіями та транзакціями

Введення до аутентифікації та авторизації

• Розрізнення між аутентифікацією та авторизацією
• Токени аутентифікації та їх роль у веб-програмах

Реалізація аутентифікації з використанням JWT (JSON Web Tokens)

• Генерація та перевірка JWT-токенів
• Інтеграція аутентифікації з FastAPI

Реалізація авторизації та управління доступом

• Розділення прав доступу користувачів
• Реалізація ролей та дозволів

Валідація даних та обробка запитів

• Валідація даних, що надходять від клієнтів
• Використання пайплайнів для обробки даних запитів

Робота з файлами та завантаження даних

• Завантаження та зберігання файлів на сервері
• Робота з зображеннями та іншими медіафайлами

Docker для розгортання веб-програм

• Основи Docker: контейнеризація, образи, контейнери
• Створення Docker-контейнера для FastAPI-програми

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

• Виявлення та усунення вузьких місць у програмі
• Кешування даних та оптимізація запитів до бази даних

Введення в тестування веб-програм

• Типи тестування: модульне, інтеграційне, функціональне
• Написання та запуск тестів з використанням бібліотеки Pytest

Створення API документації за допомогою Swagger

• Автоматична генерація документації на основі коду
• Інтеграція Swagger UI з FastAPI

Розробка фінального проєкту

Студенти розроблять свій власний веб-проєкт на основі вивченого матеріалу.

Розгортання фінального проєкту

Підготовка та розгортання фінального проєкту на віддаленому сервері з використанням Docker.

Soft skills IT

Що таке soft skills

• Які бувають?
• Де застосовувати?
• Як виміряти свій рівень володіння soft skills.
• Як покращувати свої скіли.

Soft skills для IT спеціаліста

• Для чого IT спеціалісту розвивати soft skills?
• Комунікація: як прокачати і де знадобиться.
• Креативність і гнучкість: як прокачати і де знадобиться.
• Самодисципліна: як прокачати і де знадобиться.
• Критичне мислення: як прокачати і де знадобиться.
• Уважність: як прокачати і де знадобиться.
• Проактивність: як прокачати і де знадобиться.
• Адаптивність: як прокачати і де знадобиться.
• Інші навички.

Цілі і їх досягнення

• Колесо балансу.
• Як зрозуміти чого хочу саме я?
• Як правильно поставити свої цілі (смарт).
• Як декомпозувати цілі.
• Як досягати своїх цілей?

Емоційний інтелект/Емпатія

• Що таке емоційний інтелект?
• Ща таке емпатія і чим відрізняється?
• Як це застосовувати з вигодою для себе.
• Особисті кордони при високому рівні емпатії.

Основи комунікації

• Що таке екологічна комунікація?
• Види комунікації.
• Бар'єри в комунікації.
• Ціль в комунікації, як її побачити і застосувати на практиці.
• Правила успішної комунікації.

Конфліктологія

• Що таке конфлікт? Чому це добре?
• Який ідеальний результат конфлікту.
• Види та способи розв'язання конфліктів.
• Як зберігати спокій під час конфліктів.

Ораторське мистецтво

• Навіщо нам рот?
• Як говорити так, щоб тебе почули?
• Як правильно, ефективно та швидко доносити свої думки.
• Страх говорити.

Ефективне навчання

• Що таке ефективне навчання?
• Як правильно навчатись?
• Принципи швидкого і якісного навчання.
• Як не забути все, що вивчив.

Основи фінансової грамотності

• Скільки грошей мені треба для щастя?
• Скільки грошей мені треба насправді?
• Як вести власний бюджет і знати куди і звідки приходять гроші?
• Лайфхак: де взяти гроші, коли їх нема?

Планування і тайм-менеджмент

• Як правильно визначити пріоритетність задач?
• Принципи планування і тайм менеджменту.
• Багатозадачність: добре чи погано? Як встигнути все?
• Трекінгові системи.

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

• Заняття проходять 3 рази на тиждень
• Запис кожного заняття буде доступний в особистому кабінеті
• Практичні домашні завдання
• Живі Q&A-сесії в онлайн-форматі
• Викладачі – практикуючі фахівці у IT-компаніях
• Додаткові переваги у пакеті "Pro"

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

• Богдан Лущенко - Fullstack Developer
• Крістіна Малітовська - Frontend/Mobile Developer
• Дмитро Рябовол - Розробник UI інтерфейсів. Markup developer at Studytube
• Дарія Звягіна - Head of Product and Service
• Костянтин Полішко - Senior front-end developer at Calaton-systems USA
• Дмитро Бузоверя - Python Developer at AJAX Systems