Курс "Frontend"
Курс включає в себе мови html, css, java-script і його фрейморки. Ви навчитеся з нуля створювати кожен елемент сайту. Потужний блок java-script дозволить втілити Сучасні анімації та серверну взаємодію. Адаптивний і кросбраузерний сайт, який добре ранжується в пошуковій видачі-такий результат ми чекаємо від вас!
- Свій викладач
- 2-3 рази на тиждень
- 2 - 4,5 місяці
Варіанти навчання
Курси стартують кожного місяця
Ми підберемо Вам групу або індивідуального педагога під Ваш рівень та напрямок
Індивідуальний дорослий курс
- Тривалість від 9 до 18 місяців
- Доступ до матеріалів курсу назавжди
- Більше 15 напрямків
від 26 000 грн/курс
Записатись на пробнепочатковий
Індивідуальний дорослий курс
- Тривалість від 9 до 18 місяців
- Доступ до матеріалів курсу назавжди
- Більше 15 напрямків
від 36 000 грн/курс
Записатись на пробнесередній
Індивідуальний дорослий курс
- Тривалість від 9 до 18 місяців
- Доступ до матеріалів курсу назавжди
- Більше 15 напрямків
від 39 150 грн/курс 43 500 грн/курс
Записатись на пробнепоглиблений
Програма курсу
Тема: 1Вступ до веб-розробки.+
- Як працюють сайти. Backend і frontend. Верстка
- Як виглядає і з чого складається код веб-сторінки
- Встановлення редактора коду Sublime Text
- Проста веб-сторінка на HTML. Теги та атрибути.
- CSS-стилі. Селектори, параметри та значення
Тема: 2Мова HTML+
- Структура документу HTML5
- Огляд і демонстрація роботи основних HTML-тегів
- Верстка веб-форм. Поля і кнопки. Валідація форм
- Таблиці і таблична верстка
- Семантична верстка. Стандарти і валідність
Тема: 3Основи css+
- Синтаксис CSS та правила каскадності
- Підключення CSS до HTML
- Селектори CSS: елементи, класи, ідентифікатори, Комбіновані селектори
- Основні властивості CSS для роботи зі стилями
Тема: 4Селектори css+
- Комбіновані селектори
- Групування та успадкування стилів
- Пріоритети стилів у CSS
- Поділ елементів на блокові і лінійні
Тема: 5Box Model (модель блоків)+
- Визначення розміру, відступів і меж елементів
- Робота з padding і margin
- Пріоритети стилів у CSS
- Використання border-radius для створення закруглених кутів елементів
- Створення тіней і обводок для елементів
- Управління відображенням елементів на сторінці
Тема: 6Позиціонування та відображення CSS+
- Позиціонування елементів: static, relative, absolute і fixed
- Використання z-index та transform для управління шарами
- Використання display для управління типом відображення елемента
- Використання флексбоксів для створення гнучких макетів сторінки
- Створення адаптивних макетів за допомогою Grid Layout
Тема: 7Анімації та переходи в CSS+
- Створення анімацій: зміна властивостей у часі
- Використання ключових кадрів для створення складних анімацій
- Створення переходів при зміні стану елементів
- Використання флексбоксів для створення гнучких макетів сторінки
- Використання ефектів ховера для створення взаємодії з користувачем
- Робота з таймингами анімацій і переходів
Тема: 8Розробка адаптивного інтерфейсу+
- Використання медіа-запитів для адаптації сторінки під різні розміри екранів пристроїв
- Створення адаптивних меню
- Создание адаптивной типографики
- Створення адаптивних зображень за допомогою властивості max-width
- Використання viewport meta tag для масштабування на мобільних пристроях
- Поділ елементів на блокові і лінійні
Тема: 9Вступ до JavaScript+
- Вступ: що таке JavaScript і де його можна використовувати
- Установка і запуск оточення для розробки на JavaScript
- Створення простого додатка, що виводить" Hello, World " на сторінку за допомогою console.log()
- Змінні: оголошення, присвоєння значення, типи змінних
- Установка і запуск оточення для розробки на JavaScript
Тема: 10Синтаксис JavaScript+
- Оператори: Математичні, логічні, умовні і т. д.
- Створення змінних за допомогою let та const
- Дії зі змінними: оновлення та перепризначення
- Написання математичних виразів для виконання простих обчислень
- Коментарі в коді: як і навіщо їх використовувати
Тема: 11Типи даних та змінні+
- Числа: цілочисельні, десяткові, від’ємні тощо
- Рядки: створення та робота з ними (конкатенація, отримання символів, довжина рядка)
- Булеві значення: true і false
- Масиви: створення, додавання та видалення елементів
- Об'єкти: створення, отримання властивостей об'єкта
Тема: 12Умовні оператори та цикли+
- Использование if else для проверки условий lse для проверки условий
- Цикл for: створення та використання для перебору елементів масиву
- Цикл while: створення та використання для перебору елементів масиву
- Оператор break і continue в циклах
- Використання блоків try-catch для обробки помилоклоков try-catch для обработки ошибок
Тема: 13Функції+
- Створення функцій для виконання простих обчислень та обробки даних
- Параметри функцій: передача і робота з ними
- Область змінних: як вона працює у функціях
- Рекурсія: що це таке і навіщо потрібна
- Визначення функцій з параметрами та використання return для повернення значення з функції
Тема: 14Об'єкти та масиви+
- Створення масивів і об'єктів для зберігання даних і виконання операцій з ними
- Додавання та видалення елементів у масивах
- Використання методів масивів (map, filter і т. д.)
- Отримання властивостей об'єкта і зміна їх значень
- Створення функцій, які працюють з масивами та об'єктами, наприклад, додаючи нові значення або видаляючи існуючі
Тема: 15This і прототипи+
- Створення об'єктів з класів і використання this і прототипів для роботи з даними
- Прив'язка this до функцій і методів
- Використання методів прототипу для зміни або отримання даних зі створених об'єктів
- Спадкування: що це таке і як воно працює в JavaScript оно работает в JavaScript
- Модулі: як вони створюються і навіщо потрібні
Тема: 16Promise і асинхронне програмування+
- Обробка асинхронних операцій, таких як завантаження та обробка даних
- Створення функцій-промісів для виконання асинхронних операцій
- Використання async / await для зручної роботи з промисами
- Що таке колбеки і як їх використовувати в асинхронному програмуванні
- Promise.all і Promise.race: що це таке і як використовувати
Тема: 17Взаємодія з DOM+
- Поняття DOM (Document Object Model)
- Створення елементів DOM за допомогою методів createElement та appendChild
- Робота подіями кліка на елементах сторінки, наприклад, виведення повідомлень при натисканні на кнопку
- Обхід дерева DOM: пошук і робота з елементами на сторінці
- Форми: створення та робота з формами на сторінці
Тема: 18Події та обробники+
- Прив'язування обробників подій до елементів сторінки для виконання різних дій при кліці або наведенні на елементи
- Передача параметрів у функцію-обробник для виконання специфічних дій
- Спливання та занурення подій: що це таке і як це працює в JavaScript
- Делегування подій: що це таке і як використовувати
Тема: 19AJAX і Fetch API+
- Як надсилати запити на сервер та отримувати відповіді
- Використання fetch API для надсилання запитів на сервер та отримання відповідей
- Обробка відповідей сервера і відображення даних на сторінці
- Робота з JSON-даними і їх відображення на сторінці
- Проміси в AJAX: як використовувати
Тема: 20LocalStorage і SessionStorage+
- Зберігання даних в локальному сховищі браузера і сесії
- Отримання збережених даних та їх виведення на сторінці у формі списків
- Використання методів getItem, setItem та removeItem для роботи з даними в сховище
- Які дані можна зберігати в локальному сховищі і сесії
- Обмеження локального сховища та сесії: що можна, а що не можна зберігати
Тема: 21Введення в React+
- Що таке React і навіщо він потрібен
- Основні переваги використання React
- Встановлення та налаштування проекту React
- Створення першого компонента React
Тема: 22JSX+
- Що таке JSX і як він використовується в React
- Основні правила та синтаксис JSX
- Вставка JavaScript виразів в JSX
- Робота з атрибутами та стилями в JSX
- Коментування та екранування в JSX
Тема: 23Компоненти React+
- Концепція компонентів у React
- Створення функціональних компонентів
- Створення класових компонентів
- Різниця між функціональними та класовими компонентами
- Вкладеність компонентів і їх ієрархія
Тема: 24Props і State+
- Що таке пропси (props) в React і як їх використовувати
- Передача пропсів в компоненти
- Використання деструктуризації для роботи з пропсами
- Оновлення та зміна пропсів
- Що таке стан (state) В React і як його використовувати
Тема: 25Життєвий цикл компонента:+
- Введення в життєвий цикл компонента React
- Компоненти-класи та їх методи життєвого циклу
- Методи життєвого циклу в функціональних компонентах (з використанням хуків)
- Фази життєвого циклу компонента і їх порядок виконання
- Практичне застосування методів життєвого циклу
Тема: 26Використання Хуків (Hooks):+
- Введення в хуки (Hooks) в React
- Основні хуки: useState, useEffect, useContext і т. д.
- Створення власних хуків
- Робота зі станом і ефектами в хуках
- Особливості використання хуків в функціональних компонентах
Тема: 27Компоненти вищого порядку (HOC):+
- Вступ до компонентів вищого порядку (HOC) у React
- Створення HOC для реєстрації та обгортання компонентів
- Передача пропсів і обробка компонентів в HOC
- Композиція і ланцюжок HOC
Як записатись на курси
Обираємо напрямок
Онлайн або стаціонар
Навчаємося і практикуємося
Оформлюємо портфоліо
Отримуємо сертифікат
Шукаємо вакансії серед партнерів
1
Вибір напрямку
Вибираємо форму навчання, знайомимося з викладачем і встановлюємо всі необхідні програми
2
Старанно вчимося і практикуємося
Проходимо всі практики та теорію, оформлюємо портфоліо робіт
3
Пошук роботи
Формуємо резюме, готуємо портфоліо до перевірок, використовуємо всі доступні платформи та пропозиції від наших партнерів
Сертифікат Мій Комп'ютер
Підтвердить, що ви пройшли курс, а також стане додатковим аргументом при влаштуванні на роботу
Записатись на курс або отримати безкоштовну консультацію
Популярні питання до IT школи
- Які у вас є форми навчання? +
Ви можете обрати один з наших численних офісів або взяти свого викладача в скайпі або дискорді. Якість освіти однакова в обох випадках, всі теми вивчаються до засвоєння учнем. Практика опрацьовується для отримання навичок, необхідних під час роботи у великих компаніях.
- Скільки тривають курси? +
Кожен курс має різну тривалість. Курси для дітей займають 1,3–1,5 року. Дорослі напрямки, зазвичай, займають від 2 до 6 місяців, зі своїм викладачем. Деякі складні дисципліни вимагають освоєння двох курсів, наприклад Fullstack програмування.
- Як дізнатись вартість навчання за кожним курсом? +
Оскільки ми представлені у різних містах, вартість дещо відрізняється для кожного випадку. Будь ласка, зателефонуйте нам або скористайтесь зручною соціальною мережею, щоб дізнатися актуальні ціни на будь-який з наших курсів.
- Які у вас є варіанти і способи оплати? +
Ви можете сплатити кількома способами. При відвідуванні будь-якого офісу ви можете укласти договір навчання на місці та сплатити готівкою. Якщо ви займаєтеся онлайн, ви можете сплатити курс у банку за наданими реквізитами або переказом на картку ПриватБанку. Ми перерахуємо вартість у зручну валюту, якщо ви мешкаєте за кордоном.
- Чи допомагаєте ви з працевлаштуванням? +
Ми маємо велику базу роботодавців, а також часто з'являються вакансії від партнерів. Деякі успішні учні проходять стажування у нас і працюють як викладачі у різних містах та онлайн. Якщо жоден із цих варіантів вам не підійде, ми допоможемо сформувати резюме та портфоліо, щоб гідно представити вас роботодавцям.
Статті
20 липня 2026 р.
10:03
Frontend чи Backend: з чого почати вивчення веб-розробки?
Frontend і Backend — два різні напрямки веб-розробки з різним інструментарієм. Пояснюємо, чим вони відрізняються на практиці і як зрозуміти, який із них ближче саме вам.
Читати
Про академію Мій Комп'ютер
Працювати треба не 12 годин, а головою. — Стів Джобс
Запрошуємо на комп'ютерні курси дітей та дорослих. Ми маємо великий перелік напрямків та розгалужену мережу відділень.
Можемо запропонувати навчання за напрямками:
- Веб-дизайн
- Растрова графіка, векторна графіка та анімація
- Програмування для дітей
- UI/UX дизайн
- Python
- Frontend
- Backend
- JavaScript
- 3ds Max + Corona + AutoCAD
- SEO + SMM
Контакти
Зв'яжіться з нами зручним способом або замовте дзвінок від нашого менеджера:
Пошта:
Слідкуйте за нами:
