Курс Front-end

Створюючи програму курсу Front-End, викладачі IT-школи A-Level додали до неї всі необхідні та актуальні інструменти фронтенд розробника.

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

Модуль 1 - Верстка

Знайомство з 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

Модуль 2 - JavaScript

Що таке JavaScript?

• ECMAScript
• Модель документу
• Автоматичне керування пам'яттю
• Відсутність сурової типізації даних
• Відсутність засобів для введення та виведення інформації (не підтримується - - запис/читання файлів)
• Відсутність доступу до функцій операційної системи
• Обробка дій користувача та подій браузера

Початок роботи. Основи JS

• Приведення типів
• NaN | null | Infinity
• BigInt (ES10)
• Функції
• Методи рядків
• Практика інтегрування скриптів у сторінки

Завантаження скриптів

• Async
• Defer
• Методи рядків
• Практика інтегрування скриптів у сторінки

Типи даних

• Типи даних JavaScript
• Number (число)
• String (рядок)
• Boolean (логічний тип)
• Null
• Undefined (тип невизначений)
• Object (об'єкт)
• Symbol
• BigInt (спосіб представляти цілі числа більше 253 - 1)

Hoisting (Підняття)

• Hoisting (Підняття)
• Змінні
• Var
• Let та const
• Замикання

Рядки

• Створення рядка
• String
• Перенесення рядка
• Використання змінних
• Екранування символів
• Масив
• Методи

Числа

• Складання та конкатенація
• NaN та Infinity
• Методи
• Math

Об'єкти

• Об'єкт
• Створення об'єктів
• Використання об'єктів
• Копіювання об'єктів
• Дескриптори властивостей об'єктів
• Структура дескриптора
• Властивість configurable, enumerable, value, writable, get, set
• Клас Object
• Прототипи об'єктів
• Прототипне успадкування
• Властивість prototype

Масиви

• Масив
• Створення масиву
• Доступ до елементів масиву
• Зміна масиву
• Методи масивів
• toString/join
• unshift/push
• shift/pop
• concat/slice
• splicefilter/sort
• find/some/every
• reducemap

Змінні

• Оголошення змінних JavaScript
• Іменування змінних JavaScript

Різниця між var, let i const

• var
• let
• const

Приведення типів

• Приведення до рядка
• Приведення до
• Логічне приведення

Оператор умови (if)

• Оператор if
• Оператор switch
• Тернарний оператор

Цикли (for)

• while
• do...while
• for
• for...of
• for...in
• Використання continue i break

Функції (function)

• Функція
• Оголошення та виклик функції
• Аргументи
• Ключове слово return
• Стрілочні функції
• Контекст
• Область видимості

Date

• ISO Date
• Методи

ООП

• Що таке ООП?
• Класи в ООП
• Асоціація
• Успадкування
• Перевантаження
• Недоречне застосування
• Абстрактні класи
• Поліморфізм
• Інкапсуляція
• Аксесори (гетери та сеттери)
• Абстракція
• Рівень абстракції

Класи

• Оголошення функції
• Оголошення класу
• Успадкування
• статичні методи та властивості
• Дескриптори у класах
• get, set

Замикання. Таймери

• setTimeout()
• setInterval()
• setImmediate()

DOM

• Отримання елементів DOM
• Зміна елементів DOM
• Видалення елементів з DOM

Local i Session Storage

• Promise - async/await
• Виключення
• Fetch API
• Модулі
• Window

Модуль 2

Модуль 3 - React

Що таке SPA?

• Що таке SPA?
• SPA: Плюси
• SPA: Мінуси
• Складові SPA

Що таке React?

• Вступ до React
• Віртуальний DOM
• Інші особливості React
• Видача індивідуальних робіт

Що таке JSX?

• JSX
• Вбудовування виразів у JSX
• JSX це теж вираз
• Використання атрибутів JSX
• Використання дочірніх елементів у JSX
• JSX запобігає атакам, заснованим на ін'єкції коду
• JSX є об'єктами

CRA (Create React APP)

Рендеринг елементів

• Рендеринг елементу в DOM
• Оновлення елементів на сторінці
• React оновлює лише те, що потрібно

Компоненти і пропси

• Функціональні та класові компоненти
• Як відрендерити компонент
• Вилучення компонентів
• Композиція компонентів
• Пропси можна лише читати

Стан та життєвий цикл (Класовий компонент)

• Подивитися на CodePen
• Перетворення функціонального компонента на класовий
• Додамо внутрішній стан у клас
• Додамо методи життєвого циклу до класу
• Як правильно використати стан
• Односпрямований потік даних
• Ефекти без скидання
• Ефекти зі скиданням

Стан та життєвий цикл (Функціональний компонент)

• Що таке хук?
• useState
• Читання стану
• Оновлення стану
• useEffect

Props Drilling

• Що таке бурове встановлення?
• Чому props drilling - це добре?
• Які проблеми може спричинити Props drilling?
• Як уникнути проблем з props drilling?

Хуки (Hooks)

• Мотивація, що стоїть за Hooks
• Як Hooks співвідносяться з класами
• Приклад useState() Hook
• React відстежує state
• Multiple States
• Приклад useEffect() Hook
• Отримання даних та оновлення state
• Проблеми з продуктивністю під час використання Effects
• Приклад useContext() Hook
• Приклад useRef() Hook
• Різні типи hooks
• Правила Хуків

Робота з формами

• Пам'ятайте про правила гарного тону
• Обробка форм із використанням State Hook
• Створення хука користувача
• Обробка великої кількості полів
• Альтернативний підхід
• Коли краще використовувати кожний підхід?

Робота з API в React

• Класові компоненти
• Функціональні компоненти
• Як запустити хук програмно чи вручну?
• Debounce - як оптимізація
• Завантаження індикатора завантаження
• Завантаження індикатора помилки
• Створюємо useNewsApi хук

Flux

• Що таке Flux?
• Flux vs MVC
• Архітектура Flux, як вона працює
• Детальний огляд Dispatcher
• Redux

useReducer

• Чому useReducer такий хороший?
• Використання useState
• Використання useReducer
• Думай як користувач

useReducer i useContext в React

• Навіщо мені потрібний Context API?
• Як контекст допомагає?
• Як створити контекст?
• Як використовувати контекст за допомогою хуків?
• Проблеми продуктивності
• Чому Context відмінно працює з useReducer?
• Чи потрібно замінювати Redux за допомогою useContext + useReducer?

Redux

• Установка Redux
• Файлова структура проєкту
• Наш перший сценарій
• Декілька слів про сервіси
• Завершення сценарію - ред'юсер та подання
• Декілька слів про дурні компоненти
• Декілька слів про бізнес-логіку
• Перехід до наступної стадії - список постів
• Екран постів - знову state-first
• Перший сценарій - список постів без вільтрації
• Наступний сценарій - фільтр постів
• Останній сценарій - зміст посту

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

Дипломна робота

Опис

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

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

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

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

• 24 заняття з англійської мови
• Тестова співбесіда з технічним спеціалістом
• Майстер клас по складанню резюме та проходження співбесід
• Консультація з рекрутером та тестова співбесіда
• Супровід до моменту працевлаштування менеджером, закріпленим за групою

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

• Повертайленко Євген - Frontend Developer
• Казначеєв Олександр - Frontend Developer
• Панченко Юрій - Senior markup development
• Жданов Кирило - Middle Full-Stack JS/Java Developer
• Ковальчук Сергій - Frontend Developer
• Макаров Ілля - Frontend Developer
• Яновий Ілля - Front End Engineer
• Найдьонов Данило - Senior Software Engineer
• Іван Гринкін - Full Stack developer
• Усачов Павло - Senior Magento Developer