Клієнт-серверна архітектура.
Презентація HTML. 
Теги form та table. Налаштування VS Code

Практика:

• створення форми та таблиці згідно шаблону в figma;
• створення архітектури для сайту магазину;
• створення структури для сайта-блогу.

Введення в CSS.Огляд блокової моделі 
Методології BEM та OOCSS 
Основні CSS властивості. Робота з шрифтами

Практика:

• стилізація форми та таблиці згідно дизайну в figma;
• стилізація сайта-магазину;
• стилізація сайта-блогу.

Flexbox.
Grid.
Адаптивність за допомогою @media.
Створення анімацій за допомогою transition.
Створення анімацій за допомогою animation @keyframes.

Практика:

• додавання анімації hover та focus ефектів на кнопки/поля вводу;
• створення адаптивної версії для сайту блогу;
• створення адаптивної версії для сайту магазина.

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

Практика:

• створення функціоналу для відкривання/закривання модальних вікон;
• практичні приклади використання циклів;
• використання alert, prompt та confirm.

Об'єкти. Методи об'єктів
Копіювання об’єктів та посилання
Масиви. Методи масивів

Практика:

• створення mock даних для магазину;
• практичні задачі з використанням методів об’єктів та масивів.

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

Практика:

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

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

Практика:

• зберігання користувача та куплених товарів в LocalStorage;
• використання глобального об’єкта window.

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

Практика:

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

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

Практика:

• приклади використання об’єкту Promise;
• вибір елементів на сторінці, короткий огляд бібліотеки jQuery.

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

Практика:

• огляд дефолтного React проекту;
• приклади найпростіших компонентів;
• перенесення верстки з сайту магазину в JSX код.

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

Практика:

• життєвий цикл компонентів;
• написання ErrorBoundary;
• використання порталів для модальних вікон;
• створення роутів для сайту магазину.

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

Практика:

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

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

Практика:

• приклад Css modules;
• приклад Styled Components;
• приклад з Redux;
• приклад з Material Ui;
• приклад з Formik.