Курси Frontend Developer: HTML та CSS

Добірка кращих курсів Frontend Developer, що познайомлять вас з сучасними практиками розробки сайтів. Ви зможете засвоїти з нуля основні технології для верстки сайтів: HTML, CS, JavaScript та Bootstrap. Досвідчені Frontend розробники також знайдуть для себе підходящі навчальні програми.
Читати далі

Порівняння усіх курсів

Фільтр
Курс
Формат
Online
Початок навчання
09.06.2026
Тривалість
4 місяців
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
15 500 UAH за курс
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
  • Frontend
Lemon School
Подробиці

Від PSD-макету до адаптивного документа, разом з HTML5 та каскадними таблицями стилів CSS3. Так, це твій шлях до кар’єри у розробці — з 0 до junior front-end з заробітком від $800

Програма курсу

Модуль 1 - HTML5, CSS3. BEM. Bootstrap5. Адаптивна верстка. Верстка навчального проєкту

Заняття 1. Знайомство, вступна інформація. Перший кодинг

  • Знайомство
  • Що таке IT загалом і яке місце займає front-end у веб-розробці
  • Етапи розробки проекту
  • Огляд інструментів для розробки
  • Структура документа HTML
  • Основні теги
  • CSS властивості

Заняття 2. Принципи роботи HTML та CSS. Figma. Практика

  • Внутрішні стиль
  • Три методи підключення CSS
  • Рендеринг сторінок
  • Блокові-малі
  • Особливості HTML5. Поняття кросбраузерності та валідності
  • Figma для fornt-end розробника
  • CSS властивості

Заняття 3. Специфіка CSS. FTP. Практика

  • Селектори
  • Специфіка css
  • Значення селектора, вага від типу звернення
  • Посилання. Багатосторінкові сайти
  • FTP. Робота із сервером
  • Коментування коду
  • CSS властивості

Заняття 4. Шляхи, імпорт скидання стилів. Методологія BEM. Практика

  • Абсолютний та відносний шлях
  • Імпорт стилів
  • Скидання стилів за замовчуванням
  • CSS reset
  • Зображення як частина контенту
  • Методологія БЕМ. Неймінг класів. Призначення, актуальність, плюси та мінуси
  • CSS властивості

Заняття 5. Таблиці, flexbox layout. Практика. Робоче оточення

  • Верстка таблиць
  • Flexbox layout
  • Робоче оточення або що має бути встановлене. Приклади використання
  • CSS властивості

Заняття 6. Flexbox layout. Псевдоелементи. Позиціонування елементів

  • Flexbox layout
  • Позиціонування елементів, властивість position, static, relative, absolute, fixed, sticky: детальний розгляд кожної поведінки
  • Псевдоелементи after та before
  • Навичка гуглити
  • CSS властивості

Заняття 7. Стани :hover, :active, :focus. Спрайти. Квіткоутворення

  • CSS псевдоклас :hover, :active, :focus. Порядок зйомки
  • Концепція спрайт. Технічне застосування. Призначення, актуальність, плюси та мінуси
  • Семантична верстка
  • Верстка навігація соціальних мереж із застосуванням спрайтів
  • Квіткоутворення. rgb. hex. Альфаканал та непрозорість
  • Навичка гуглити
  • CSS властивості

Заняття 8. Шрифти, змінні css, функція calc()

  • Підключення шрифтів. Що таке безпечні шрифти?
  • google fonts огляд, застосування
  • Псевдоклас: root
  • Використання змінних у CSS. Призначення, актуальність, плюси та мінуси
  • Функція calc() математичні операції CSS
  • Навичка гуглити
  • CSS властивості

Заняття 9. Псевдокласи. Селектори атрибутів

  • Псевдокласи: first,: last,: nth-child. Приклади використання практично
  • Звернення до силектора, різноманітність методів
  • Синтаксис селекторів атрибутів
  • Вендорні префікси
  • Адаптивний шрифт (px, rem, em, vw). Робота з макетами
  • CSS властивості

Заняття 10. Форми. Javascript старт. JQuery. jQuery-Mask

  • Форми. Призначення, принцип роботи
  • Атребути тега input
  • Теги для верстки форм
  • Стилізація елементів форм
  • Що таке JQuery
  • Презентація плагіна jQuery-Mask.js
  • Реалізація маски введення телефону засобами jQuery-Mask.js
  • CSS властивості

Заняття 11. Стилізація тега select. jQuery Nice Select. Градієнти. Паралакс

  • Презентація плагіна jQuery Nice Select
  • Підключення до проєкту jQuery Nice Select
  • Стилізація checkbox/radio
  • Лінійні і радіальні градієнти. Приклади використання
  • Паралакс
  • CSS властивості

Заняття 12. Гумова верстка. Медіазапит

  • Верстка таблиці тегів
  • Гумова верстка, приклади та правила
  • Медіа-запити. Використання медіавиражень. Актуальні брекпоінти
  • mobile/desctop first. Призначення, актуальність, плюси та мінуси
  • Адаптуємо таблицю тегів

Заняття 13. Фреймворк bootstrap5 знайомство

  • Презентація фреймворку bootstrap5
  • Підключення. Вивчення розмітки та breakpoints
  • Використання компонентів
  • Розсмілення класів
  • Структура розмітки bootstrap5. Система сіток

Заняття 14. bootstrap5 адаптивна верстка

  • Поглиблене вивчення системи сіток та структури розмітки
  • Адаптація. Детальний аналіз застосування шести точок скидання фреймворку
  • Кастомізація компонентів під потреби проекту

Модуль 2 - Анімація. Робота з плагінами jQuery. SVG

Заняття 15. Властивість перетворення. Анімація

  • Детальний аналіз якості transform і його значень
  • Ключові кадри Keyframes
  • Keyframes + transform
  • Анімація "Розкадрування"
  • Застосування фреймворку bootstrap у розмітці лекції

Заняття 16. SVG. Анімація SVG. Слайдер slick.js

  • SVG у HTML. Вступ
  • Стилізація об’єктів SVG
  • Анімація SVG об’єктів
  • Анімація по заданій траекторії
  • Презентація сладера
  • Підключення. Застосування. Натсройка. Стилізація
  • Застосування фреймворку bootstrap у розмітці лекції

Заняття 17. Анімація wow.js та animate.css. aos.js. Слайдер slick.js

  • Презентація бібліотеки wow.js Підключення. Розбір атребутів
  • Застосування
  • Презентація бібліотеки animate.css Підключення. Розбір атребутів
  • Застосування
  • Презентація бібліотеки aos.js Підключення. Розбір атребутів
  • Застосування
  • Застосування фреймворку bootstrap у розмітці лекції

Заняття 18. fullPage.js

  • Презентація jqeary плгін fullPage.js
  • Підключення. Розбір атребутів. Застосування
  • Застосування фреймворку bootstrap у розмітці лекції

Заняття 19. jquery.multiscroll.js

  • Презентація jqeary плагін jquery.multiscroll.js
  • Підключення. Розбір атребутів. Застосування
  • Застосування фреймворку bootstrap у розмітці лекції

Заняття 20. Start VanillaJS. Фреймворк PaperCSS

  • Фреймворк PaperCSS
  • Презентація фреймворку PaperCSS
  • Підключення. Вивчення розмітки та breakpoints
  • Використання компонентів
  • Розсмілення класів
  • Структура розмітки bootstrap5. Система сіток
  • Практичне застосування PaperCSS

Заняття 21. Javascript. Фреймворк Neomo. Робота DOM деревом. Цикл forEach. Отримання атрибутів. Рух миші. Реалізація складного інтерактивного SVG об'єкта

  • Фреймворк Неомо
  • Презентація фреймворку Neomo
  • Підключення. Вивчення розмітки та breakpoints
  • Використання компонентів
  • Розсмілення класів
  • Структура розмітки Neomo. Система сіток
  • Практичне застосування Neomo

Заняття 22. Javascript. Фреймворк Bulma. Конструкція if, else if, else. Медіавирази. window, onload, onresize, innerWidth

  • Фреймворк Bulma
  • Презентація фреймворку Bulma
  • Підключення. Вивчення розмітки та breakpoints
  • Використання компонентів
  • Розсмілення класів
  • Структура розмітки Bulma. Система сіток
  • Практичне застосування Bulma

Заняття 23. Бібліотека lottie.js, анімація на json

  • Що таке json і навіщо він потрібний
  • Бібліотека lottie.js
  • Презентація фреймворку lottie.js
  • Підключення
  • Практичне застосування lottie.js
  • Реалізація анімації із застосуванням формату json

Модуль 3 - JS, Git, Gulp, Sass. Верстка проєкту

Заняття 24. Git, Node.js, Gulp, Sass, Include. Видача складання проєкту. Старт проєкту

  • Що таке node.js, npm, Gulp. Принципи взаємодії
  • Огляд популярних плагінів для Gulp
  • Ідеальність верстки. PerfectPixel
  • Огляд плагінів
  • Що таке Git. Принципи роботи. Git Bush
  • git clone, add, commit, push
  • Верстка проєкту

Заняття 25. Git, Gulp, Sass.URL-encoder for SVG. Генератор HTML-дерева. Верстка проєкту

  • Синтаксис scss. Переваги та актуальність
  • git branch, checkout, gitk, відкат комміту
  • Переміщення файлами в командному рядку
  • Генератор HTML-дерева
  • URL-code для SVG
  • Верстка проекту

Заняття 26. Git, Gulp, Include. Верстка проєкту

  • Include. Преимущества и актуальность
  • Git merge
  • Верстка проекта в разных ветках, мёрж веток

Заняття 27. Git, Gulp, API. Оптимізація зображень. Верстка проєкту. VSC-Configure Users Snipets

  • VSC – Configure Users Snipets. Створення власних сніпетів
  • Підключення API TinyPNG
  • Верстка проєкту
  • GitHub Pages
  • Командна робота з гітом

Заняття 28. Git, Gulp, мовна панель vannila.js таби. Верстка проєкту

  • Мовна панель vannila.js
  • Верстка проекту
  • Командна робота з гітом
  • Підготовка до співбесіди
  • code review учнів

Заняття 29. Git, Glup, vannila.js таби. Верстка проєкту

  • Таби vannila.js
  • Верстка проекту
  • Питання по git, gulp
  • Підготовка до співбесіди
  • code review учнів

Заняття 30. Git, Glup, vannila.js burder-menu. Верстка проєкту

  • Burger-menu vannila.js
  • Верстка проекту
  • Питання по git, gulp
  • Підготовка до співбесіди
  • code review учнів

Заняття 31. Git, Glup, vannila.js акордеон. Верстка проєкту

  • Акордеон vannila.js
  • Верстка проекту
  • Питання по git, gulp
  • Підготовка до співбесіди
  • code review учнів

Заняття 32. Git, Glup, vannila.js scroll-to-top. Верстка проєкту

  • Кнопка scroll-to-top vannila.js
  • Верстка проекту
  • Питання по git, gulp
  • Підготовка до співбесіди
  • code review учнів

Заняття 33. Git, Gulp, vannila.js fixed-header. Верстка проєкту

  • vannila.js fixed-header
  • Верстка проєкту
  • Питання по git, gulp
  • Підготовка до співбесіди
  • code review учнів

Заняття 34. Git, Glup, vannila.js відстеження блоку на сторінці. Верстка проєкту

  • vannila.js відстеження блоку на сторінці. Заклик до дії
  • Верстка проекту
  • Питання по git, gulp
  • Підготовка до співбесіди
  • code review учнів

Заняття 35. Заняття з Program Manager

  • Принцип управління проєктами/продуктами в ІТ Комунікація та ролі у класичному менеджменті
  • Особливості команди та комунікації в Agile
  • SCRUM як методологія трансформер Estimates або як оцінювати завдання
  • Kanban

Заняття 36. Оптимізація проєкту. Pagesspeed оптимізація. Markup Validation Service. Генератор HTML-дерева. Верстка проєкту

  • Pagespeed оптимізація
  • Оптимізація СSS
  • Оптимізація JS
  • Оптимізація зображень
  • Знайомство із сервісом validator.w3.org
  • Виправлення помилок HTML
  • Контроль класнеймінгу методології BEM

Заняття 37. Огляд популярних фреймворків та CMS

React, Angular, Vue, Wordpres, Opencart. Карта росту

Заняття 38. Розмова з кар'єрним менеджером

  • Як і де шукати роботу для початківця і які інструменти при цьому використовувати
  • Як правильно зробити резюме і яка інформація у ньому є надважлива, а що буде зайвим
  • Як створити профіль на Linkedin, щоб його могли побачити потенційні роботодавці
  • 7 порад, які допоможуть пройти онлайн співбесіду набагато успішніше
  • Q&A

Особливості курсу

  • Безкоштовна IT англійська
  • Додаткові матеріали
  • Кар'єрний менеджер
  • Лекція Project Manager
  • Діджитал диплом для Linkedin

Викладачі курсу

  • Дмитро Максюта - Senior Front-end Developer
  • Ростислав Суслов - Middle Front-end Developer
  • Євген Велигора - Middle Front-end Developer
Подати заявку
Курс
Формат
Online
Початок навчання
27.03.2026
Тривалість
24 занять
Рівень
Для дітей
Мова навчання
Ukrainian
Вартість
10 000 UAH за курс
Гнучкий графікВидається диплом/сертифікатСупровід ментора
  • Python
  • Frontend
  • Web & Mobile Design / UI/UX
Hillel IT school
Подробиці

Курс присвячений основам web-дизайну та програмування. Заняття проходять в режимі онлайн-трансляції, а після закінчення курсу студенти отримають сертифікат.

Програма курсу

Web-дизайн

  • Figma, розбір вектора, створення простих іконок та ілюстрації, підбір ілюстрації на стоках
  • Робота з сітками та шрифтами - установка шрифтів. Основи створення простого лендингу
  • Робота з кнопками, іконками (категоризація), основи кольору
  • Оформлення Дизайн системи (UI kit) зі всіма елементами, створення лого на основі існуючого шрифту
  • Оформлення сайту - шапка, тіло, футер, створення малої карточки продукту, тексти для сайту
  • Оформлення кейсу з сайтом для портфоліо або розбір існуючих портфоліо

Front-end

  • Абсолютні та відносні шляхи, файлова структура, структура HTML
  • HTML теги, посилання, списки, таблиці
  • СSS, підключення, селектори та комбінування
  • Псевдокласи, псевдоелементи, шрифти, інструменти розробника
  • Зображення, графіка, фон
  • Позиціювання, Overflow, Float
  • Flex
  • HTML 5
  • Трансформації, Transition

Python

  • Вступ до Python та основний синтаксиc
  • Потік керування та функції
  • Малювання з модулем turtle
  • Списки та кортежі
  • Словники
  • Створення телеграм-бота

Особливості курсу

  • Базовий курс для дітей 12-17 років
  • Викладачі - практикуючі фахівці з великим досвідом роботи
  • Навчання зосереджене на практиці
  • Можливість брати участь в програмі Hillel EVO
  • До шостого заняття ви можете повернути 100% внесених за навчання коштів

Викладачі курсу

  • Єлизавета Чепугова - Graphic Designer в Nasha Idea
  • Єгор Ліфіренко - Python Developer
  • Владислав Дикий - Front-end Developer в Web Generator
  • Роман Поплєтухин - Front-end Developer at Meduzzen
Подати заявку
Курс
Формат
Online
Початок навчання
02.03.2026
Тривалість
20 годин
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
4 235 UAH за курс
Вечірні заняттяВидається диплом/сертифікатСупровід ментора
  • Frontend
QALight
Подробиці

Базовий курс для тих, хто хоче навчитись створювати універсальні ресурси, що працюють в мережі Інтернет. На заняттях ви опануєте практичні навички роботи із сучасними версіями HTML5 і CSS3.

Програма курсу

Заняття 1

  • DOCTYPE.
  • Стандарт Unicode. Кодування.
  • Структура HTML-документа.
  • Основні елементи розмітки:
    • концепція семантичної розмітки;
    • використання коментарів;
    • атрибути й аксесуари;
    • спеціальні символи.
  • Структурні елементи розмітки. Основні HTML теги.
  • Текстові елементи розмітки. Основні HTML теги.
  • Створення HTML сторінок.
  • Основи SEO оптимізації:
    • елемент meta та його атрибути;
    • пояснююча meta-інформація;
    • meta-інформація для роботів.

Заняття 2

  • Основні CSS властивості.
  • Селектори.
  • Одиниці виміру в CSS.
  • Властивості тексту.
  • Властивості кольору.
  • Шрифти.
  • Основи роботи з Chrome Developer Tools.

Заняття 3

  • Таблиці.
  • Списки.
  • Посилання.
  • Зображення.
  • Робота з фоном.
  • Створення макета (layout).
  • Робота з margin, padding.

Заняття 4

  • Нові теги й елементи.
  • Секції, винесення, статті, навігаційні, "шапка", "підвал".
  • Modernizr.

Заняття 5

  • Багатостовпчаста верстка.
  • Модель CSS box.
  • Позиціонування елементів.
  • Властивість float.

Заняття 6

  • Псевдокласи/псевдоелементи.
  • Контекстні селектори.
  • Каскадування.
  • Успадкування.

Заняття 7

  • Елементи форм і їх атрибути.
  • Використання зовнішніх об'єктів.
  • Вбудовування аудіо- та відео-файлів за допомогою елементів HTML5.

Заняття 8

  • Стилі для різних типів носіїв.
  • Імпорт CSS.
  • Визначення технологій, підтримуваних браузером.
  • Властивості CSS для друку сторінок.
  • Властивості шрифтів, @font-face (веб-шрифти).

Заняття 9

  • Адаптивна верстка.
  • Модель Flex-блоків.

Заняття 10

  • Bootstrap.

Особливості курсу

  • Заняття проходять у вечірній час
  • Практика на реальних проєктах
  • Підтримка під час та після навчання
  • Свідоцтво про закінчення курсу

Викладачі курсу

Іван Ніконов - керівник групи розробки веб-проектів.

Подати заявку
Курс
Формат
Online
Початок навчання
27.04.2026
Тривалість
12 занять
Рівень
Для досвідчених
Мова навчання
Ukrainian
Вартість
11 400 UAH за курс
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
  • React
  • Frontend
Hillel IT school
Подробиці

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

Програма курсу

React

  • Основи React
  • Робота з віртуальним DOM
  • React компоненти
  • Прив'язка даних
  • Стан компонента
  • Життєвий цикл компонента
  • React Hooks
  • Робота із запитами
  • Маршрутизація
  • Робота зі станом (flux, redux)
  • Реалізація проекту

Особливості курсу

  • Курс розрахований на розробників, які мають навички роботи з HTML, CSS та JavaScript
  • Заняття проводиться у форматі дистанційного навчання
  • Особистий кабінет для кожного учня
  • Оперативна служба підтримки студентів
  • Відеозаписи занять зберігаються в особистому кабінеті та залишаються у студентів після закінчення навчання
  • Велика кількість практичних занять
  • Викладачі курсу - практикуючі фахівці, що працюють в топових компаніях
  • Можливість повернути всі внесені за навчання кошти до шостого заняття
  • Бонус курсу: тренінги по проходженню співбесіди та складанню резюме з HR-фахівцем компанії.

