Курсы Frontend Developer: HTML и CSS

Подборка лучших курсов Frontend Developer, которые познакомят вас с современными практиками разработки сайтов. Вы сможете усвоить с нуля основные технологии для верстки сайтов: HTML, CSS, JavaScript и Bootstrap. Продвинутые Frontend разработчики также найдут для себя подходящие обучающие программы.
Читать далее

Сравнение всех курсов

Фильтр
Курс
Формат
Online
Начало занятий
21.04.2025
Длительность
6 месяцев
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
уточняйте
Вечерние занятияВыдаётся диплом/сертификатВозможно трудоустройствоСопровождение ментораРеальный проект в портфолио
GoIT
  • Frontend
Подробнее

Програма навчання Junior Frontend Developer. На онлайн-курсі ти навчишся створювати інтерфейси вебсайтів та застосунків

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

HTML та CSS

  • Основи HTML. Теги й атрибути. Семантика
  • Основи CSS. Селектори. Колір
  • Оформлення тексту й шрифти
  • Блочна модель. Flexbox
  • Фон і декоративні елементи
  • Позиціонування елементів
  • Трансформації. Переходи та анімація
  • Форми
  • Респонсівна верстка та адаптивна графіка
  • Методології. Препроцесори
  • +2 особистих і 1 командний проєкт

JavaScript

  • Змінні та типи даних. Відгалуження. Цикли
  • Масиви. Функції
  • Об’єкти. Операції rest і spread
  • Масиви: методи перебирання
  • Ключове слово this. Прототипи й класи
  • DOM та події
  • Патерни й оптимізація подій
  • Інфраструктура проєктів. Вебсховище
  • Асинхронність і Date. Проміси
  • Взаємодія з бекендом
  • CRUD. Асинхронні функції
  • +1 командний проєкт

Soft skills

  • Філософія Agile
  • Методологія Scrum
  • Робота в команді
  • Тайм-менеджмент
  • Аналітика проєктівпроєктів
  • English speaking club (пакет Plus)
  • Робота з EnglishDom Wordsз EnglishDom Words
  • Заняття з працевлаштуванняз працевлаштування
  • Складання грамотного резюме
  • Створення сторінки на LinkedIn
  • Написання мотиваційного листа
  • Майданчики для пошуку роботи
  • Підготовка до HR-інтерв’ю
  • Підготовка до технічного інтерв’ю
  • Комунікативні навички
  • Тестові співбесіди

Career skills

  • Створення резюме
  • Оформлення проілів LinkedIn та Djinni
  • Підготовка до HR та технічної співбесіди
  • Індивідуальні кар'єрні консультації
  • Рекомендація студентів на вакансії партнерів

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

  • Вечірні заняття (17:30 - 21:30)
  • 2-3 вебінари на тиждень
  • Кабінет my.goit
  • Спілкування в чаті

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

  • Діма Рябовол - Markup Developer в Studytube
  • Вова Мельник - Frontend Lead в GoIT
  • Андрій Данилко - Senior Frontend Developer в GoIT
  • Саша Вєнік - Senior Frontend Engineer в Compstack
  • Гері Горват - Senior Frontend Developer в TEAM International
  • Денис Мещеряков - Senior JavaScript Developer в SevenPro
  • Льоша Рєпін - Senior Frontend Developer в GoIT
  • Ярослав Косиця - Senior Frontend Developer в GoWeb
Больше информации
Курс
Формат
Online
Начало занятий
21.03.2025
Длительность
3 недель
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
199 UAH за курс
Гибкий графикСопровождение ментора
Okten School
  • Frontend
Подробнее

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

Теми:

  • Вступ до HTML та знайомство з CSS
  • Блочні елементи та способи їх розташування на сторінці
  • Селектори в CSS
  • Події в CSS
  • Flexbox та позиціонування
  • Адаптивна верстка
  • Робота з медіаконтентом та формами
  • Шрифти та іконки
  • Grid css

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

  • Реально необхідна інформація
  • 3 тижнів занять
  • Живі заняття
  • Спілкування з реальними менторами
  • Повторне проходження курсу
  • Постійний доступ до інформації

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

  • Сергій Журавльов - Співзасновник OktenWeb Digital Studio
  • Віктор Кмін - Senior Developer at Honda Motor Co., Ltd.
  • Тарас Якимюк - Senior Developer at Rolique
  • Альона П'яних - Senior React Developer at GridDynamics
  • Роман Жеребецький - Senior Developer at EPAM Systems
  • Святослав Дюганчук - Senior QA at N-ix
  • Костянтин Лопух - Middle Node.js Developer at COAX
  • Максим Феденко - Senior Fullstack Developer at RocketSoft
  • Діана Бондаренко - Senior Frontend Developer
  • Валерія Ліхолєт - HR Specialist at Remofirst
  • Віталій Демчишин - Senior Fullstack Developer at BigBird
  • Мар'ян Стасюк - Senior Automation Engineer
  • Ірина Марусяк - Senior Project Manager at SoftServe
Больше информации
Курс
Формат
Online
Начало занятий
21.03.2025
Длительность
8 месяцев
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
уточняйте
Гибкий графикВыдаётся диплом/сертификатВозможно трудоустройствоСопровождение ментораРеальный проект в портфолио
Okten School
  • Frontend
Подробнее

Навчимо вас HTML/CSS, Git, JavaScript, TypeScript React, Angular, Node.JS, MySQL, MongoDB, Nest.JS, Next.JS, а потім ще і працевлаштуємо.

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

Git + GitHub

  • Загальна інформація
  • Встановлення GIT
  • Налаштування глобальних даних користувача
  • Інтеграція Git з середовищем розробника
  • Створення репозиторію
  • Базові команди GIT
  • Робота в команді за допомоги Git
  • Merge conflict
  • GitHub
  • Конфігурація доступу до репозиторію
  • Pull Request

HTML/CSS

  • Загальна інформація
  • Вступ до HTML та знайомство з CSS
  • Блочні елементи та способи їх розташування на сторінці
  • Селектори в CSS
  • Події в CSS
  • Flexbox та позиціонування
  • Адаптивна верстка
  • Робота з медіаконтентом та формами
  • Figma
  • Шрифти та іконки
  • Grid css

JavaScript

  • Загальна інформація
  • Введення в JavaScript
  • Базові типи даних в JavaScript
  • Базові операції в JavaScript
  • Логічні розгалуження в JavaScript
  • Об'єкти в JavaScript
  • Масиви в JavaScript
  • Цикли в JavaScript
  • Функції в JavaScript
  • Рекурсія та замикання в JavaScript
  • ООП та прототипи в JavaScript
  • Робота з помилками в JavaScript
  • Callback функції в JS
  • ES6 JavaScript features
  • DOM в JavaScript
  • Події в JavaScript
  • BOM в JavaScript
  • Генератори та ітератори в JavaScript
  • Асинхронність в JavaScript та Event loop

TypeScript

  • Загальна інформація
  • Вступ до TypeScript
  • Синтаксис TypeScript
  • Функції та класи TypeScript
  • Інструменти та налаштування
  • Практика з TypeScript
  • Додаткові теми

MongoDB

  • Загальна інформація
  • Вступ до MongoDB
  • Робота з колекціями та документами
  • Мова запитів MongoDB
  • Практика з MongoDB
  • Додаткові теми

MySQL

  • Загальна інформація
  • Вступ до MySQL
  • Створення та керування базами даних
  • Таблиці та поля
  • Запит даних мовою SQL
  • Практика з SQL
  • Додаткові теми

React

  • Загальна інформація
  • Введення в React
  • Створення простих React-додатків
  • Типізація у React
  • Компоненти React
  • Бібліотеки компонентів та CSS
  • Керовані та некеровані компоненти
  • Hooks React
  • Маршрутизація в React
  • Керування даними в React
  • Розробка шарів програми
  • State management. Основи
  • Zustand

