Курс Frontend for Backend Developer

Людей, які одночасно володіють великою кількістю скіллів та виконують всі обов’язки світу, називаються оркестрами. У світі розробників також є такі представники — Full Stack Developer-и: і серверну частину продукту створить, і front-end налаштує, і в тестування може, і з базами даних впорається. Щоб вивчити такий обсяг інформації та практично все опрацювати з нуля, необхідно чимало часу, а головне — мотивації, і один курс не стане панацеєю й не зробить з новачка профі. Однак якщо ти вже маєш базові знання з бекенд-розробки, і тобі не вистачає навичок з фронтенду для того, щоб назвати себе FullStack Developer, ти на правильній сторінці.

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

Заняття-знайомство

Познайомимося, дізнаємось більше про курс та обговоримо організаційні моменти, а також з'ясуємо, з якою IDE працюватимемо.

Загально про HTML

• Що таке HTML
• Структура html-документа та основні теги
• Посилання та навігація

Елементи HTML

• Таблиці та Форми
• Зображення та інші теги

CSS

• Що таке CSS
• Способи підключення стилів
• CSS-селектори та основні CSS-властивості

Вступ до JavaScript

• Що таке JavaScript
• Інтеграція JS у HTML
• Змінні
• Типи даних

Оператори та конструкції

• Вирази та оператори
• Створення умовних конструкцій (if...else, switch-case, ternary)
• Розуміння та робота з циклами (while, do...while, for-loop)

Масиви, функції та об'єкти

• Масиви, а також їх методи
• Функції та область видимості в JS
• Об'єкти. Їх властивості та методи

Ajax та HTTP-запити

• Основи та розуміння Ajax
• HTTP-протокол та статуси
• Процес очікування завантаження даних. Loading
• Робота з JSON

Введення в RESTFul API та основи роботи з HTTP-запитами

• Основи RESTFul API
• HTTP та його роль у RESTFul API
• Формати даних та обмін даними в RESTFul API
• Основи роботи з API-ключами та автентифікацією

React: вступне заняття

• Знайомство з React i JSX
• Components та Props
• Методи стану та життєвого циклу

Робота з версткою в React

• Обробка подій
• Умовне відтворення
• Списки та ключі

Форми та контрольовані компоненти

Розглянемо, як створювати форми та контрольовані компоненти.

HTTP-запити та React Router: як користуватися

• Обробка HTTP-запитів
• Маршрутизація за допомогою React Router

Аутентифікація та авторизація у веб-додатках (JWT, OAuth, OpenID Connect)

• Основи аутентифікації та авторизації
• JSON Web Tokens (JWT)
• OAuth 2.0
• OpenID Connect
• Реалізація аутентифікації та авторизації у веб-додатках

Всуп до Material UI

Знайдемо відповіді на запитання:

• Що таке Material UI і його переваги?
• Як встановити Material UI у вашому проєкті?
• Огляд компонентів і стилів Material UI

Основні компоненти та стиль

Розглянемо такі підтеми:

• Основні компоненти, такі як Button, Textfield, and Checkbox
• Компоненти стилю з вбудованими стилями та назвою класу
• Використання постачальника тем і об’єкта теми Material UI для налаштування стилю

Layout та Grid system

• Розуміння Material UI Grid system
• Використання контейнерів і точок зупину для адаптивного дизайну
• Створення базового макета за допомогою компонентів Grid

Розширені компоненти та налаштування

• Додаткові компоненти, такі як Table, List, and Dialog
• Налаштування компонентів Material UI за допомогою реквізитів і замін
• Створення власних компонентів за допомогою системи стилів Material UI

Найкращі практики використання Material UI

• Написання багаторазового та підтримуваного коду за допомогою Material UI
• Розуміння API та документації Material UI
• Використання Material UI з різними бібліотеками CSS-in-JS, такими як Styled Components або Emotion

Введення в GraphQL

• Основи GraphQL
• Схема та типи у GraphQL

Вступ до Redux

Що таке Redux і чому він корисний?

Підключення до React:

• Принципи Redux, включаючи магазин, дії та редуктори
• Контейнерні компоненти та презентаційні компоненти
• Actions та State — короткий огляд

Actions та Reducer

• Як створити actions в Redux?
• Синхронні та асинхронні actions
• Обробка actions в Redux
• Як працюють reducers в Redux?
• Чисті функції та reducers
• Комбінування reducers

Middleware

• Як працює Middleware в Redux?
• Створення Middleware
• Логування та асинхронні запити з Middleware

Асинхронний Redux

• Як працює асинхронний Redux?
• Redux-Thunk
• Redux-Saga

Тестування React та Redux програми

• Тестування компонентів React
• Тестування Redux
• Тестування асинхронного коду
• Інтеграційне та функціональне тестування
• Оптимізація та покращення якості коду

Заняття з англійської

Технічні навички - це круто, однак який розробник без англійської?

Кар'єрна консультація з рекрутером

Рекрутер допоможе тобі скласти резюме та скоординує в пошуку роботи.

Q&A Session

Будь які запитання знайдуть свої відповіді на цьому занятті. І так - це останнє заняття, після якого ти можеш впевнено казати - "Я знаю, як використовувати фронтенд!"

Результат після проходження курсу:

• Розуміння принципів і практик фронтенд-розробки
• Досвід створення повноцінного застосунку
• Знання основ взаємодії між фронтендом і бекендом
• Портфоліо

Попередні вимоги для курсу

Ти маєш знати:

• Основи бекенд-розробки
• Досвід роботи хоча б з однією мов програмування
• Досвід роботи хоча б з однією з баз даних
• Розуміння принципів роботи веб-технологій
• Базові знання про основні патерни проєктування
• Досвід роботи з системами контролю версій
• Навички читання і розуміння англомовної тех-документації
• Уміння працювати в команді та використовувати засоби комунікації
• Базові навички роботи з командним рядком та інструментами для розробників
• Відкритість до вивчення нових технологій

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

• Лекції в зручний час
• Практичні заняття
• Невеликі групи
• Підтримка ментора
• Сертифікат
• Можливість контракту з IT-компанією
• 27 онлайн-занять
• Доступ до додаткових матеріалів — презентацій, записів лекцій, чек-листів
• Готовий проєкт на фініші курсу, який ти зможеш додати до портфоліо

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

Владислав Байрак - Senior Full Stack Developer at CHI Software