Викладачі курсу

  • Іван Стельмах - Senior Software Engineer at Avenga
  • Василь Цивінський - JavaScript Engineer at Software MacKiev
  • Андрій Нагорний - React/React-Native Developer at GlobalLogic
  • Владислав Продан - Middle Front-end Developer at Eleks
Подати заявку
Курс
Формат
Online
Початок навчання
Дата формується
Тривалість
6 місяців
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
24 000 UAH за курс
Вечірні заняттяВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
  • Frontend
A-Level Ukraine
Подробиці

Створюючи програму курсу 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
Подати заявку
Курс
Формат
Online
Початок навчання
Дата формується
Тривалість
5 тижнів
Рівень
Для початківців, Для досвідчених
Мова навчання
Ukrainian
Вартість
Безкоштовно
Гнучкий графікСупровід ментора
  • Frontend
EPAM
Подробиці

Програма курсу

Git Basics

CSS Fundamentals

  • Flexbox
  • CSS Grid
  • Pre & Post Processing CSS
  • Responsive Design
  • CSS Methodologies

JavaScript Fundamentals

  • Functions
  • DOM
  • DOM Events
  • OOP Intro
  • Ajax
  • Frontend Optimization
  • JS Tools
  • JS Patterns
  • JS Modules
  • JS unit testing
  • Front-End optimization

Попередні вимоги

  • Знання англійської на рівні B1 і вище
  • Навички самостійного навчання та самодисципліни
  • Базові знання HTML, CSS та JavaScript
  • Базове розуміння інформаційних технологій та концепцій розробки програмного забезпечення
  • Практичний досвід програмування будь-якою мовою є додатковою перевагою

Як долучитися до програми

  1. Зареєструйся
  2. Пройди тест з англійської мови, який буде доступний у твоєму профілі
  3. Пройди технічний тест
  4. Отримай запрошення на співбесіду з рекрутером
  5. Отримай запрошення в групу та насолоджуйся навчанням
Подати заявку
Курс
Формат
Online
Початок навчання
Дата формується
Тривалість
6 місяців
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
19 600 UAH за курс
Вечірні заняттяВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
  • Frontend
Dexa Academy
Подробиці

Frontend курси DEXA передбачають велику кількість практичних завдань, підготовку до працевлаштування, та міні тренінги з пошуку клієнтів та роботи. Завдяки гнучкій системі навчання в DEXA ви зможете легко впоратися з проходженням курсу, об'єднуючи його з вашою роботою, чи іншими зобов'язаннями. 2 заняття на тиждень виконанні в записі, та 1 заняття практики та створення проєкту з обговоренням в Zoom відбувається ввечері.

Програма курсу

Що таке Web. Структура HTML

  • Що таке веб і як він працює
  • Знайомство з базовими тегами та атрибутами
  • Створення текстових та блочних елементів, додавання зображень, відео та посилань
  • Основні помилки у записах тегів
  • Семантична верстка, HTML5 теги
  • Класифікація тегів: лінійні та блокові
  • Модель форматування тексту: заголовки та абзаци. Елементи p, h1..h6. Вирівнювання тексту блокових елементів: атрибут align
  • Класифікація тегів: логічне та фізичне форматування

Введення в CSS

  • Знайомство з CSS, його синтаксисом та способом оголошення
  • Користування браузерною консоллю та знаходження помилок
  • Колір, розмір елементів
  • Блочна верстка, поєднання селекторів CSS
  • Фон, позиціонування фону, градієнт
  • Методологія BEM, кросбраузерність, валідність коду
  • Псевдокласи та псевдоелементи
  • Адаптивна верстка
  • Препроцесори SASS/SCSS, LESS
  • Фреймворки Bootstrap, Animation.css, Semantic-UI
  • Система контролю версій Git
  • Фінальний проєкт (Повноцінний адаптивний сайт під всі пристрої, розміщений в інтернеті)

JavaScript

  • Conditional Statements
  • If, else if, else
  • Конструкція switch
  • Цикли for, while, do while
  • Function Expression, Function Declaration
  • Рекурсія, замикання та інші цікаві речі
  • Array. Способи оголошення масиву та робота з ним
  • Робота з DOM за допомогою JavaScript
  • SetTimeout i setInterval
  • Фінальний проєкт (Слайдер, Свайпер, Вспливаюче вікно, Таби, Таймер)

JavaScript (Advanced)

  • Поняття ООП в JavaScript
  • Що таке наслідування, його використання та приклади
  • Здійснення пошуку за допомогою регулярних виразів
  • Використання регулярних виразів для валідації
  • Що таке Gulp, Webpack і для чого вони потрібні
  • Формат JSON, Метод JSON.parse, JSON.stringify
  • LocalStorage / SessionStorage
  • Конструкція try..catch
  • HTTP запити. Що це? Як працюють?
  • Фінальний проєкт (Блог, Новинний портал)

Мова програмування TypeScript

  • Встановлення TS і запуск файлів
  • Використання системи типів у функціях
  • Спеціальний тип any. Практика типізації коду
  • Тип never null i undefined
  • Типізація об'єктів і деструктуризація
  • Кортежі (Tuples). Об'єднання (Union)
  • Примітивні літеральні типи (Literal types)
  • Generics (Узагальнення), що це і навіщо потрібно
  • Фінальний проєкт

Фреймворк Angular

  • Що таке Angular і які ще є фреймворки
  • Створення додатка, огляд файлів та папок
  • Передача параметрів із компонентів
  • Створення компонента за допомогою Angular CLI. Вставка значень в текст (інтерполяція)
  • Зв'язування даних (bindings). Робота із подіями (Event Bindings)
  • Додавання динамічних класів із директивою ngClass. Налаштування стилів за допомогою директиви ngStyle
  • Цикли за допомогою ngFor. Використання фільтрів (pipes)
  • Роутинг, GUARDS
  • Створення об'єктів з POST RxJS оператори та індикатор завантаження
  • Фінальний проєкт (Повноцінний інтернет магазин з кошиком, адмін панелю, та взаємодія з бекендом)

Що ти будеш мати і вміти після курсу:

  • Верстати сайти з дизайн-макетів з Photoshop та Figma, використовуючи HTML та CSS
  • Розробка програм, використання інструментів розробника в браузері та відлагодження коду.
  • Вміти ефективно використовувати CSS і JS бібліотеки та плагіни зі зрозумінням їхнього функціоналу.
  • Майстерно володіти системою контролю версії Git та користування GitHub
  • Мати високий рівень майстерності у роботі з JavaScript і TypeScript
  • Розуміти та використовувати базові шаблони проєктування і принципи створення проєктів
  • Створювати великі та складні веб-додатки з використанням Angular
  • Велике портфоліо практичних робіт які не відрізняються від реальних проєктів
  • Підготовку для проходження співбесід, та знання як і де знайти клієнтів і роботу

Особливості курсу

  • Онлайн курс
  • Запис занять
  • Ніякої води
  • Актуальний матеріал
  • Постійна підтримка ментора та розбір завдань
  • Сертифікат про проходження курсу
  • Можлива оплата частинами
  • Зручний графік занять
  • Портфоліо робіт
Подати заявку
Курс
Формат
Online
Початок навчання
06.11.2025
Тривалість
20 годин
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
5 395 UAH за курс
Вечірні заняттяВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
  • Frontend
CyberBionic Systematics
Подробиці

Курс HTML5&CSS3 Стартовий складається з 10 логічно взаємопов'язаних уроків, на яких учні застосовують практично теоретичні знання технологій HTML5&CSS3 для створення простих елементів веб сторінки.

Програма курсу

Введення у HTML. Типи елементів та атрибути

На початку курсу буде розглянуто, що таке HTML, для чого він потрібен і як пишуться його елементи. Ви дізнаєтеся про теги, форматування в HTML, про редактора в якому пишеться код початкової розмітки, з якою побудована будь-яка веб-сторінка і для чого використовуються коментарі в коді. Як додати на сторінку зображення, а також різні переходи за посиланнями. Дізнаєтесь перші типи елементів та їх різницю з можливими помилками під час написання коду.

Введення в CSS та визначення розмірів блоків

На занятті буде розглянуто способи підключення стилів на сторінку, види селекторів, за допомогою яких можна прив'язати стилі указаним елементам сторінки. І за якими принципами визначається пріоритетність записів у CSS. У цьому уроці студент розгляне базову поведінку елементів для формування ним розмірів. У яких випадках можливо, що контент випадатиме з елемента і псуватиме завнішній вигляд сторінки.

Робота з відступами, властивість margin, робота з текстом та видимістю елементів

Студент познайомиться із механікою роботи зовнішніх відступів у елементів. Дізнається, що таке провалювання (схлопування) і в яких випадках воно є. Переглянемо не явні відступи під час роботи з рядково-блочними елементами. Познайомиться з різними правилами CSS для стилізації тексту і як працює спадкування стилів елементів нащадків. Як можна приховувати елементи розмітки на сторінці та у чому різниця між різними способами.

Верстка з використанням Flexbox

Метою заняття є розібрати основні принципи роботи модуля Flexbox та навчити їх використовувати. Можливість задавати гнучку відстань між блоками та як визначаються їх розміри у деяких випадках. Поведінка зовнішніх відступів під час використання flexbox.

Комбінування селекторів та робота з фоном, властивість background

Комбінування дуже важлива частина при написанні коду, що розглянуто в структурі списків і таблиць, оскільки великі вкладеності необхідно створювати і розбирати постійно на етапі роботи з проєктом. Можливості звернень до елементів із псевдокласів та роботу пріоритету в таких структурах. На заняттях буде розібрано основні способи запису палітри кольорів у властивостях, де вказується забарвлення. У чому різниця встановлення прозорості елемента через opacity() та rgba(). Випадки додавання картинок через CSS та розміщення багато їх на одному елементі.

Семантична верстка