Redux Toolkit

  • Загальна інформація
  • Redux toolkit
  • Redux асинхронні перетворювачі
  • Best Practice

Next.JS

  • Загальна інформація
  • Вступ до Next.js
  • Створення Next.js-додатку
  • Управління даними в Next.js
  • Розширені можливості Next.js

Node.JS

  • Загальна інформація
  • Вступ до Node.js
  • Встановлення середовища Node.js
  • Асинхронне програмування з Node.js
  • Файлові системи та робота з файлами
  • HTTP та веб-сервери
  • Сервісні та додаткові прошарки
  • Бази даних з Node.js
  • Додаткові теми Node.js
  • Розгортання Node.js-додатків

Scrum

  • Вступ до Scrum
  • Артефакти Scrum
  • Події Scrum
  • Цінності Scrum
  • Поширені помилки у Scrum

Лекція з HR

  • Пошук вакансій
  • LinkedIn
  • Резюме
  • Інтерв'ю

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

  • Об'єм до 960 годин
  • 6 занять на тиждень
  • Безкоштовне повторне проходження курсу
  • Англійська мова
  • Додатковий курс у подарунок
  • Додаткові консультації
  • Стажування на проєкті
  • Гарантія працевлаштування
  • Вимоги до відвідування

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

  • Сергій Журавльов - Співзасновник OktenWeb Digital Studio
  • Віктор Кмін - Senior Developer at Honda Motor Co., Ltd.
  • Тарас Якимюк - Senior Developer at Rolique
  • Альона П'яних - Senior React Developer at GridDynamics
  • Роман Жеребецький - Senior Developer at EPAM Systems
  • Святослав Дюганчук - Senior QA at N-ix
  • Костянтин Лопух - Middle Node.js Developer at COAX
  • Максим Феденко - Senior Fullstack Developer at RocketSoft
  • Діана Бондаренко - Senior Frontend Developer
  • Валерія Ліхолєт - HR Specialist at Remofirst
  • Віталій Демчишин - Senior Fullstack Developer at BigBird
  • Мар'ян Стасюк - Senior Automation Engineer
  • Ірина Марусяк - Senior Project Manager at SoftServe
Больше информации
Курс
Формат
Online
Начало занятий
Будь-який момент
Длительность
7 месяцев
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
54 740 UAH за курс
Гибкий графикВыдаётся диплом/сертификатВозможно трудоустройствоСопровождение ментораРеальный проект в портфолио
Mate academy
  • Frontend
Подробнее

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

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

Javascript Basics

  • Introduction
  • Your First JavaScript Program
  • Main Concepts
  • Numbers
  • Strings
  • Boolean
  • Functions
  • Conditional Operators
  • Arrays
  • Loops
  • String Iteration
  • String Methods
  • Working With Arrays
  • Get Ready for the Interview

Course Fundamentals

  • Environment Setup
  • How to Learn Effectively

HTML + CSS Basics

  • HTML Basics
  • CSS Basics
  • Colors and Fonts
  • Box Model Basics
  • Semantic Basics
  • Responsiveness Basics
  • CSS Selectors
  • Pseudo-Elements and Pseudo-Classes
  • Specificity
  • Links and URLs
  • Images
  • Media Queries
  • Forms
  • Position
  • Extra topics

Git and Terminal

  • Environment Setup
  • Command Line Basics
  • Git Basics
  • Working With Branches
  • Working With Remote Repo (GitHub)

Javascript Basics Extended

  • Code Style
  • Working With Numbers
  • Loops in Details
  • Working With Strings
  • Functions Revisited
  • Switch
  • Type Conversion
  • Logical Operators
  • Object Basics
  • Extended Extra

HTML + CSS Advanced

  • Environment Setup
  • Figma Installation
  • Flexbox
  • BEM
  • Sass
  • Transformations and Animations
  • Grid
  • Landing [Portfolio Project]
  • Document and Events

Javascript Advanced

  • How to Solve Tasks on Github
  • Object Advanced
  • Methods
  • Array Methods
  • Callbacks
  • Array Iteration Methods Implementatiom
  • Array Iteration Methods Usage
  • Array Iteration Methods Practice
  • Closures
  • JS Practice
  • Prototype
  • Constructors
  • Classes
  • Extra

DOM, Events, Promises

  • DOM Basics
  • DOM Styling and Sizing
  • Events
  • Promises
  • Portfolio Project

React

  • Introduction
  • Props
  • Rendering Lists
  • Handling Events
  • Updating State
  • List Manipulation
  • Lifting State Up
  • Updating State

TypeScript

  • Introduction
  • Basic Types
  • Advanced Types
  • Object Types
  • Classes
  • Extras

React with TypeScript

  • Introduction
  • Froms
  • Advanced Hooks
  • Component Lifecycle
  • State Management
  • Custom Hooks
  • Loading Data From API
  • Updating Data on Server
  • State Management
  • React Router
  • Working With URLSearchParams
  • Portfolio

Redux

  • Redux Main Concepts
  • React Redux
  • Async Redux

How the Web Works

  • Introduction to the web
  • OSI model
  • HTTP
  • Encryption
  • API interface
  • Security in the Web

Team Project

  • Team Project. Intro
  • Jira Environment
  • Status Check
  • Estimates
  • How to Demo Your Work
  • Team Project for Employment
  • Retrospective

Tech Interview

Final Portfolio Review.

Employment 2.0

  • Employment Roadmap
  • Preparing Your Resume
  • Interview Preparation
  • Cover Latter Preparation
  • Google, LinkedIn, DOU, Djinni
  • How to find and apply for vacancies
  • Job Search Tips: Talking to Recruiters
  • Work details FAQ

Vue.js

  • Introduction
  • Templates
  • State Management
  • Forms
  • Computed Values
  • Components
  • Interaction With Page Elements
  • Interaction With the Server
  • Error Handling
  • TodoApp with Vue.js

Angular

Angular Basics.

Algorithms and Data Structures (Old)

  • Main Concepts
  • Algorithm Complexity
  • Data Structures: Array
  • Search Algorithms
  • Data Structures: Linked List
  • Data Structures: Stack
  • Data Structures: Queue
  • Data Structures: Hash Map
  • Data Structures: Hash Set

Algorithms and Data Structure

  • Module Overview
  • Algorithms complexity
  • Arrays
  • Binary search
  • Two pointers
  • Linked lists
  • Stack
  • Queue
  • Trees
  • Binary search tree
  • Priority queue

Object Oriented Programming

  • Basic Principles
  • SOLID Principles

JavaScript Testing

  • Introduction to Javascript Automated Testing
  • Unit Testing
  • TDD Basics
  • Mock Basics
  • Advanced Mocks
  • Cypress

Career Development

  • Mastering Your Probation Period
  • PDP and Career Plans
  • Salary Review Strategies
  • Recruiter Outreach
  • How to Find a New Job?
  • How to Talk About You Previous Work Experience?
  • Career Knowledge Base

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

  • Працюєш? Вчись у власному темпі
  • Зідзвони з менторами тричі на тиждень
  • Чат з одногрупниками
  • Навчальні матеріали "без води" замість довгих лекцій
  • Матимеш 5 робочих проєктів в портфоліо
  • Гарантуємо працевлаштування після навчання
  • Повернемо кошти якщо не знайшов роботу в ІТ

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

  • Misha Hrynko - Fullstack Coach
  • Iryna Pelekh - Student Coordinator
Больше информации
Видеокурс / Платформа
Рекомендуем
Формат
Online
Начало занятий
Будь-який момент
Длительность
10 занятий
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
уточняйте
Гибкий графикРеальный проект в портфолио
Robot Dreams
  • Frontend
Подробнее

