Frontend-разробник

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

Практика: ти створиш першу сторінку та зверстаєш свій перший header
Результат: ти вмієш створювати базові елементи вебсторінки.

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

Практика: ти оптимізуєш зовнішній вигляд своєї сторінки та навчишся додавати візуальні елементи, які покращують взаємодію користувача з вебресурсом

Результат: ти впевнено працюєш з можливостями HTML, CSS, розумієш семантику та принципи взаємодії з ресурсами.

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

Практика: ти будеш працювати з додаванням анімації та опануєш принципи крос-браузерної верстки.

Результат: ти вмієш налаштовувати анімацію на сайті та адаптовувати інтерфейс під параметри екранів гаджетів.

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

Практика: ти будеш працювати з алгоритмами JavaScript: створення функціоналу для відкривання/закривання модальних вікон; практичні приклади використання циклів; використання alert, prompt та confirm.

Результат: ти зрозумієш в чому полягає суть мови програмування JavaScript та навчишся підключати її код до власної сторінки.

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

Практика: ти будеш створювати 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.

Результат: ти розумієш, що таке запити та звідки беруться дані на вебсторінці, вмієш працювати з DOM та розташовувати всі елементи сторінки в ієрархічній послідовності.

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

Результат: ти навчишся оптимізувати ресурси, робити асинхронні завантаження та розробляти застосунки за модульним підходом, а також використовувати механізми import та export для організації модульного коду та зручного управління залежностями між файлами.

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

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

Результат: ти отримаєш глибокі та розширені знання щодо управління та підтримки внутрішніх процесів React-додатків.

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

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

Результат: ти будеш розуміти принципи використання React хуків, які роблять функціональні компоненти більш потужними, читабельними та підтримуваними.

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

Практика: ти будеш працювати зі створенням Css modules, Styled Components, Redux, Material UI та Formik.

Результат: ти отримаєш практичні навички у стилізації та управління станом React-додатків. Вивчення цих інструментів та бібліотек дозволить тобі вибирати оптимальний підхід залежно від потреб та вимог конкретного проєкту.

Підказки щодо архітектури, бібліотек і софту
Написання документації
Написання коду (функцій і скриптів)
Написання unit-тестів (модульне тестування)
Тестування коду із запропонованими вхідними даними
Виправлення помилок як синтаксичних, так і логічних
Оптимізація та оформлення коду
Поліпшення коду на основі найкращих практик
Зміна однієї бібліотеки на іншу
Допомога у пошуку вразливостей у коді, динамічне тестування (DAST), статичне тестування (SAST)
Робота з git

Наші випускників проходять стажування в ІТ компанії Cyber Pioneers