Курс Front-end
(Фронт-енд)

Модуль 1. Введення в HTML і CSS. Клієнт-серверна архітектура.

Налаштування інструмента.
Основи HTML і CSS. Синтаксис.
Блочні елементи та стрічкові елементи.
Додавання тексту та його стилізація. Гіперпосилання.
Додавання графіки. Списки.
Домашнє завдання.
Тести.

Модуль 2. Прикладне використання HTML і CSS.

Створення таблиць. Робота з формами.
HTML 5 теги. Семантика.
Робота з ресурсами (іконки, шрифти, fontawesome).
Position. Flexbox. Grid.
Домашнє завдання.
Тести.

Модуль 3. Анімація та адаптивність веб сайтів.

Grid.
Анімації CSS.
Адаптивність CSS (@media).
SASS (SCSS).
Bootstrap.
Домашнє завдання (коротке відео).
Тести.

Модуль 4. JavaScript. Початок роботи з динамічними сторінками.

Вступ до JS.
Змінні. Типи даних.
Тернарний та логічні оператори.
Інструкція switch.
Цикли: for, while, do…while.
Function Declaration і Function Expression.
Анонімні функції.
Функція callback.
Функції alert, prompt, confirm.

Практика:

створення функціоналу для відкривання/закривання модальних вікон;

практичні приклади використання циклів;

використання alert, prompt та confirm.

Модуль 5. Цикли та об’єкти. Об’єкти.

Цикли: for, while, do..while.
Об’єкти. Методи об’єктів.
Копіювання об’єктів та посилання.

Практика:

створення mock даних для магазину;

практичні задачі з використанням методів об’єктів та масивів.

Модуль 6. Масиви в Javascript.

Вчимося створювати масиви.
Методи масивів.
Використання циклів.

Практика:

практичні задачі з використанням методів об’єктів та масивів.

Модуль 7. Дані. Контекст виконання функцій. Глобальний об’єкт window.

Контекст виклика і this. Методи call, bind та apply.
Функції конструктори. Дескриптори об’єктів.
Local та Sesion storages. Дата та час.
Глобальний об’єкт window. Об’єкт лексичного оточення.

Практика:

зберігання користувача та куплених товарів в LocalStorage;

використання глобального об’єкта window.

Модуль 8. Робота з сервером. OOP.

Замикання.
Оператор try/catch/finally.
Синтаксис setTimeout/setInterval.
Як влаштований Event Loop в JavaScript.
OOP та його принципи.

Практика:

написання функціоналу для логіну юзера;

написання функціоналу для роботи фільтрів магазину;

створення класу Person.

Модуль 9. DOM та асинхронний JavaScript.

Об’єкт Promise.
Функції async/await в JS.
DOM/BOM. Вибір елементів на сторінці.

Практика:

приклади використання об’єкту Promise;

вибір елементів на сторінці, короткий огляд бібліотеки jQuery.

Модуль 10. NPM/Yann. Jsx. Віртуальний DOM.

NPM та Yarn. Огляд властивостей Webpack. Робота з import/export.
Огляд структури React додатку.
JSX та props: Рендеринг списків та Conditional рендеринг.
Віртуальний DOM.
Обробка подій. Контролюємі та не контролюємі компоненти.

Практика:

огляд дефолтного React проекту;

приклади найпростіших компонентів;

перенесення верстки з сайту магазину в JSX код.

Модуль 11. Життєвий цикл компонентів. React Context. Портали.

Життєвий цикл компонента.
Створення ErrorBoundary.
React-router-dom.
Портали.

Практика:

життєвий цикл компонентів; написання ErrorBoundary;

використання порталів для модальних вікон;

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

Модуль 12. Основні React хуки.

Хук useState.
Хук useRef.
Хук useEffect.
Хук useMemo.
Хук useCallback.
React.memo().

Практика:

написання основної логіки сайту магазину з використанням хуків, які описано вище.

Модуль 13. React бібліотеки.

Способи стилізації React додатку:
Css modules.
Styled Components.
Redux та redux-thunk.
Material UI.
Formik.

Практика:

приклад Css modules;

приклад Styled Components;

приклад з Redux;

приклад з Material UI;

приклад з Formik.

Захист дипломного проекту

Проекти:
1. Сайт блогу з використанням HTML та CSS.
2. Сайт інтернет магазину на чистому HTML/CSS/Js і React.js