Курс, який навчить писати чистий код на JavaScript, працювати з розміткою, блоковою, табличною та модульною версткою, адаптувати екрани під різні формати та самостійно створювати сайти та додатки на JS

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

Знайомство з HTML та структурою веб сторінок

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

Таблиці, списки та форми

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

Вступ до CSS

  • Ознайомитеся зі стилями та навчитеся додавати їх на HTML-сторінку
  • Дослідите відносні та статичні одиниці виміру
  • Навчитеся підключати шрифти
  • Опануєте модульну систему верстки Grid та технологію позиціювання елементів Flexbox
  • Підключите CSS-бібліотеки

Інструменти CSS та робота з хостингом

  • Протестуєте роботу з редактором VS Code
  • Навчитеся працювати із системами контролю версій GitHub, Gitlab, Bitbucket etc, а також із хостингом Github Pages
  • Розмістите свій вебсайт в інтернеті

Верстка та робота з макетами

  • Навчитеся виділяти логічні блоки в макеті
  • Створите змінні для кольорів та шрифтів
  • Ознайомитеся з різними видами верстки та навчитеся адаптувати сторінку під різні пристрої
  • Вивчите властивості різних браузерів та поняття кросбраузерності

Основи JavaScript: структура коду, типи даних та основні оператори

  • Навчитеся підключати JavaScript до вебсторінки різними способами
  • Вивчите змінні, типи даних та перетворення типів
  • Навчитеся працювати з умовними операторами

Основи JavaScript: об'єкти, масиви, цикли та функції

  • Вивчите властивості та методи об'єктів та масивів
  • Навчитеся працювати з колекціями Map та Set, WeakMap, WeakSet
  • Розберетеся в роботі циклів і навчитеся перебирати дані для написання бізнес-логіки програм
  • Вивчите види функцій та зрозумієте, як вони допомагають повторно використовувати код

ООП JavaScript: класи ES5 і ES6

  • Зрозумієте, що таке прототипне успадкування
  • Навчитеся користуватися функціями конструктора
  • Вивчите класи ES6
  • Напишете власні класи

ООП в JavaScript: відмінності від інших мов

  • Навчитеся застосовувати ключове слово this та контекст виклику
  • Вивчите основні відмінності ООП JavaScript від ООП в інших мовах
  • Спробуєте розбити код на незалежні модулі

Запити, обробка подій та введення користувача

  • Навчитеся налаштовувати та надсилати AJAX-запити
  • Навчитеся створювати DOM-елементи та додавати їх на сторінку
  • Напишете правильний запит та отримаєте дані із сервера
  • Навчитеся обробляти події користувача

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

  • JavaScript
  • Frontend
  • Навички
  • Кар'єра
  • Бонус: підписка на WebStorm від JetBrains

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

Владислав Бурденюк - Senior Software Engineer в Allset

Больше информации
Курс
Формат
Online
Начало занятий
16.01.2024
Длительность
41 занятий
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
уточняйте
Вечерние занятияВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
Robot Dreams
  • Frontend
Подробнее

Курс Frontend Developer враховує сучасні потреби ринку та скіли, які підвищують шанс на отримання оферу - від верстання інтерфейсів завдяки HTML/CSS до написання коду на JavaScript та підвищення продуктивності за допомогою ReactJS та Next.js

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

Frontend/HTML/CSS/JS/GIT

  • Розумітимете роль та функції Frontend-розробника
  • Розглянете технології та мови - HTML / CSS / JavaScript
  • Ознайомитеся з інструментами розробки - IDE, DevTools
  • Дізнаєтеся, що таке система контролю версій Git

Вступ. Основи Web-розробки

  • Дізнаєтесь основні принципи роботи веббраузерів
  • Зрозумієте значення кросбраузерності та основні відмінності в інтерпретації ними
  • Розрізнятимете завдання веброзробника, пов'язані з роботою в клієнтській частині вебзастосунків
  • Зрозумієте принцип роботи з системою контролю версій Git
  • Матимете актуальний акаунт на GitHub та створений репозиторій для роботи з курсом

Мова розмітки HTML

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

Основи розробки на JavaScript

  • Вивчите основи JS, навчитеся працювати із function, callbacks, prototype, а також із глобальними об'єктами document, window, navigator
  • Дізнаєтеся, що таке HTML5 API та доступні його різновиди
  • Застосовуватимете кожен із запропонованих API

Робота з CSS

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

Анатомія вебзастосунків. Основи принципів UI/UX

  • Створюватимете макети зі статичною або адаптивною сіткою (layout anatomy)
  • Орієнтуватиметеся в принципах UI/UX-дизайну
  • Проєктуватимете зручну для сприйняття розмітку вебзастосунку (сайту)

Робота з SASS (SCSS) препроцесором

  • Використовуватимете пакетний менеджер yarn для встановлення пакетних залежностей, додаткових бібліотек, модулів
  • Підключатимете SASS-препроцесор до проєкту, використовуватимете змінні, міксини, цикли та інші функціональності SCSS

Вступ до розробки на JavaScript

  • Використовуватимете структуру коду, змінні, типи даних
  • Здійснюватимете логічні порівняння та ухвалюватимете рішення на основі результатів цих порівнянь
  • Виконуватимете операції або обробку даних на основі визначених умов
  • Матимете знання щодо створення функції, а також функцій, які можна призупинити й відновити під час виконання
  • Знатимете, як використовувати обробники подій (event handlers)

Поглиблення в розробку на JavaScript: структури даних

  • Працюватимете з різними типами структур даних, як-от масиви (Array), об'єкти (Object)
  • Створюватимете багаторівневі структури даних, наприклад, масиви об'єктів або об'єкти, що містять інші об'єкти
  • Використовуватимете об'єкти Set, Map та Object для збереження та обробки даних
  • Зможете маніпулювати з масивами, використовуючи методи, як-от push, pop, shift, unshift, splice
  • Використовуватимете об'єкт Reflect для виконання різних операцій: створення нових об'єктів, виклик методів, отримання та встановлення властивостей тощо

Поглиблення в розробку на JavaScript: робота з мережею

  • Розроблятимете базове RESTful API, використовуючи різні HTTP-методи, як-от GET, POST, PUT, DELETE
  • Орієнтуватиметесь, які URL-шаблони використовують для маршрутизації запитів
  • Використовуватимете Fetch API для відправлення HTTP-запитів з клієнтської сторони вебзастосунку
  • Працюватимете з Promise для управління асинхронним кодом
  • Використовуватимете async-await для зручного написання асинхронного коду
  • Налагоджуватимете мережеві запити за допомогою DevTools

ООП-програмування

  • Зрозумієте основні концепції ООП - класи, об'єкти, спадкування, поліморфізм, інкапсуляція
  • Навчитеся використовувати кожну концепцію на практиці

Патерни проєктування

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

Принципи програмування

  • Ознайомитеся з принципами програмування
  • Матимете достатньо знань, щоб писати чистий та зрозуміли код
  • Знатимете, як не допустити повторень у своєму коді, аби зекономити час та ресурси на розробку

Методи генерації вебсторінок

  • Вивчите типи вебрендерингу та навчитеся їх розрізняти
  • Навчитеся вибирати тип рендерингу залежно від ситуації

Розробка на ReactJS

  • Ознайомитеся зі структурою React-застосунку та його основними компонентами
  • Працюватимете з JSX (розширення синтаксису JavaScript) для опису інтерфейсу користувача

Поглиблення в розробку на ReactJS

  • Розумітимете роботу із хуками, чітко розрізнятимете їхні типи за призначенням
  • Набуде навичок у створенні Custom Hooks
  • Вмітимете працювати з React Router

Розробка на ReactJS. Знайомство з бібліотекою Redux

  • Розберетеся в глобальному та локальному контексті в ReactJS
  • Розглянете бібліотеку Redux для керування станом додатка