Студент дізнається про нові семантичні теги які з'явилися з HTML версії 5 та правила їх використання. Розглянуто структури простих сайтів із використанням семантичних тегів.

Форми

Метою даного уроку є ознайомлення з формами та їх призначенням. Розгляд елементів форм, їх можливостей та нюансів роботи як з функціоналом, так і зі стилізацією.

Позиціювання елементів

Метою даного уроку є знайомство з форматуванням елементів сторінки, завдання позиціонування через властивість position. Також буде розглянуто псевдоелементи та можливість реалізовувати просту анімацію для елементів.

Практика

Метою даного уроку є закріплення пройденого теоретичного матеріалу.

Практика

Метою даного уроку є закріплення знань на практиці верстаючи макет.

Особливості курсу

  • Практичні заняття і перевірка ДЗ
  • Безкоштовний відеокурс
  • Онлайн тестування і сертифікація

Викладачі курсу

  • Сергій Патьоха - Senior Software Engineer at BIScience
  • Олександр Гончаренко - Web Frontend Developer
  • Анна Павлюк - Web Frontend Developer
  • Олена Хижняк - Web Frontend Developer
  • Поліна Соколенко - Web Frontend Developer
  • Анастасія Ткаченко - Web Frontend Developer
  • Філіп Севене - Web Frontend Developer
  • Віталій Мазяр - Web Frontend Developer
  • Оксана Дмитрієва - Web Frontend Developer
  • Ростислав Сілівейстр - Web Frontend Developer
  • Олександр Петрик - FullStack Developer, SEO at Dinamicka Development
  • Денис Ковтун - Web Frontend Developer
  • Богдан Мартиненко - Frontend Developer
  • Тарас Заславський - Frontend Developer
  • Владислав Бєлік - React Frontend Developer
  • Олексій Татаренков - Frontend Developer
  • Олексій Кучеренко - тренер консультант напрямку Frontend
  • Олександр Виноградов - Software Developer
Подати заявку
Курс
Формат
Online
Початок навчання
09.12.2025
Тривалість
32 годин
Рівень
Для початківців, Для досвідчених
Мова навчання
Ukrainian
Вартість
9 624 UAH за курс
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
  • React
  • Frontend
CyberBionic Systematics
Подробиці

На цьому курсі учні напишуть невеликий додаток за допомогою React, навчаться розбивати його на логічні частини та компоненти, попрактикуються в написанні стилів разом із CSS Modules, а також познайомляться з основними концепціями написання додатку за допомогою цієї платформи.

Програма курсу

Вступ до React

На уроці учні познайомляться з React, навчаться створювати простий додаток за допомогою Create React App.

JSX у React

На уроці учні познайомляться з JSX, навчаться писати прості компоненти за допомогою JSX.

Основи React

На уроці учні познайомляться з підвидами компонентів, дізнаються, що таке state у React компонентах, навчаться додавати події до елементів та працювати зі списками.

Стан та життєвий цикл

На уроці учні познайомляться зі станом та життєвим циклом в React компонентах, дізнаються різницю між функціональними та класовими компонентами, навчаться їх використовувати, а також коротко ознайомляться з Redux.

Форми

На уроці учні познайомляться з можливістю працювати з формами в React, а також з такими поняттями, як підйом стану та валідація з PropTypes.

Стилізація у React

На уроці учні познайомляться з можливістю стилізації компонентів у React, а також навчаться використовувати модулі CSS для стилізації.

Створення списку заміток

На уроці учні познайомляться з можливістю вибору типу компонента під час виконання, попрактикуються застосовувати знання props, state, lifecycle та інших, а також створять список нотатків за допомогою React.

Hooks

На уроці учні познайомляться з основними хуками React, принципами їх роботи та напишуть свій (кастомний) хук і закріплять пройдений матеріал на практиці.

Введення в роутинг

На уроці учні познайомляться з бібліотекою react-router, навчаться організовувати маршрутизацію у додатку.

Створення сторінки помилки

На уроці учні познайомляться із Запобіжниками, React.Fragment, Строгим Режимом у React, а також навчаться створювати сторінку помилки.

Створення модального вікна

На уроці учні познайомляться з Рефами, Context API і Рендер пропсами, створять модальне вікно з використанням контексту і рендер пропс.

Оптимізація та продуктивність React додатків

На уроці учні дізнаються, що React може бути повільним - зрозуміємо, коли це може відбуватись і як із цим боротися. Познайомимося з різними інструментами, які дозволяють виявити наявність вузьких місць у React додатках, інструментами для оптимізації та аналізу, а також розберемо "нормалізацію" сховища в Redux, з'ясуємо, чим гарні іммутабельні структури даних у JavaScript, і як зробити білд додатку стрункішим та худішим.

Практика

По завершенню курсу ви будете вміти:

  • Застосовувати базові концепції побудови односторінкових додатків в екосистемі React
  • Писати та розбивати додатки на логічні частини і компоненти
  • Стилізувати додатки за допомогою CSS модулів
  • Будувати прості односторінкові додатки за допомогою React

Особливості курсу

  • Практичні заняття і перевірка ДЗ
  • Безкоштовний відеокурс
  • Онлайн тестування і сертифікація

Викладачі курсу

  • Богдан Мартиненко - Frontend Developer
  • Тарас Заславський - Frontend Developer
  • Владислав Бєлік - React Frontend Developer
  • Ростислав Сілівейстр - Web Frontend Developer
  • Олексій Татаренков - Frontend Developer
  • Олексій Кучеренко - Тренер-консультант напрямку Frontend
Подати заявку
Курс
Формат
Online
Початок навчання
15.12.2025
Тривалість
18 годин
Рівень
Для досвідчених
Мова навчання
Ukrainian
Вартість
4 980 UAH за курс
Вечірні заняттяВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
  • Frontend
CyberBionic Systematics
Подробиці

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

Програма курсу

Принципи побудови розмітки, Flex, Grid, шаблони сайтів

  • Визначення CSS3 Grid Layout
  • Підтримка Grid Layout браузерами
  • Визначення сіток, колонок і рядків
  • Властивості Grid для зображування контейнерів
  • Методи окремих елементів для зображування
  • Вкладені Grid
  • Області Grid

Анімація та градієнти

  • Властивість transition
  • Створення переходів
  • Різновиди трансформації
  • Матриця трансформації
  • Спільне використання трансформації із переходом
  • 3D-трансформації
  • Анімації
  • Використання градієнтів

Робота з графікою на стороні клієнта

  • Основи SVG
  • Path та координати
  • Різні можливості з фігурами

Canvas

  • Ознайомлення з тегом canvas
  • Промальовування ліній
  • Малювання прямокутної області
  • Заливка меж і градієнта
  • Очищення прямокутної області
  • Малювання кривих і дуг
  • Додавання img
  • Градієнтна заливка
  • Додавання тексту та тіні до елементів
  • Встановлення прозорості
  • Трансформація елементів полотна
  • Розгляд прикладів

Геолокація і налаштування карт для сайту

  • Перевірка функціонала геолокації у сучасних браузерах
  • Структура геолокації API
  • Функції JavaScript у розмітці для пошуку розташування
  • Функція зворотного геокодування

Знайомство з Node.js i Webpack

  • Знайомство з nodeJS
  • Створення проєкту і встановлення пакетів webpack
  • Налаштування запуску проєкту

Sass основи

  • Визначення SASS і перетворення формату SASS в CSS
  • Вкладеність
  • Використання змінних
  • Використання @mixin
  • Інтерполяція змінних
  • Директива @if у SASS
  • Імпортування та розширення файлів
  • Директива @if у SASS

Практика

Написання макету сторінки з використанням вивчених інтернет-технологій

Практика

Особливості курсу

  • Практичні заняття і перевірка ДЗ
  • Безкоштовний відеокурс
  • Онлайн тестування і сертифікація

Викладачі курсу

  • Сергій Патьоха - Senior Software Engineer at BIScience
  • Олександр Гончаренко - Web Frontend Developer
  • Анна Павлюк - Web Frontend Developer
  • Олена Хижняк - Web Frontend Developer
  • Поліна Соколенко - Web Frontend Developer
  • Дмитро Охріменко - Експерт з побудови розподілених та веб-орієнтованих додатків
  • Анастасія Ткаченко - Web Frontend Developer
  • Філіп Севене - Web Frontend Developer
  • Віталій Мазяр - Web Frontend Developer
  • Оксана Дмитрієва - Web Frontend Developer
  • Ростислав Сілівейстр - Web Frontend Developer
  • Олександр Петрик - FullStack Developer
  • Денис Ковтун - Web Frontend Developer
  • Богдан Мартиненко - Frontend Developer
  • Тарас Заславський - Frontend Developer
  • Владислав Бєлік - React Frontend Developer
  • Олексій Татаренков - Frontend Developer
  • Олексій Кучеренко - Тренер консультант напрямку Frontend
Подати заявку
Курс
Формат
Online
Початок навчання
03.11.2025
Тривалість
36 годин
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
уточнюйте
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
  • JavaScript
  • Frontend
Networking Technologies
Подробиці

Програма курсу

Основи

  • Змінні
  • Типи даних
  • Браузерні функції
  • Перетворення типів даних
  • Базові оператори, математика
  • Оператори порівняння
  • Оператор 'if', '?', 'switch', '??'
  • Console, comments

Цикли

  • Цикл for
  • Цикл while
  • Цикл do...while
  • Цикл for in
  • Цикл for of

Функції

  • Основи функцій
  • Function Expression
  • Стрілочні функції
  • Область видимості функції
  • Замикання функцій

Масиви

  • Основи
  • Методи масивів
  • Перебирання масивів
  • Map i Set
  • Spread i Rest
  • Деструктуризація

Дата та час

  • Об'єкт дати
  • setTimeout() та setInterval()

