Курс Front-end

  • Online
  • Для начинающих
  • Frontend
Образовательный центр: A-Level Ukraine
Формат:Курс
Язык обучения:Ukrainian
Длительность обучения:6 месяцев
Начало курса:13.03.2024
Стоимость обучения:24 000 UAH за курс

Створюючи програму курсу 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

Категории курса

Читайте нас в Telegram, чтобы не пропустить анонсы новых курсов.

Похожие курсы

Учебный центр
Levelup
Формат
Online
Начало обучения
10.09.2025
Длительность
10 недель
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
уточняйте
Учебный центр
ITGid
Формат
Online
Начало обучения
Будь-який момент
Длительность
-
Уровень
Для начинающих
Язык обучения
Russian
Стоимость
738 UAH за курс
Учебный центр
CyberBionic Systematics
Формат
Online
Начало обучения
13.10.2025
Длительность
20 часов
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
5 395 UAH за курс
Учебный центр
Robot Dreams
Формат
Online
Начало обучения
23.09.2025
Длительность
14 занятий
Уровень
Для опытных
Язык обучения
Ukrainian
Стоимость
уточняйте