UI/UX frameworks

Отримаєте знання з Bootstrap та Tailwind CSS, щоб використовувати їх у розробці вебінтерфейсів.

Розробка на JavaScript: створення вебзастосунку

  • Матимете практичні навички та рекомендації щодо розробки SPA-застосунку на рівні реального вебзастосунку з використанням ReactJS
  • Застосовуватимете SCSS та фреймворк Tailwind (або Bootstrap)
  • Використовуватимете CSR (Client-Side Rendering)
  • Розробите повноцінний single-page application із керуванням стану та використанням CSS Framework

JavaScript Server-Side. Знайомство з фреймворком Next.js

  • Розумітимете принципи серверного рендерингу та можливостей Next.js для побудови універсальних вебзастосунків
  • Відрізнятимете особливості Data Fetching: getServerSideProps, getStaticProps, getStaticPaths. Знатимете, для чого і коли використовувати кожен з них
  • Знатимете роутинг Next.js
  • Описуватимете внутрішнє API для повернення JSON-даних із сервера
  • Матимете навички в оптимізованому використанні картинок на рівні SSR із Next.js
  • Працюватимете із Lazy Loading, кешуванням

JavaScript Server-Side. Практика Next.js

  • Працюватимете з розробкою server-side application з використанням Next.js
  • Підключатимете фреймворки для стилізації типу Tailwind, а також проводитимете налаштування кастомних тем
  • Розберетесь із роботою маршрутизатора на практиці та роботою кешування на рівні фреймворку
  • Матимете практичні навички використання SSR, CSR

Vercel. Публікація готового проєкту

  • Створюватимете git-репозиторію з підключенням до системи деплойменту
  • Налаштовуватимете деплоймент репозиторію із вебзастосунком на рівні Vercel
  • Матимете навички застосування змін через Pull Request у GitHub

Підбивання підсумків. Поширені запитання на технічній співбесіді

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

  • Топовий інструментарій розробки
  • Оформлення та розширення портфоліо
  • HR-консультація

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

Андрій Римарук - Senior JavaScript Frontend Developer at Welltech

Больше информации
Курс
Формат
Online
Начало занятий
14.05.2025
Длительность
20 часов
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
4 235 UAH за курс
Вечерние занятияВыдаётся диплом/сертификатСопровождение ментора
QALight
  • Frontend
Подробнее

Базовий курс для тих, хто хоче навчитись створювати універсальні ресурси, що працюють в мережі Інтернет. На заняттях ви опануєте практичні навички роботи із сучасними версіями 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
Начало занятий
28.04.2025
Длительность
2 месяцев
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
10 000 UAH за курс
Гибкий графикВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
Source IT
  • Frontend
Подробнее

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

Модуль 1 - Основи верстки сайтів

  • Введення у веб-розробку
  • Основи роботи з графічним редактором Figma
  • Введення в HTML, теги, атрибути, елементи
  • Робота з об'єктами Form
  • Введення в CSS - властивості, правила, успадкування, каскадування, нормалізація та скидання стилів
  • CSS стилі, робота зі стилями
  • CSS потоки, позиціонування та розташування об'єктів по сітці
  • Псевдокласи, псевдоелементи
  • CSS3 та робота з анімацією
  • FlexBox
  • Робота зі шрифтами

Модуль 2 - Оптимізація верстки сайтів та знайомство з Frontend

  • Адаптивна та чуйна верстка, основні правила створення адаптивного сайту
  • Медіа-запроси
  • Препроцесор - SASS/SCSS, знайомство з LESS
  • Введення у jQuery
  • Підключення, кастомізація та комплексна робота з плагінами
  • Tabs, Slider
  • Основи JavaScript - змінні, функції, робота з елементами

Результати після проходження курсу:

  • Впевнені знання mark-up та можливість продовжувати навчання у напрямку програмування (JavaScript, PHP, Java)
  • Вміння самостійно створювати красиві та зручні сайти для Web та Mobile
  • Власний готовий проєкт та приклади робіт, які можна показати на співбесіді
  • Найкращі студенти отримають рекомендації для працевлаштування в IT компанії

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

  • Є можливість оплатити курс частинами
  • Наприкінці курсу надається сертифікат
  • Курс збудований з урахуванням реальних вимог IT компаній
  • Протягом всього курсу ведеться рейтинг успішності
  • Бонусне заняття зі стратегії працевлаштування
Больше информации
Курс
Формат
Online
Начало занятий
28.04.2025
Длительность
5 месяцев
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
22 000 UAH за курс
Вечерние занятияВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
Source IT
  • Frontend
Подробнее

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

Основи верстки сайтів

  • Введення у веб розробку
  • Основи роботи з графічним редактором Figma
  • Введення HTML, теги, отрибути, елементи
  • Робота з об'єктами Form
  • Вступ до CSS - властивості, правила, успадкування, каскадування, нормалізація та скидання стилів
  • CSS стилі, робота зі стилями
  • CSS потоки, позиціонування та розташування об'єктів по сітці
  • Псевдокласи, псевдоелементи
  • CSS3 та робота з анімацією
  • FlexBox
  • Робота зі шрифтами

Оптимізація верстки та знайомство з Frontend

  • Адаптивна та чуйна верстка, основні правила створення адаптивного сайту
  • Media-запити
  • Препроцесор - SASS/SCSS, знайомство з LESS
  • Вступ до jQuery
  • Підключення, кастомізація та комплексна робота з плагінами
  • Tabs, Slider

Основи JavaScript

  • Редактори коду
  • Спосіб підключення до HTML
  • Суворий режим - "use strict"
  • Змінні
  • Типи даних
  • Взаємодія: alert, prompt, confirm
  • Базові операції
  • Пріоритет операцій
  • Оператори порівняння
  • Як працюють логічні оператори
  • Умовні оператори
  • Тернарні оператори
  • Оператор Switch Case
  • Цикли
  • Функції
  • Рядки
  • Числа
  • Масиви. Об'єкти

VCS Git

  • Встановлення та конфігурація Git
  • Базова робота з Git (git add, git commit)
  • Скасування змін у Git (git reset)
  • Розгалуження Git (checkout)
  • Робота з віддаленим репозиторієм
  • Налаштування SSH

Робота з DOM

  • Що таке DOM
  • Доступ до елементів
  • Вміст елементів
  • Атрибути
  • Класи
  • Додавання подій
  • Сплив і занурення
  • Об'єкт події
  • Делегування подій

Об'єкти та функції

  • Об'єкти та прототипи
  • Як працюють прототипи
  • Створення та налаштування об'єктів
  • Ітерація ключів об'єкту
  • Як працюють замикання
  • Що таке контекст
  • Прив'язка контексту
  • Рекурсія

Додаткові можливості JavaScript

  • Обробка помилок
  • Ajax
  • Promise, async/await
  • Генератори, просунута ітерація
  • Модулі
  • Fetch API
  • Event Loop

Фреймворки

  • Огляд React/Vue/Angular
  • Базове застосування
  • Проєкт
  • Підготовка до співбесіди. Іспит

Результат після проходження курсу

  • Впевнені знання з теорії HTML, CSS, SCSS, JS
  • Чітке розуміння життєвого циклу розробки веб-продукту
  • Розуміння кроссбраузерної, адаптивної верстки та семантичної html-розмітки
  • Навички роботи з jQuery
  • Знання алгоритмів, структур даних та загальних принципів організації коду
  • Розуміння принципів ООП
  • Досвід самостійної розробки програм JavaScript
  • Практичні навички роботи з Git
  • Навички роботи з одним із фреймворків (React/Vue/Angular)

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

  • Можливість оплати курсу частинами
  • Сертифікат після проходження курсу
  • Курс збудований з урахуванням реальних вимог IT компаній
  • Протягом усього курсу ведеться рейтинг успішності
  • Додаткове заняття зі стратегії працевлаштування