DOM та робота з браузером

  • DOM
  • Пошук по елементам
  • Зміна елементів
  • Перебирання
  • Створення, вставка та видалення
  • Робота з подіями
  • Події миші
  • Події клавіатури
  • Робота з формами

Інструменти які ти вивчиш на курсі

  • JavaScript
  • VS Code
  • GitHub

Навички які ти отримаєш після курсу

  • Вміння самостійно робити програми рівня панелі адміністратора, та виявляти й виправляти помилки в коді
  • Глибоке розуміння мови JavaScript, синтаксису, типів даних, змінних, функцій та об'єктів
  • Вміння застосовувати захоплюючі ефекти на сторінках та реалізовувати інший цікавий функціонал
  • Вміння впевнено представляти себе на співбесіді та розвивати свої SoftSkills

Викладачі курсу

Владислав Ралець - Front End Developer at CGI

Подати заявку
Курс
Формат
Online
Початок навчання
Дата формується
Тривалість
5 днів
Рівень
Для досвідчених
Мова навчання
Ukrainian
Вартість
уточнюйте
Заняття цілий деньВидається диплом/сертифікатСупровід ментора
  • Frontend
Networking Technologies
Подробиці

Курс надає знання та навички розробки web-додатків та додатків для Windows Store з використанням стеку технологій HTML5/CSS3/JavaScript, створення на HTML5 програмних компонентів та структур для цих додатків. Розглядаються принципи побудови програмної логіки, визначення та використання змінних, написання циклів та розгалужень, побудови інтерфейсів користувачів, обробки та зберігання даних, які вводяться, розробки структурованих додатків на базі HTML5/CSS3/JavaScript.

Програма курсу

Огляд HTML та CSS

  • Огляд HTML
  • Огляд CSS
  • Створення web-додатків за допомогою Visual Studio 2012

Створення та стилізації HTML5-сторінок

  • Створення сторінки HTML5
  • Налаштування стилю сторінки HTML5

Вступ до JavaScript

  • Огляд синтаксису JavaScript
  • Використання DOM в JavaScript
  • Вступ до jQuery

Створення форм для збору даних та перевірки даних, які введені користувачем

  • Огляд форм та типів введення
  • Перевірка даних, які введені користувачем, за допомогою атрибутів HTML5
  • Перевірка даних, які введені користувачем, за допомогою JavaScript

Взаємодія з віддаленим джерелом даних

  • Відправлення та отримання даних за допомогою XMLHttpRequest
  • Відправлення та отримання даних за допомогою операцій jQuery AJAX

Моделювання за допомогою HTML5 CSS3

  • Стилізація тексту
  • Стилізація групи елементів
  • Селектори CSS3
  • Використання графічних ефектів CSS3

Створення об'єктів за допомогою JavaScript

  • Розробка структурованого коду на JavaScript
  • Створення власних об'єктів
  • Розширення створених та наявних об'єктів

Створення інтерактивних сторінок за допомогою HTML5

  • Взаємодія з файлами
  • Використання мультимедіа
  • Реагування на дислокацію та контекст глядача
  • Налаштування та профілювання web-додатків

Використання можливостей зберігання даних на стороні клієнта

  • Локальне читання та запис даних
  • Збереження даних на стороні клієнта у offline-режимі за допомогою кеша додатка

Реалізація адаптивного інтерфейсу користувача

  • Підтримка різних форм-факторів
  • Створення адаптивного інтерфейсу користувача

Використання графіки

  • Створення векторної графіки за допомогою бібліотеки SVG
  • Програмне створення графіки за допомогою елемента Canvas

Анімація інтерфейсу користувача

  • Застосування CSS-переходів transitions
  • Перетворення елементів transformations
  • Використання покадрової CSS-анімації

Реалізація обміну повідомленнями, спрямованого в обидва боки, з використанням Web Sockets

  • Вступ до Web Sockets
  • Відправлення та отримання даних за допомогою Web Sockets

Використання Web Workers

  • Вступ до Web Workers
  • Виконання асинхронної обробки за допомогою Web Workers

Після курсу слухачі зможуть:

  • Використовувати Visual Studio 2012 для створення Windows Store та web-додатків
  • Описати нові функції HTML5, створювати сторінки в стилі HTML5
  • Додавати інтерактивні сторінки HTML5 з використанням JavaScript
  • Створювати форми HTML5 з використанням різних типів введення, перевіряти дані, які введені користувачем, за допомогою атрибутів HTML5 та коду JavaScript
  • Відправляти та отримувати дані віддалено за допомогою об'єктів XMLHttpRequest та методів AJAX-бібліотеки jQuery
  • Налаштовувати стиль сторінок HTML5 за допомогою нових можливостей CSS3
  • Створювати структурований код на JavaScript, який легко супроводжувати
  • Використовувати нові можливості JavaScript API в інтерактивних web-додатках
  • Створювати web-додатки, які підтримують зберігання даних на стороні клієнта у offline-режимі
  • Створювати web-сторінки HTML5, здатні адаптуватися до різних видів пристроїв та форм-факторів
  • Виводити графіку засобами HTML5, використовуючи елементи Canvas та масштабовану векторну графіку SVG
  • Підвищити зручність інтерфейсу користувача за допомогою анімації на сторінках HTML5
  • Використовувати нові можливості Web Sockets API для передачі та прийому даних між web-додатком та сервером
  • Зробити більш ефективною роботу додатків, які здійснюють тривалі операції з використанням Web Worker

Особливості курсу

  • LIVE-навчання незалежно від формату участі в курсі (очно/віддалено)
  • Підбірка матеріалів по темі курсу
  • Попередньо налаштоване середовище та навчання на сучасному обладнанні
  • Електронний сертифікат НЦ "Мережні Технології"
  • Обід та кава-брейки (очний курс)
  • Консультації тренера протягом 6-ти місяців після закінчення курсу
Подати заявку
Курс
Формат
Online
Початок навчання
30.09.2025
Тривалість
18 тижнів
Рівень
Для початківців, Для досвідчених
Мова навчання
Ukrainian
Вартість
17 515 UAH за курс
Вечірні заняттяВидається диплом/сертифікатМожливе працевлаштуванняСупровід ментораРеальний проект у портфоліо
  • Frontend
Prog Academy
Подробиці

На курсі запропоновано десятки практичних завдань різної складності для закріплення теорії. В кінці курсу ви створите проєкт, який стане частиною портфоліо і резюме, а також отримаєте практику роботи в команді над реальним комерційним проєктом.

Програма курсу

Верстка HTML/CSS

  • Основні завдання фронтенду. Інструменти розробки
  • Введення у HTML. Структура коду
  • Основні теги роботи із текстом, зображеннями
  • Створення веб-форм
  • Робота із таблицями даних
  • Списки
  • Введення в CSS, поділ змісту та уявлення
  • Контейнер CSS. Підключення CSS стилів. Застосування валідатора
  • CSS селектори
  • Способи розкладки CSS: float, grid, flexbox
  • Використання SASS, SCSS
  • Анімація, трансформація, переходи
  • Роботи з градієнтами
  • Сучасні типи верстки
  • Методологія БЕМ та рекомендації щодо назви класів
  • CSS-фреймворки: Bootstrap
  • CSS media queries
  • Нові специфікації HTML5 та CSS3
  • Семантичні теги. Теги фізичної та логічної розмітки у HTML5
  • Різні види верстки. Адаптивність та оптимізація верстки
  • IT-English Speaking Club з викладачем із IT компанії

JavaScript

  • JavaScript: історія, роль, синтаксис
  • Базові конструкції мови
  • Примітивні типи даних, змінні, оператори
  • Логічні структури
  • Робота з масивами: одновимірними, двовимірними
  • Методи та функції
  • Класи та об'єкти. Основи ООП
  • Конструктори та прототипи
  • JavaScript у браузерах: модель W3C DOM
  • Форми та регулярні вирази
  • Події, опрацювання подій
  • Інтерактивні інтерфейси. AJAX, Promise, Fetch
  • Сучасні можливості ES6-ES9
  • Архітектура REST
  • Бібліотека jQuery
  • Вивчення React та/або Vue.js
  • Збірка проектів: WebPack, Gulp
  • Робота з npm, npx, yarn
  • Основи Node.JS
  • Написання дипломного проєкту для портфоліо. Code review від викладача
  • Гарантоване стажування у комерційному проекті за підсумками тестування та захисту дипломного проєкту
  • IT-English Speaking Club з викладачем із IT компанії

Особливості курсу

  • Для людей віком від 12 років
  • Вечірня група (з 19.00)
  • Чат з тренером і групою
  • Стажування у реальному проєкті
  • IT English Speaking Club
  • Додаткові можливості у пакеті PLUS

Викладачі курсу

  • Всеволод Євгієнко - CEO та тренер
  • Дмитро Міщук - Тренер
  • Олександр Цимбалюк - Тренер
  • Філіп Севене - Тренер
  • Олег Суховеров - Тренер
  • Олег Новіков - Тренер
  • Олексій Рихлюк - Тренер
  • Максим Сластен - Тренер
Подати заявку
Курс
Формат
Online
Початок навчання
15.11.2025
Тривалість
22 годин
Рівень
Для початківців, Для досвідчених
Мова навчання
Ukrainian
Вартість
5 478 UAH за курс
Гнучкий графікВидається диплом/сертифікатСупровід ментора
  • Angular
  • Frontend
CyberBionic Systematics
Подробиці

Цей курс є частиною спеціальності Frontend розробник. Він допоможе вам вивчити основи платформи Angular.

Програма курсу

Введення до Angular

  • Знайомство з фреймворком Angular
  • Огляд необхідних інструментів для початку розроблення
  • Створення додатку, огляд файлів та папок створеного проєкту
  • Знайомство з синтаксисом та структурою коду на Angular
  • Створення компонентів і їх реєстрація через CLI
  • Компонентний підхід задання стилів
  • Компоненти та модулі в додатку, а також те, як вони описані шаблоном Декоратор
  • Додавання картинок/іконок до проєкту