Больше информации
Курс
Формат
Online
Начало занятий
12.05.2025
Длительность
20 часов
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
5 440 UAH за курс
Вечерние занятияВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
CyberBionic Systematics
  • Frontend
Подробнее

Курс 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
Начало занятий
01.05.2025
Длительность
12 месяцев
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
49 580 UAH за курс
Вечерние занятияВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
IT STEP Academy
  • Frontend
Подробнее

Ви почнете з основ верстки 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 пари
  • Структурована подача знань
  • Підтримка викладачем
  • Готовий проєкт для портфоліо
  • Підготовка до працевлаштування
Больше информации
Курс
Формат
Online
Начало занятий
05.05.2025
Длительность
20 занятий
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
11 200 UAH за курс
Вечерние занятияВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
Hillel IT school
  • Frontend
Подробнее

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

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

Вступ. Установка необхідного ПЗ

  • Знайомство та план курсу
  • Типи файлів
  • Браузер
  • Мови програмування
  • Редактори коду.

Знайомство з HTML

  • Структура HTML-документу
  • Теги, атрибути тегів
  • Розмітка тексту за допомогою HTML
  • Посилання
  • Списки
  • Таблиці
  • Зображення. формати зображень
  • Форми
  • Медіа (video, audio). Iframe
  • Теги-орієнтири (header, main, aside, nav, section, article).

Git. Github

  • Знайомство з Git. Github.

Знайомство з CSS

  • Каскадність. Спадкування
  • Підключення CSS
  • Рідні стилі. Normalize.css Reset.css
  • Селектори
  • Стилізація тексту
  • Шрифти
  • Блокова модель
  • Float. Float layout. Clearfix
  • Position
  • Псевдокласи. Псевдоелементи.

Advanced CSS

  • Flexbox. Flexbox layout
  • CSS Grid. Grid layout
  • CSS препроцесори
  • CSS фреймворки
  • CSS методології.

Просунута робота з графікою

  • SVG
  • SVG спрайти
  • Іконочні шрифти
  • Адаптивна графіка. Тег picture
  • Оптимізація графіки.

Адаптивна верстка

  • Viewport. @media
  • Одиниці вимірювання vh, vw, vmin, vmax, rem
  • Знайомство з концепцією Responsive Web Design
  • Mobile-first/Desktop-first
  • Оптимізація сторінки.

Семантика і доступність

  • Семантична розмітка
  • Доступність для користувача інтерфейсів.

CSS анімації

  • Transform
  • Transition
  • Filter
  • Animation.

Виконання дипломного проєкту.

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

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

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

  • Владислав Лещенко - React Developer at N-iX
  • Дмитро Крулькевич - Software Engineer at Continuumua
  • Іван Самойлов - Senior Front-end Developer at Klever
  • Владислав Повелиця - Front-end Developer at SOLAR Digital
  • Роман Яремій - Full-Stack Developer at N-iX
  • Володимир Шайтан - Technical Lead at Zoot
  • Павло Зубак - Front-end Developer at Halo Lab
  • Артем Рижов -  Senior Front-end Team Lead at Limitless
  • Максим Гричина - Front-end Developer at AN.WORKS
  • Любомир Горбатюк - Front-end Developer at Smile Ukraine
  • Михайло Корольков - Front-end Developer at MZ Group
  • Владислав Єрмолаєв - Front-end Developer at InStandart
  • Олександр Щербачов - Front-end Developer at Covent IT
  • Андрій Кривцов - Senior JavaScript Developer at Oracle
  • Богдан Продан - Front-end Developer at Artkai
  • Валерій Хомченко - Front-end Developer at SOLAR Digital
  • Олександр Фурманов - Front-end Developer
  • Юлія Остапенко - Front-end Developer
Больше информации
Курс
Формат
Online
Начало занятий
21.04.2025
Длительность
9 месяцев
Уровень
Для детей
Язык обучения
Ukrainian
Стоимость
уточняйте
Гибкий графикВыдаётся диплом/сертификатСопровождение ментора
DAN IT Education
  • Frontend
Подробнее

На завершення курсу кожен студент розробить повноцінний проєкт, який буде захищений. Це дозволить набути досвіду у формуванні власного проєктного погляду та аргументуванні думок. Ця навичка допоможе дитині просувати власні ідеї у сфері 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
Начало занятий
24.04.2025
Длительность
38 занятий
Уровень
Для опытных
Язык обучения
Ukrainian
Стоимость
19 000 UAH за курс
Гибкий графикВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
Hillel IT school
  • JavaScript
  • Frontend
Подробнее

Після проходження курсу випускники здобудуть навички для застосування JavaScript на достатньому рівні, щоб писати скрипти та форми, навчаться працювати з AJAX, а також налаштовувати збірку проєкту. Успішне завершення курсу дозволяє претендувати на вакансії Junior Front-End Developer.

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

Знайомство з JS

  • Знайомство та план курсу
  • Введення в технологію веб-розробки
  • Підключення скриптів, перший запуск програми
  • Взаємодія з користувачем через примітивні функції
  • Git, Github

Змінні та оператори

  • Коментарі
  • Оголошення змінних
  • Сплив змінних
  • Порівняння var, let, const
  • Типи даних
  • Оператори

Умовні конструкції

  • Умовна конструкція if/else
  • Умовна конструкція switch
  • Тернарний оператор
  • Практика

Цикли

  • Введення в цикли
  • Види циклів
  • Цикл while
  • Цикл do…while
  • Цикл for
  • Інструкції break та continue
  • Вкладені цикли
  • Нескінчені цикли
  • Практика

Масиви

  • Основи роботи з масивами
  • Варіанти створення масивів
  • Методи для роботи з масивами
  • Перебір масивів за допомогою циклів for, for…in, for…of
  • Видалення елементів з масиву
  • Створення простих об’єктів
  • Практика

Основи функцій

  • Основи роботи з функціями
  • Варіанти створення функцій
  • Параметри функцій, значення за замовчуванням
  • Область видимості функції
  • Передача параметрів у функцію за значенням та за посиланням
  • Повернення значення з функції
  • Замикання
  • Лексична область видимості
  • Рекурсія

Контекст виконання функції

  • Глобальний об'єкт window
  • Функціональний контекст
  • Функції в об'єктах - методи
  • Методи підміни контексту
  • Стрілочні функції та їх відмінності від звичайних

Функції

  • Функція-коллбек
  • Функція вищого порядку
  • Перебір масивів за допомогою методів forEach, find, map, filter, reduce

DOM

  • Що таке DOM?
  • Отримання існуючих DOM-елементів
  • Динамічне створення та видалення нових DOM-елементів
  • Керування атрибутами та вмістом DOM-елементів
  • Можливі події
  • Додавання обробників подій DOM-елементів

Events

  • Фази обробки подій
  • Делегування подій
  • Об'єкт event та його методи
  • BOM-об'єкти

Робота з формами

  • Основні елементи-керування
  • Базові навички динамічної роботи з елементами керування
  • Валідація отриманих даних від користувача

WebStorages

  • Cookies
  • LocalStorage
  • SessionStorage
  • Практика

Практика та Livecoding

Регулярні вирази

  • Створення регулярного вираза
  • Робота з регулярними виразами за допомогою методів
  • Модифікатори регулярних виразів
  • Структура шаблонів. Метасимволи. Дужки. Квантифікатори

Бібліотеки та фреймворки

  • Огляд популярних бібліотек та фреймворків
  • Встановлення бібліотек за допомогою NPM
  • Приклади роботи з розповсюдженими бібліотеками

Асинхронне виконання коду

  • EventLoop
  • Функції відкладеного виконання коду