Події та датабайдинг

  • Основи маршрутизації і основні принципи виведення даних на сторінку
  • Створення простого проєкту з маршрутизацією
  • Задання різної логіки виведення даних
  • Стилізація розмітки через інструменти Angular
  • Розбір синтаксису запитів та технічної різниці між ними в їх використанні

Директиви, пайпи. Роль модулів Angular

  • Використання директив
  • Створення необхідних шаблонів, які повторюються в проєкті
  • Перетворення даних за допомогою пайпів
  • Модульна архітектура

Компоненти та їх робота

  • Стилі компонентів
  • Передача даних між компонентами
  • Взаємодія компонентів
  • Життєвий цикл компонентів

Основи роботи сервісів та їх роль у додатку

  • Основи роботи сервісів
  • Створення та реєстрація сервісу
  • Локальні сервіси
  • Область видимості сервісів та їх взаємозв'язок

Введення у HttpClient та RxJS

  • Основи бібліотеки RxJS та її використаннядля роботи з асинхронністю
  • Модуль HttpClientModule для взаємодії з сервером

Форми в Ангуляр

  • Створення форм в Angular
  • Двосторонній байдинг
  • Реактивні форми. Відображення стану форми та її полів
  • Валідатори
  • Управління формою, її полями
  • Асинхронні валідатори

Маршрутизація

  • Основи маршрутизації, динамічні сторінки
  • Динамічні сторінки і передача даних між ними
  • Обмеження маршрутизації в Angular

Практичне заняття. Підготовка до роботи проєкту

Підготовка до роботи проєкту, налаштування маршрутизації, реалізація простого запиту на сервер для виводу інформації в блоках.

Практичне заняття. Створення окремих сторінок динамічною маршрутизацією

Створення окремих сторінок динамічною маршрутизацію і передача даних між сторінками.

Практичне заняття. Додавання форми з валідацією

Додавання форми з валідацією.

Після завершення курсу ви будете вміти:

  • Розуміти роль та переваги Angular у веб-технологіях
  • Створювати простий додаток, який буде складатися з компонентів, модулів та сервісів
  • Налаштовувати маршрутизацію в додатку та передавати дані між сторінками
  • Використовувати додаткові вбудовані інструменти для додатку, такі як: директиви, пайпи, сервіси, форми
  • Виконувати запити та приймати відповіді з серверної сторони сайту/додатку

Особливості курсу

  • Практичні заняття і перевірка ДЗ
  • Безкоштовний відеокурс
  • Онлайн тестування і сертифікація

Викладачі курсу

  • Дмитро Охріменко - Експерт з побудови розподілених та веб-орієнтованих додатків
  • Сергій Патьоха - Senior Software Engineer
  • Олександр Гончаренко - Web Frontend Developer
  • Анна Павлюк - Web Frontend Developer
  • Олена Хижняк - Web Frontend Developer
  • Поліна Соколенко - Web Frontend Developer
  • Віталій Мазяр - Web Frontend Developer
  • Оксана Дмитрієва - Web Frontend Developer
  • Денис Ковтун - Web Frontend Developer
Подати заявку
Курс
Формат
Online
Початок навчання
04.11.2025
Тривалість
10 годин
Рівень
Для початківців, Для досвідчених
Мова навчання
Ukrainian
Вартість
2 739 UAH за курс
Вечірні заняттяВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
  • TypeScript
  • Frontend
CyberBionic Systematics
Подробиці

В цьому курсі ви дізнаєтеся все, що необхідно для початку використання цієї мови програмування. Протягом 5 уроків, ви навчитеся користуватися інструментами для розробки і компіляції коду і освоїте синтаксичні конструкції, які є в TypeScript.

Програма курсу

Введення. Змінні та функції

  • Навіщо використовувати TypeScript
  • Синтаксис TypeScript
  • Інструменти для роботи
  • Налаштування фреймворками
  • Створення HelloWorld додатки
  • Типи даних в TypeScript
  • Статична і динамічна типізація
  • Ambient Declarations
  • Об'єкти
  • Функції, Arrow function
  • Статичні типи

Класи і інтерфейси

  • Використання модифікаторів доступу
  • Accessors
  • Спадкування і використання ключового слова super
  • Робота з абстрактними класами
  • Використання інтерфейсів

Generics

  • Методи для роботи з масивами
  • Визначення узагальненого типу даних (Generic)
  • Generic і інтерфейси
  • Приклад створення словника
  • Обмеження при використанні generic
  • Шаблон Iterator
  • Використання Symbo
  • Використання генераторів

Модулі і простори імен

  • Використання просторів імен в TypeScript
  • Визначення модуля
  • Створення модулів
  • Використання завантажувачів модулів
  • Основи застосування Webpack

Практика

Даний урок присвячений практичному закріпленню матеріалу даного курсу

Особливості курсу

  • Практичні заняття і перевірка ДЗ
  • Безкоштовний відеокурс
  • Онлайн тестування і сертифікація

Викладачі курсу

  • Олена Хижняк - Web Frontend Developer
  • Віталій Мазяр - Web Frontend Developer
  • Оксана Дмитрієва - Web Frontend Developer
  • Денис Ковтун - Web Frontend Developer
Подати заявку
Курс
Формат
Online
Початок навчання
02.09.2025
Тривалість
9 місяців
Рівень
Для дітей
Мова навчання
Ukrainian
Вартість
3 000 UAH за місяць
Гнучкий графікВидається диплом/сертифікатСупровід ментора
  • Frontend
DAN IT Education
Подробиці

На завершення курсу кожен студент розробить повноцінний проєкт, який буде захищений. Це дозволить набути досвіду у формуванні власного проєктного погляду та аргументуванні думок. Ця навичка допоможе дитині просувати власні ідеї у сфері IT, здобуваючи авторитет серед дорослих програмістів.

Програма курсу

Модуль 1. HTML&CSS Basics

  • Основні HTML теги та атрибути
  • Основи CSS, блочна модель
  • Селектори CSS
  • Оформлення елементів
  • Поля і відступи
  • Порядок верстки блоку
  • Тестування результатів верстки
  • Управління розміром і положення блоків на сторінці 
  • Технологія Flexbox
  • Базова анімація 
  • Основні інструменти розробника 
  • Робота з GitLab, базові команди, створення свого репозиторію

Модуль 2: UI/UX design Basics

  • Базове знання Figma
  • Базове знання UI/UX
  • Основи сайтобудування

Модуль 3. Advanced HTML/CSS

  • Технологія Bootstrap 4 
  • Технологія Gulp
  • Просунута структура проєкту
  • Адаптивна верстка
  • Гумова верстка 
  • Препроцессори, а саме: Sass

Модуль 4. Basic JavaScript

  • Базові та об’єктні типи даних
  • Перетворення типів
  • Змінні й правила їх іменування
  • Умови, оператори, масиви, цикли, функції, робота з датами та часом
  • Введення в браузерні події
  • Робота з таймерами, localStorage
  • Області видимості
  • Контекст виклику
  • Обробка помилок
  • ООП в JavaScript – функції-конструктори, прототипи, класи

Модуль 5. Soft Skills

Модуль 6. Final Project

Особливості курсу

  • Для дітей віком від 12 до 15 років
  • До 15 дітей в групі
  • Система оцінки знань
  • Багато практичних завдань
  • Робота над власними проєктами
  • Сертифікат про закінчення навчання
Подати заявку
Курс
Формат
Online
Початок навчання
23.10.2024
Тривалість
6 місяців
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
16 500 UAH за курс
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
  • Frontend
Logos IT-Academy
Подробиці

Програма курсу

HTML/CSS

На етапі курсу HTML/CSS ти отримаєш всі необхідні знання стосовно "каркасу", розмітки сайту. Навчишся застосовувати стилі, шрифти та опануєш всі основні моменти у побудові сайту. Створиш свою першу лендінг сторінку, навчишся як робити навігацію по сайту, сайдбар та багато іншого. Будеш працювати з зображеннями на сайті та текстовими блоками. Зрозумієш що таке мета-кодування сторінки та для чого воно використовується. Познайомишся з різними браузерами з точки зору розробника та зрозумієш переваги та недоліки кожного з них.

Основи програмування

У блоці "Основи програмування" ти поринеш у світ IT, зробиш свій перший крок до того, щоб зрозуміти що таке програмування та чим займаються програмісти. Будеш вивчати ази мови Java, розберешся чому вона одна з найпопулярніших. Також в цьому курсі ти напишеш ряд програм, які нададуть тобі перший поштовх в цій сфері. Цей блок підготує тебе до того, щоб перейти вже на професійний рівень програмування.

JavaScript

На цьому етапі курсу ти ще більше будеш заглиблюватись у веб-розробку та програмування. Дізнаєшся про всі особливості та можливості JavaScript. Навчишся ще більше взаємодіяти з користувачами на твоєму сайті через форми, корзину, карти, коментар та багато іншого. Тут ти зможеш зробити свій сайт більш функціональним та професійним.

JavaScript Advanced

На етапі курсу "JavaScript Advanced" ти зможеш реалізувати на своєму сайті все задумане, адже будеш вивчати такий популярний фреймворк Angular. Ти дізнаєшся про те які є фреймворки та як з ними працювати. Навчишся працювати з базами даних та зрозумієш особливості роботи сервера. Дізнаєшся що таке Git та опануєш новий для тебе підхід роботи з даними. Дізнаєшся що таке Gulp та як з його допомогою можна автоматизувати роботу фронтенд-розробника. Будеш працювати з об'єктами, функціями та дізнаєшся про всі можливості їх взаємодії у JavaScript. Вивчиш ще одну "мову програмування", фактично надбудову JavaScript, яка допомагає створювати масштабні проєкти, зберігаючи при цьому високу якість та спрощує процес самої розробки.

Проєкт

Після всіх етапів курсу ти зможеш застосувати всі свої знання виконуючи фінальний проєкт. Це практика яка триватиме 2 тижні. За цей час ти зможеш максимально заглибитись у розробку, оскільки всі матеріали наближені до реального проєкту та робочого процесу в ІТ компанії.

Тренінг "Співбесіда в IT"

На тренінгу ми навчимо тебе як правильно проходити співбесіду, щоб ти міг показати всі свої навики та успішно працевлаштуватись. Обговоримо яка специфіка співбесіди саме в ІТ сфері. Ти дізнаєшся з чого розпочинати розмову, що варто, а що не варто говорити та як переконати рекрутера, що ти його ідеальний кандидат.

Тренінг "Методологія управління проєктами SCRUM"

Тут ти дізнаєшся які є переваги цієї гнучкої методології та зможеш на практиці її застосувати. А також поговоримо:

  • у чому специфіка ринку ІТ
  • які є цінності у розробці ПЗ та готового продукту загалом
  • які ще є підходи до розробки та у яких випадках вони використовуються
  • як зробити продукт з точки зору безпеки як для клієнта, так і для кінцевого користувача

Ми детально пропрацюємо всі пункти та розберемо їх важливість. Ти зможеш стати частиною змодельованого процесу розробки та закріпити все на практиці. Більшість компаній працює саме за цією методологією, тому, дуже важливо вміти правильно взаємодіяти з колегами та розуміти всі процеси розробки.

Тренінг "Як заробити на міжнародному фрілансі UpWork першу 1000$"

Якщо ти хочеш працювати та не залежати від компанії тобі на UpWork. На фрілансі ти можеш працювати за своїм особистим графіком та брати тільки ті проєкти, які цікаві тобі. На тренінгу провідні спеціалісти розкажуть як ефективно працювати на UpWork. Розкажуть як здобути перший досвід та просуватись у рейтингу професійних розробників. Навіть маючи мінімальний досвід ти зможеш працювати над своїми першими проєктами та почнеш заробляти. Тебе чекає покрокова інструкція від реєстрації до пошуку та відбору проєкту.

Особливості курсу

  • Робота з експертами
  • Портфоліо
  • Зворотній зв'язок
  • Ефективне навчання
  • Диплом
  • Повний стек технологій
  • Закритий телеграм-чат
  • Геймифікація
  • Допомога з працевлаштуванням для успішних студентів

Викладачі курсу

  • Олександр Гуцуляк - Solution Architect at TeachMagic
  • Добрянський Юрій - CTO at Empeek
  • Тарас Кундик - Frontend Developer at CodeLions
  • Олег Коваль - Intermediate QC Engineer at SoftServe
  • Володимир Ярошинський - Python Developer at NDA Company
  • Юрій Кіт - Senior Software Engineer at TalentFly
  • Маріна Мокра - IT and Business English
  • Петро Жук - Web Software Developer at UKEESS Software House
  • Анна Кузій - Intermediate Software Engineer at SoftServe
  • Іванна Бабчанік - Senior Software Engineer at EPAM
  • Михайло Гладченко - CEO & Founder at Asign
  • Андрій Ровенський - Lecturer of Computer Science at Logos IT-Academy
  • Тарас Погорецький - Senior Full Stack Engineer at EPAM
Подати заявку
Курс
Формат
Online
Початок навчання
10.09.2025
Тривалість
10 тижнів
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
уточнюйте
Вечірні заняттяВидається диплом/сертифікатМожливе працевлаштуванняСупровід ментораРеальний проект у портфоліо
  • Angular
  • Frontend
Levelup
Подробиці

Пройдеш повний цикл створення веб-проєктів з нуля. Навчишся швидко та якісно створювати програми з використанням Angular. Налагоджувати вже існуючі програми та покращувати їх роботу.

Програма курсу

Модуль 1. Встановлення Angular CLI

  • Встановлення Node.js та npm
  • Встановлення Angular CLI через npm
  • Створення нового проекту Angular