ESNext

  • EcmaScript
  • Babel
  • Spread & Rest оператори
  • Деструктуризація масивів та об’єктів
  • Оператор Nullish coalescing
  • Оператор Optional chaining
  • Інші найновіші оператори

HTTP

  • Огляд клієнт-серверної архітектури
  • Що таке протокол HTTP та як він працює
  • Огляд технології Ajax
  • Методи роботи з сервером по технології Ajax
  • Приклади відкритих API
  • Технологія WebSockets

Promise

  • Вступ до Promise
  • Стан Promise
  • Обробка Promise за допомогою методів then, catch, finally
  • Одночасна обробка кількох Promise
  • Livecoding

ООП

  • Основні поняття ООП
  • Фунції-конструктори
  • Прототипне успадкування
  • Створення об'єкту з певним прототипом
  • Створення сутностей за допомогою class
  • Успадкування сутностей створених через class
  • Приватні властивості
  • Статичні властивості за методи class
  • Практика

Робота з асинхронними функціями

  • Створення власних асинхронних функцій
  • Обробка асинхронних функцій з інструкцією await
  • Обробка помилок

Системи збирання коду

  • Огляд сучасних систем збирання коду
  • Основи роботи з Gulp
  • Компіляція та зборка sass-файлів
  • Транспіляція та зборка js-файлів
  • Плагін ESLint

Webpack

  • Огляд можливостей Webpack
  • Встановлення та конфігурація Webpack
  • Налаштування базових лоадерів та плагінів до Webpack
  • Запуск локального серверу за допомогою Webpack

Node.js

  • Огляд технології Node.js
  • Створення сервера на Node.js
  • Приклад створення сервера за допомогою бібліотеки express на Node.js
  • Приклад роботи власного фронтенд та бекенд додатків
  • Огляд програми Postman

React

  • Огляд поняття SPA
  • Введення в React
  • Основні концепції React
  • Створення первого React-додатку
  • Основи роботи з JSX
  • Варіанти створення компонентів
  • Передача props до компонентів
  • Обробка подій у React-компонентах

Компоненти React

  • Етапи життєвого циклу компонентів
  • Порівняння класових та функціональних компонентів
  • Робота з класовим компонентом
  • Методи життєвого циклу класового компоненту
  • Робота зі state

Функціональні компоненти в React

  • Основи роботи з функціональним компонентом
  • Особливості роботи з хуками: useState, useEffect, useRef, useCallback, useMemo, useContext
  • Створення власних хуків

Робота з формами в React

  • Робота з основними елементами керування форми

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

  • Основи роботи з бібліотекою react-router-dom

Бібліотеки для роботи з React-компонентами

  • Огляд бібліотек-компонентів AntD/Material UI
  • Робота з стилями у React за допомогою CSS-модулів та бібліотеки styled-components
  • Огляд бібліотеки для створення таблиць даних Ag Grid

Redux

  • Що таке state management?
  • Вступ до Redux та основні поняття
  • Основні етапи data flow у Redux
  • Інтеграція Redux з React-додатком
  • Робота з хуками useDispatch та useSelector
  • Middlewares на прикладі redux-thunk
  • Livecoding

Redux-Toolkit

  • Оптимізація роботи з Redux за допомогою Redux-Toolkit
  • Основні поняття Redux-Toolkit
  • Створення та використання RTK Query

TypeScript

  • Вступ до TypeScript – переваги та недоліки
  • Статична типізація у TypeScript
  • Типи та інтерфейси
  • Аліаси, можливі значення, необов’язкові параметри
  • Generics
  • Робота з TypeScript в React-додатку

Тестування React-додатків

  • Основні поняття тестування програмного забезпечення
  • Модульне тестування за допомогою бібліотеки Jest
  • Тестування React-додатків за допомогою бібліотеки React-Testing-Library

Екзамен

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

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

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

  • Володимир Кривошапов - Senior JavaScript Developer at Playtika
  • Денис Решетняк - Senior Front-end Developer at WorkBuzz
  • Олексій Павленко - Senior Full-stack Developer at Sitecraft
  • Соломія Браташ - JavaScript Developer at EPAM
  • Владислав Проценко - Chief Technology Officer at Profair Games
  • Володимир Шайтан - Senior Full Stack Developer at UKEESS Software House
  • Олексій Толстоног - Software Developer at SoftServe
  • Володимир Шкарупін - Senior Developer at Archer
  • Василь Петров - Senior Front-end Engineer at Pin-up.tech
  • Дмитро Крулькевич - Software Engineer at Continuumua
  • Валерій Хомченко - Front-end Developer at SOLAR Digital
  • Денис Лебеденко - Front-end Developer at Reply
  • Олексій Дом'янич - Senior Software Engineer at UKEESS Software House
  • Андрій Черненко - Front-end Developer at Wargaming
  • Валерій Тернавський - Software Developer at Sense Bank
  • Сергій Савчук - Full Stack Developer at Copgemini Engineering
  • Любомир Рудько - Senior Software Engineer at N-IX
  • Ігор Михайличенко - Software Engineer at BonApp
  • Роман Таран - Senior Front-end Engineer at EPAM
  • Катерина Шиповська - Senior JavaScript Engineer, Software Architect at Boosta
  • Роман Яремій - Full-stack Developer at NIX
  • Максим Бєлкін - DM & JS Team Lead at Capgemini Engineering
  • Дмитро Прокудін - JavaScript Software Engineer at Capgemini Engineering
  • Антон Головін - Front-end Team Lead at ForForce
  • Владислав Продан - Middle Front-end Developer at Eleks
  • Андрій Посітко - Front-end Engineer at CHI Software
  • Віталій Пархоменко - Front-end Developer at Capgemini Engineering
  • Арсеній Деркач - Senior React.js Software Engineer
  • Сергій Котерняк - Software Engineer
  • Влад Балабаш - Solution Architect, Senior JavaScript Developer
  • Олександр Фурманов - Front-end Developer
  • Марія Манойло - Teacher at Hillel IT School
Больше информации
Курс
Формат
Online
Начало занятий
21.04.2025
Длительность
12 занятий
Уровень
Для опытных
Язык обучения
Ukrainian
Стоимость
10 400 UAH за курс
Гибкий графикВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
Hillel IT school
  • React
  • Frontend
Подробнее

Курс, присвячений бібліотеці 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
Начало занятий
12.05.2025
Длительность
22 недель
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
20 415 UAH за курс
Гибкий графикВыдаётся диплом/сертификатВозможно трудоустройствоСопровождение ментораРеальный проект в портфолио
Itvdn
  • Frontend
Подробнее

На курсі Front-end ти опануєш сучасні технології веброзробки. Під час навчання зможеш обрати один із напрямків для подальшого розвитку: працювати з React.js, або ж Typescript та Angular.

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

HTML та CSS Стартовий

  • Введення в HTML. Типи елементів та атрибути
  • Введення в CSS та визначення розмірів блоків
  • Робота з відступами, властивість margin та робота з текстом і видимістю елементів
  • Верстання з використанням Flexbox
  • Комбінування селекторів та робота з фоном, властивість background
  • Семантичне верстання
  • Форми
  • Позиціювання елементів
  • Практика

JavaScript Стартовий

  • Введення в JavaScript. Змінні та типи даних
  • Рядки та оператори
  • Логічні структури
  • Масиви та цикли
  • Функції
  • Об'єкти
  • Практика

GIT - Основи роботи

  • Основи Git
  • Публікація репозиторію
  • Інтеграція з IDE

JavaScript Базовий

  • Пошук елементів і DOM дерево
  • Зміна DOM дерева. CSS стилі
  • Події. Частина 1
  • Події. Частина 2
  • Події. Частина 3
  • Функції конструктори
  • Класи
  • Класи. Наслідування
  • Контекст функції
  • Замикання
  • Форми та елементи управління
  • Перевірка даних форми
  • Cookies та Web Storage
  • Обробка винятків
  • Асинхронний код. Promise
  • Мережеві запити
  • Практика

HTML5 & CSS3 Поглиблений

  • Принципи побудови Grid розмітки, Шаблони сайтів
  • Мікродані та користувацькі дані
  • WebWorker. Audio, Video
  • Робота з графікою на стороні клієнта
  • Canvas
  • Анімації та градієнти
  • Sass основи
  • Практика

Практичний курс "7 кроків для успішної кар'єри в ІТ"

  • Знайомство з Кар'єрним сервісом у CyberBionic Systematics
  • Сайти пошуку роботи. Різниця, специфіка, рейтинг
  • Аналіз ринку праці для IT-фахівців
  • Реєстрація на сайтах для пошуку роботи та заповнення власних профілів
  • Створення резюме (CV)
  • Створення супровідного листа (Cover Letter)
  • Спілкування з рекрутерами
  • Підготовка до співбесіди з HR
  • Підготовка до технічної співбесіди
  • Як отримати офер і пройти випробувальний термін

Далі ви можете вибрати один з напрямків курсу:

TypeScript

  • Вступ. Змінні та функції
  • Класи та інтерфейси
  • Generics
  • Модулі та простори імен
  • Практика

Angular

  • Введення в Angular
  • Події та датабайдинг
  • Директиви, пайпи. Роль модулів Angular
  • Компоненти та їх робота
  • Основи роботи сервісів та їх роль у застосунку
  • Введення в HttpClient та RxJS
  • Форми в Ангуляр
  • Маршрутизація
  • Практичне заняття

React базовий

  • Введення в React
  • JSX у React
  • Основи React
  • Стан та життєвий цикл
  • Форми
  • Стилізація в React
  • Створення списку нотаток
  • Введення в роутинг
  • Створення сторінки помилки
  • Створення Модального вікна
  • Hooks
  • Оптимізація та продуктивність React застосунків
  • Практика

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

  • Ранкова (09:00 - 11:00) та вечірня (19:00 - 21:00) групи
  • 4 курсові проєкти
  • Пакет навчальних матеріалів з усіх уроків
  • Сертифікат про закінчення курсу (після захисту фінального проєкту та тестування)
  • Індивідуальні рекомендації тренера.

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

  • Денис Ковтун - Web Frontend Developer, Сертифікований тренер Microsoft
  • Тарас Заславський - FrontEnd Developer
  • Ростислав Силівейстр - WEB Frontend Developer
  • Віталій Мазяр - Web Frontend Developer, Сертифікований тренер Microsoft
  • Ілля Стародуб - Angular Developer - Creative Digital Agency Krokus, Microsoft Certified Specialist
  • Володимир Виноградов - Full Stack Developer, Microsoft Certified Specialist
  • Владислав Бєлік - React FrontEnd Developer, тренер-консультант за напрямком FrontEnd
Больше информации
Курс
Формат
Online
Начало занятий
12.05.2025
Длительность
5 месяцев
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
20 415 UAH за курс
Гибкий графикВыдаётся диплом/сертификатВозможно трудоустройствоСопровождение ментораРеальный проект в портфолио
CyberBionic Systematics
  • Frontend
Подробнее

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

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

HTML5, CSS3 для початківців

  • Введення у HTML. Типи елементів та атрибути
  • Введення в CSS та визначення розмірів блоків
  • Робота з відступами, властивість margin, робота з текстом та видимістю елементів
  • Верстка з використанням Flexbox
  • Комбінування селекторів та робота з фоном, властивість background
  • Семантична верстка
  • Форми
  • Позиціювання елементів
  • Практика
  • Практика

JavaScript стартовий

  • Введення до JavaScript. Змінні та типи даних
  • Строки та оператори
  • Логічні структури
  • Масиви та цикли
  • Функції
  • Об'єкти
  • Практика

Основи Git

  • Основи Git
  • Публікація репозиторію
  • Інтеграція з IDE

JavaScript базовий

  • Пошук елементів та DOM дерево
  • Зміна DOM дерева. CSS стилі
  • Події. Частина 1
  • Події. Частина 2
  • Події. Частина 3
  • Функції конструктори
  • Клами
  • Класи. Наслідування
  • Контекст функції
  • Замикання
  • Форми і елементи управління
  • Перевірка даних форми
  • Cookies i Web Storage
  • Обробка виключень
  • Асинхронний код. Promise
  • Мережеві запити
  • Практичне заняття
  • Практичне заняття

HTML5 та CSS3 Advanced

  • Принципи побудови розмітки. Flex, Grid, Шаблони сайтів
  • Мікродані і користувацькі дані
  • WebWorker. Audio, Video
  • Робота з графікою на стороні клієнта
  • Canvas
  • Анімація та градієнти
  • Sass основи
  • Практика
  • Практика

Практичний курс "7 кроків для успішної кар'єри в ІТ"

  • Знайомство з Кар’єрним сервісом у CyberBionic Systematics
  • Сайти пошуку роботи. Різниця, специфіка, рейтинг
  • Аналіз ринку праці для IT-фахівців
  • Реєстрація на сайтах для пошуку роботи та заповнення власних профілів
  • Створення резюме (CV)
  • Створення супровідного листа (Cover Letter)
  • Спілкування з рекрутерами
  • Підготовка до співбесіди з HR
  • Підготовка до технічної співбесіди
  • Як отримати офер і пройти випробувальний термін

Далі ви можете обрати один із двох шляхів

React Essential (Шлях 1)

  • Вступ до React
  • JSX у React
  • Основи React
  • Стан та життєвий цикл
  • Форми
  • Стилізація у React
  • Створення списку заміток
  • Hooks
  • Введення в роутинг
  • Створення сторінки помилки
  • Створення Модального вікна
  • Оптимізація та продуктивність React додатків
  • Практика. Реалізація інтерфейсу
  • Практика. Створення моделей даних
  • Практика. Захист курсового проєкту

TypeScript Fundamentals (Шлях 2)

  • Введення. Змінні та функції
  • Класи і інтерфейси
  • Generics
  • Модулі і простору імен
  • Практика

Angular (Шлях 3)

  • Введення до Angular
  • Події та датабайдинг
  • Директиви, пайпи. Роль модулів Angular
  • Компоненти та їх робота
  • Основи роботи сервісів та їх роль у додатку
  • Введення у HttpClient та RxJS
  • Форми в Ангуляр
  • Маршрутизація
  • Практичне заняття. Підготовка до роботи проєкту
  • Практичне заняття. Створення окремих сторінок динамічною маршрутизацію
  • Практичне заняття. Додавання форми з валідацією

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

  • Безкоштовні ключі на софт від Jetbrains
  • Добірка відео курсів від ITVDN у подарунок
  • Доступ до саписів уроків
  • HR-підтримка під час та після навчання
  • Перевірка ДЗ, ідбек
  • Спілкування та підтримка
  • Тестування і сертифікати
  • Курсові проєкти
  • Практикуми з ІТ експертами
  • Курс Business English
  • Курс IT English

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

  • Олександр Гончаренко - Web Frontend Developer
  • Віталій Мазяр - Web Frontend Developer
  • Олексій Татаренков - Frontend Developer
Больше информации
Курс
Формат
Online
Начало занятий
27.05.2025
Длительность
4 месяцев
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
18 200 UAH за курс
Гибкий графикВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
Lemon School
  • Frontend
Подробнее

Від 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
Начало занятий
06.05.2025
Длительность
24 часов
Уровень
Для опытных
Язык обучения
Ukrainian
Стоимость
24 000 UAH за курс
Гибкий графикВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
Мир Современного Образования
  • Angular
  • Frontend
Подробнее