Модуль 2. TypeScript

  • Основи TypeScript
  • Типи даних (примітиви, об'єкти, масиви, функції)
  • Інтерфейси та класи

Модуль 3. Філософія Angular

  • SPA (Single Page Application) концепція
  • Архітектура Angular (MVVM, DI, модулі)

Модуль 4. Angular CLI

  • Основні команди CLI
  • Генерація компонентів, директив, сервісів
  • Виконання завдань, таких як build, serve, test

Модуль 5. Компоненти: Створення/Використання/Декоратори

  • Структура компоненту (TS, HTML, CSS)
  • Використання декораторів @Component
  • Створення компонентів через Angular CLI
  • Зв'язування даних (Data Binding)

Модуль 6. Component Life Cycle

  • Життєвий цикл компоненту
  • Основні методи життєвого циклу (ngOnInit, ngOnChanges, ngOnDestroy)
  • Використання хуків життєвого циклу для керування станом компонента

Модуль 7. Change Detection

  • Механізм виявлення змін
  • Оптимізація продуктивності

Модуль 8. Модулі / standalone

  • Основи створення модулів в Angular
  • Використання декоратора @NgModule
  • Standalone компоненти
  • Створення standalone компонентів

Модуль 9. Директиви + Pipes

  • Основи створення директив
  • Відмінності між структурними та атрибутивними директивами
  • Використання вбудованих директив (ngIf, ngFor)
  • Створення та використання pipes
  • Вбудовані pipes (DatePipe, CurrencyPipe, UpperCasePipe)
  • Асинхронні pipes (async pipe)

Модуль 10. Services

  • Основи створення сервісів
  • Використання декоратора @Injectable
  • Використання HttpClient для виконання HTTP запитів
  • Обробка помилок та інтерсептори

Модуль 11. Форми Reactive Forms

  • Основи Reactive Forms
  • Створення FormGroup та FormControl
  • Зв'язування форми з шаблоном

Модуль 12. Обробка даних форми

  • Використання FormBuilder для спрощення створення форм
  • Валідація форм (вбудована та кастомна)
  • Відстеження стану та змін форми

Модуль 13. Форми валідація, динамічне створення

  • Вбудовані валідатори (required, minLength, maxLength)
  • Кастомні валідатори
  • Асинхронні валідатори

Модуль 14. Динамічне створення форм

  • Динамічне додавання та видалення контролів
  • Створення форм за допомогою даних з сервера
  • Динамічні форми з повторюваними елементами

Модуль 15. Ін'єкція залежностей

  • Основи ін'єкції залежностей
  • Використання декоратора @Injectable
  • Впровадження DI (Dependency Injection) в Angular
  • Використання провайдерів

Модуль 16. Роутінг

  • Налаштування маршрутизації в додатку
  • Використання RouterModule та Routes
  • Створення навігації між сторінками
  • Lazy Loading модулів
  • Guard-и та Resolver-и

Модуль 17. Angular Material/PrimeNG

  • Angular Material
  • PrimeNG

Модуль 18. RxJS

  • Основи RXJS
  • Спостережувані (Observables) та підписники (Subscribers)
  • Основні оператори (map, filter, tap)
  • Обробка асинхронних даних

Модуль 19. Store - state management

  • Основи управління станом
  • Поняття глобального стану
  • Використання бібліотеки NgRx
  • Створення стору, редюсерів та екшенів

Модуль 20. Store практика

  • Реалізація простого додатку
  • Створення простого додатку з використанням NgRx
  • Управління станом додатку

Модуль 21. Translate Service

  • Інтернаціоналізація додатку
  • Використання бібліотеки ngxtranslate
  • Створення файлів перекладів
  • Динамічна зміна мови в додатку

Після курсу ти зможеш:

  • Розуміти, як працює відстеження змін. Налагоджувати вже існуючі програми та покращувати їх роботу
  • Швидко та якісно створювати програми з використанням можливостей Angular приймаючи правильні архітектурні рішення
  • Збирати веб-додатки з окремих компонентів, як з деталей конструктора та застосовувати шаблони Angular дизайну
  • Використовувати в роботі низку допоміжних бібліотек, які часто доповнюють Angular для створення повнофункціональних додатків
  • Навчишся справлятися з витоками пам'яті у своїх проєктах, щоб підвищити продуктивність
  • Візьмите участь у командному стажуванні та створите власний проєкт - інтернет-магазин. Роботу організуєте як у справжній компанії - у вас будуть спринти, дзвінки з тимлідом, а вести контроль версій у Git.

Особливості курсу

  • Живі онлайн заняття
  • 90% практики
  • Підтримка викладачів
  • Кар'єрні івенти
  • Можлива оплата курсу частинами

Викладачі курсу

Димтро Томчук - Front-End Developer (Angular Developer)

Подати заявку
Курс
Формат
Online
Початок навчання
18.08.2025
Тривалість
130 годин
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
5 000 UAH за місяць
Вечірні заняттяВидається диплом/сертифікатСупровід ментора
  • Frontend
DAN IT Education
Подробиці

Курс для вивчення основ HTML, CSS та Javascript. Після курсу кожен студент отримає повний набір навичок, які необхідні для працевлаштування, а також свій проєкт для портфоліо.

Програма курсу

Модуль: Soft Skills

Блок 1. Основи HTML, CSS

  • HTML – засіб логічної розмітки веб-сторінки
    • Використовуючи структуру розмітки, можливо вносити дані на сторінку. У процесі першого модуля студенти навчаться описувати цю структуру, використовуючи HTML-теги
  • Основи CSS
    • Селектори CSS
    • Оформлення елементів
    • Управління розміром і положенням блоків на сторінці
    • Поля і відступи
    • Порядок верстки блоку
    • Тестування результатів верстки
    • Базова анімація
    • Стандарт CSS3
    • Основні інструменти розробника

Блок 2. Основи JavaScript

  • Базові та об’єктні типи даних
  • Перетворення типів
  • Змінні та правила їх іменування
  • Умови, оператори, масиви, цикли, функції
  • Області видимості, замикання
  • Контекст виклику
  • Керуючі конструкції
  • Обробка помилок
  • Введення в браузерні події
  • Порядок обробки подій (event loop)
  • Взаємодія з браузером DOM
  • Функціями зворотного виклику (callback)
  • Знайомство з бібліотекою Jquery

Фінальний проєкт

Реалізація landing page на HTML, CSS та Javascript з використанням SVG графіки, паралакс ефекту, перемикання вкладок, анімованої каруселі та анімованих блоків, використовуючи бібліотеку jQuery та плагіни до неї, а також з використанням бібліотеки для роботи із зображеннями.

Особливості курсу

  • Живі заняття у вечірній час (19:00-22:00)
  • Система оцінки знань
  • 15 практичних завдань
  • Дипломний проєкт для портфоліо
  • Допомога у працевлаштуванні

Викладачі курсу

  • Андрій Моргун - Middle front-end engineer, LULU Software
  • Богдан Адмін - Senior Software Engineer, NDA
  • Роман Марченко - Senior Frontend Developer, Freelance
Подати заявку
Курс
Формат
Online
Початок навчання
01.05.2025
Тривалість
12 місяців
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
49 580 UAH за курс
Вечірні заняттяВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
  • Frontend
IT STEP Academy
Подати заявку
Подробиці

Ви почнете з основ верстки HTML та CSS. Вивчите JavaScript та фреймворки, а до кінця курсу навчитеся робити веб-сторінки та корпоративні сервіси. Отримаєте досвід роботи в команді та почнете кар'єру веб-розробника.

Програма курсу

Базовий семестр

  • Технології АІ
  • Технології АІ для вирішення універсальних задач
  • Хмарні технології та бази даних
  • Orientation in development: Low-Code та No-Code платформи, Front-End та Back-End

Введення у Web. Структура HTML

  • Введення у предмет
  • Введення в мову розмітки. Мова розмітки гіпертексту HTML
  • Правила запису тегів та їх атрибутів у стандарті HTML5. Синтаксичні відмінності HTML4, XHTML, HTML5
  • Основні помилки у записах тегів
  • Структура документа HTML5
  • Кодування сторінки та meta-теги
  • Класифікація тегів: лінійні та блокові
  • Модель форматування тексту: заголовки та абзаци. Елементи p, h1..h6. Вирівнювання тексту блокових елементів: атрибут align
  • Класифікація тегів: логічне та фізичне форматування
  • Практика: створення найпростішої web-сторінки

Форматування за допомогою CSS

  • CSS - каскадні таблиці стилів
  • Теги без форматування div - блоковий, span - лінійний
  • Аналогія HTML та CSS на прикладі лінійних та блокових тегів
  • Додаткові властивості CSS для форматування тексту: letter-spacing, line-height, text-intend, text-transform, white-space, word-spacing
  • Використання атрибутів class та id для завдання стилів
  • Використання зовнішніх CSS-файлів стилів
  • Практика: форматування тексту за допомогою CSS
  • Створення списків
  • Створення вкладених списків
  • Форматування списків за допомогою CSS
  • Списки визначень: dl, dd, dt
  • Управління відступами та полями
  • Практика створення списків

JavaScript та бібліотека jQuery

  • Введення в JavaScript
  • Об'єкт. Масиви. Об'єкт Array. Терміни. Об'єкти String, Date, Math. Введення в об'єкт. Введення в об'єктно-орієнтоване програмування
  • Опрацювання подій
  • Browser Object Model. Document Object Model
  • Форми
  • Перевірка достовірності форм. Використання куків
  • Малювання за допомогою canvas, підтримка медіа-можливостей
  • JSON, AJAX
  • ECMAScript 6, ECMAScript 11
  • Модульне тестування
  • Структурні патерни
  • Патерни проєктування
  • Патерн MVS
  • Принципи проєктування класів Solid
  • Введення у jQuery. Події jQuery. Стилі та анімація. Взаємодія із DOM. AJAX та jQuery
  • Командна праця. Управління програмними проєктами

Використання фреймворку Angular, React

  • NodeJS
  • Складання проєктів за допомогою Webpack та інших інструментів
  • Angular
  • React

Особливості курсу

  • Заняття 2 рази на тиждень по 2 пари
  • Структурована подача знань
  • Підтримка викладачем
  • Готовий проєкт для портфоліо
  • Підготовка до працевлаштування
Подати заявку

Сторінки

Читайте нас в Telegram, щоб не пропустити анонси нових курсів.

Відгуки про курси

Гість   03.02.2026

Взагалі не рекомендую цю школу! Жахливий сервіс, де вас не попередять про зростання цін, клієнтоорієнтованість взагалі жах! На усі зауваження відповідь дають «зафіксував», коли провина саме лежить на школі та надані послуг.
Роблять усі умови, щоб ви сплатили пакетом, кажуть що якщо щось дитині не сподобається то повернуть кошти , але повертають вони 30% з того , що повинні. Звичайно, що це прописано у оферті на 9 сторінок, але при продажу кажуть зовсім інше і в тебе не виникає навіть сумнівів, що таке може бути!! Я проходила навчання раніше і в інших школах і усе було прозоро, відповідально і тд, а тут просто пробили дно.
Ще важливе зауваження- при підписані договору заявляли, що ціна закріплюється на весь період навчання, але потім раптом все змінилось і навчання подорожчало на 15%. Ось такий сервіс, тємкі муткі

Рекомендації: Не рекомендую
1
Середня: 1 (1 голос)
Курси Frontend
Ніна   13.07.2025

У школі сподобалося, що ніхто не тягне кота за хвіст. Все чітко, по темі і з купою практичних задач. Брала курс Front-end. Вперше написала сайт, який відкривається не тільки в мене на ноуті. Вдячна викладачу за терпіння.

Рекомендації: Рекомендую
5
Середня: 5 (1 голос)
Курси Frontend
Наталя    25.06.2025
Після завершення курсів з Frontend маю тільки позитивні враження та приємні спогади, відносини на курсі були мега дружні. Викладачі вміло пояснюють теорію та одночасно надають можливість багато практикуватися, що дає нам неоціненний досвід. На додаток до цього, отримала Е-сертифікат і деякі цінні (навіть можна сказати таємні) професійні поради, що стали приємним бонусом для моїх знань та здобутків. Переглядала фоточки вашої школи, зараз ви інші)) за останні пару років ви стали кращі, змінились, змужніли, стали ще соліднішими - принаймні ті кого я впізнала на тих фото. Всім привіт і ДЯКУЮ!
Рекомендації: Рекомендую
5
Середня: 5 (1 голос)
Курси Frontend
Sergio   11.06.2025

Як учасник стажування хочу підтримати компанію після відгуку нижче. Як колись написав один з учасників - "це вже не курси, а симуляція реальної роботи і ніхто не буде водити вас за ручку". Зі своєї сторони хочу підтвердити, що стажування проходить на дуже хорошому рівні для тих, хто прийшов туди за досвідом. Прикольний доволі складний проєкт, на момент моєї участі був доволі активний чат учасників, які допомагали один одному.

Плюси:Якісне навчання Стажування Я знайшов работу після навчання
Рекомендації: Рекомендую
5
Середня: 5 (1 голос)
Курси Frontend
Дмитро   11.05.2025

Після 10 років важкої фізичної праці на меблевій фабриці я й не сподівався, що в моєму житті щось може кардинально змінитись. Але бажання навчитися чомусь новому, спробувати себе в чомусь іншому й нарешті відчути повагу до своєї праці підштовхнуло мене до програмування.

Чесно кажучи, все це «айтішні» розповіді про басейни, більярди, фітнес-зали, гнучкий графік і круте ставлення на роботі здавалося мені вигадкою. Але вирішив ризикнути. Вступив на курс. І знаєте що? Вже через кілька тижнів зрозумів - це моє.

Було важко. Деякі речі давались із боєм. Але цікавість і підтримка менторів тримали на плаву. Найбільшим шоком стало те, що вже через два місяці після старту навчання мені запропонували пройти співбесіду на позицію верстальника в одній компанії. Пройшов. З першого разу. Після 10 років, де максимум що змінювалося — це розміри меблів.

Зараз я вже на третьому місяці випробувального терміну. Працюю з HTML, CSS і JavaScript. Робота не легка, але я кайфую. Радію, що наважився. І хочу сказати всім, хто сумнівається: у вас усе вийде, якщо не здаватись.

Плюси:1. Дуже круті викладачі, які справді можуть пояснити складне просто. 2. Реальна підтримка та зворотний зв’язок. 3. Програма охоплює все, що потрібно для старту кар’єри джуна. 4. Можна знайти роботу ще до завершення курсу. 5. Курси мотивують не здаватися, навіть коли важко.
Рекомендації: Рекомендую
5
Середня: 5 (1 голос)
12.05.2025   Відповідь представника компанії

Дякуємо за ваш надзвичайно щирий і надихаючий відгук! 

Ваша історія - це найкраще підтвердження того, що зміни можливі в будь-якому віці й з будь-якого старту. Ви - приклад сили волі, наполегливості та віри в себе. Дуже радіємо, що навчання стало для вас тим самим кроком, який відкрив нові можливості та новий етап життя.

Пишаємося, що ви змогли знайти своє місце в ІТ і вже працюєте за спеціальністю! Нехай далі буде ще більше професійних перемог, задоволення від роботи та впевненості у власних силах. Дякуємо, що обрали GoIT і поділилися своєю історією!

Курси Frontend