Студенти на курсі будуть вивчати не тільки внутрішні механізми, а й навколишню екосистему, невід'ємну при повноцінної розробки вебдодатків. Слухачі дізнаються, як інтегрувати CI/CD-процеси, як створювати білди, як взаємодіяти з іншими модулями і як будувати легко підтримувані додатки на базі Angular 15.

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

Поглиблена робота з RxJS

  • Що вирішує RxJS?
  • Observables: глибоке розуміння та застосування
  • Управління потоками даних (switchMap, mergeMap, concatMap, exhaustMap)
  • Subject, BehaviorSubject, ReplaySubject
  • Використання операторів для трансформації потоків
  • Signal API як альтернатива традиційній реактивності

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

  • Вкладені маршрути та їхня взаємодія
  • Захист маршрутів (Guards, Resolvers, Interceptors)
  • Оптимізація завантаження модулів
  • Динамічні маршрути та параметри

Управління станом додатка (State Management)

  • Чим відрізняються підходи: Signals, Redux, NgRx, Akita, MobX?
  • NgRx: Store, Actions, Effects, Selectors
  • Використання Signal API для керування станом
  • Структурування сховища даних
  • Взаємодія з API через ефекти

Авторизація та вутентифікація

  • Методи авторизації: OAuth2, JWT, OpenID Connect
  • Angular + Node.js + Express.js для безпеки додатка
  • Використання Firebase Authentication
  • Захист маршрутів та доступ до ресурсів

SSR та SSG

  • Angular Universal: що це і навіщо?
  • Використання ngExpressEngine
  • Оптимізація продуктивності через SSR
  • Генерація статичних сторінок (SSG)
  • Використання ISR (Incremental Static Regeneration)

Мікрофронтенд-архітектура

  • Що таке Micro Frontends і коли їх варто використовувати?
  • Webpack Module Federation
  • Інтеграція Angular у гібридні рішення

Тестування та оптимізація додатка

  • Unit-тестування з Jasmine та Karma
  • End-to-end тестування з Cypress
  • Оптимізація продуктивності (Change Detection, OnPush, TrackBy)
  • Lighthouse-аналіз та покращення швидкодії

Деплой та CI/CD

  • Платформи деплою: Vercel, Firebase, Hostiq, GitHub Actions
  • Створення автоматичних пайплайнів у CI/CD
  • Налаштування Docker-контейнерів для Angular
  • Використання серверless-функцій для бекенду

Як залишатись в курсі оновлень Angular

  • Де шукати актуальну інформацію про оновлення?
  • Огляд офіційної документації та найкращих ресурсів
  • Як самостійно навчатися новим можливостям Angular

Мінімальні вимоги

  • Впевнене володіння Angular та JavaScript
  • Досвід роботи з HTTP-запитами та сервісами
  • Розуміння принципів реактивного програмування
  • Базове знання Node.js та Express.js

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

  • Створювати, підтримувати і деплоїти додаток на базі Angular
  • Інтегрувати систему OAuth
  • Розуміти різницю між підходами до менеджменту даних
  • Створювати повноцінні портовані модулі Angular-екосистеми

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

  • Допомога ментора
  • Практика
  • Сертифікат про проходження курсу
Больше информации
Курс
Формат
Online
Начало занятий
Дата формується
Длительность
21 часов
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
21 000 UAH за курс
Гибкий графикВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
Мир Современного Образования
  • Angular
  • Frontend
Подробнее

Студенти ознайомлюються з оновленим фреймворком Angular 15, дізнаються про основні його переваги, можливості, компоненти та інше. Слухачі навчаться користуватись формами та HTTP-протоколом, попрактикуються в роботі з TypeScript та вивчать усю функціональність фреймворку, необхідну для створення односторінкових SPA-додатків.

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

Вступ в Angular

  • Знайомство з фреймворком
  • Основні переваги
  • Унікальні можливості
  • Знайомство та робота з TypeScript
  • Основи модульної архітектури

Створення першого додатка та структура фреймворку

  • Запуск першого проєкту
  • Робота з CLI
  • Організація коду в Angular-додатку
  • Standalone Components vs NgModules
  • Підключення змінних та функцій

Основи роботи з DOM в Angular

  • Компоненти та їх структура
  • Директиви (структурні та атрибутивні)
  • Pipes (вбудовані та кастомні)
  • Шаблонізація та робота з подіями
  • Вступ до Angular Elements

Робота з даними та реактивністю

  • Прив'язка даних (Data Binding)
  • Декоратори та сервіси
  • Взаємодія між компонентами
  • Сигнали (Signal API) та Observables
  • Використання HttpClient для роботи з API

Робота з формами

  • Шаблонні та реактивні форми
  • Валідація форм
  • Отримання та обробка даних з форм
  • Динамічні форми та кастомні валідатори

Життєві цикли компонентів

  • Використання хуків життєвого циклу
  • constructor, ngOnInit, ngOnDestroy та інші
  • Детальний розбір роботи з компонентами

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

  • Angular Router: основи та налаштування
  • Динамічні маршрути та передача параметрів
  • Захист маршрутів (Guards)
  • Lazy Loading для оптимізації продуктивності

Оптимізація, тестування та Best Practices

  • Робота з Change Detection та оновлення UI
  • Використання NgRx або Signals для керування станом
  • Юніт-тестування компонентів та сервісів
  • Angular Material та інші UI-бібліотеки

Мінімальні вимоги

  • Впевнене знання JavaScript
  • Вміння працювати з системою контролю версій

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

  • Розуміти цілі розробки фреймворка і переваги його використання
  • Розбиратися в принципах двостороннього зв'язування даних
  • Працювати з формами, перевіряти їх та обробляти помилки
  • Працювати з вбудованими директивами й створювати свої
  • Створювати прості односторінкові додатки, використовуючи фреймворк
  • Використовувати CLI (Command line interface) для створення і розробки проєкту

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

  • Допомога ментора
  • Практика
  • Проєкт в портфоліо
  • Сертифікат про проходження курсу
Больше информации

Страницы

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

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

Отзывы о курсах

Степан   22.04.2025

Навчаюся на курсі Front-end розробки. Мені за 40 і останні років 10 я пропрацював у пов'язаних з розробкою сферах . Дуже довго наважувався на купівлю повноцінного курсу, з одного боку здавалося, що вже пізно, з іншого - тягнуло самому осягнути магію коду. Зараз я повністю задоволений покупкою!

Рекомендации: Рекомендую
5
Средняя: 5 (1 голос)
Курсы Frontend
Олександр   03.04.2025

До цього я взагалі не розумівся на коді, а після курсу Front-end можу самостійно верстати сайти! Завдяки Lemon School знайшов перше стажування.

Рекомендации: Рекомендую
5
Средняя: 5 (1 голос)
Курсы Frontend
Олена   11.03.2025

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

Назар із захопленням розповідає про нові завдання, які він виконує, і вже має перші власні розробки.

Дякую IT-академії за якісну освіту та натхнення для дітей! Рекомендую всім, хто хоче дати своїй дитині сучасні знання у сфері технологій.

Плюсы:Якісне викладання Сучасна програма Практичний підхід Розвиток креативності Індивідуальний підхід
Минусы:-
Рекомендации: Рекомендую
5
Средняя: 5 (1 голос)
Курсы Frontend
Михайло   11.03.2025

Курс тестування (QA) перевернув моє життя! У 50 років вирішив змінити професію, і це був найвірніший вибір. Тепер я готовий застосувати знання на новій роботі.

Рекомендации: Рекомендую
5
Средняя: 5 (1 голос)
Курсы Frontend
Влад   07.03.2025

Навчаюся на курсі Front-end. Загалом матеріали гідної якості, інформація подається у формі коротких відео + додатковий текстовий матеріал.

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

Страницы