Online | Offline
КУРС

FRONT‑END розробка

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

Дата старту

8 листопада

Тривалість

198 годин, 33 тижні

Розклад

Пн, Ср 18.00-21:00

Заробітня плата FRONT‑END разробника

від 400$ до 3700$

(за даними work.ua або dou.ua)

Чим займається FRONT‑END разробник?

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

Головне його завдання – зробити максимально зручною взаємодію користувача з сайтом або web-додатком. Він добре розуміється на кросбраузерній, адаптивній та валідній верстці. Створює інтерактивні елементи за допомогою JavaScript. Розуміє принципи побудови бекенда і розуміється на серверних технологіях.

відео з нашим викладачем

Коротко про курс

icon

Інтенсивна практика і розбір домашніх завдань

icon

Можливість онлайн навчання + Відеозаписи всіх занять

icon

Викускний проєкт для портфоліо, який ти презентуєш роботодавцям

icon

Допомога у працевлаштуванні, оформленні резюме та підготовка до співбесіди

video-thumb

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

icon
Верстати сторінки на HTML та CSS

Проектувати інтерфейси користувача, створювати кросбраузерну, адаптивну верстку і вносити зміни в існуючу

icon
Development

Розробляти логіку роботи клієнтської частини та розуміти роботу серверної частини web-додатків

icon
Програмувати на JavaScript

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

icon
Використовувати DOM, AJAX, JSON

Для структурування коду, об'єктного представлення вихідного HTML-документа та здійснювати асинхронне оновлення веб-сторінок

icon
Застосовувати React

Використовувати повною мірою можливості бібліотеки для прискорення та спрощення процесу розробки

icon
Працювать з Git & GitHub

Аналізувати та керувати результатами своєї роботи використовуючи систему контролю версій Git& GitHub

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

12+

найпопулярніших інструментів та фреймворків для розробки web-проектів

круті приклади від тренера та добірка кращого теоретичного матеріалу

практика роботи у команді з методології SCRUM

HTML
  • Коротка історія WEB
  • HTML, CSS, JS - що це та для чого
  • Редактор коду - Visual Studio Code
  • Основи HTML
  • Структура html-документа, основні теги, коментарі, спецсимволи
  • Таблиці, форми
  • Атрибути (глобальні)
  • Посилання, навігація
  • Медіаконтент (img, audio, video)
CSS
  • Вступ до CSS, джерела літератури. Інструменти браузера. Підключення стилів
  • CSS-селектори та основні CSS-властивості
  • Наслідування та пріоритет стилів
  • Блокова модель
  • Друкарня та шрифти
  • Селектори нащадки та БЕМ-CSS
  • Стилізація форми
  • Властивості фону, спрайти
  • Підключення іконок та псевдоелементи
  • Псевдокласи та специфічні селектори
  • Абсолютне, відносне та фіксоване
  • Накладення (z-index)
  • Flex. Коефіцієнт збільшення та фактор стиснення flex-елемента
  • Зміна порядку та вирівнювання flex-елементів
  • Блокова верстка сайту. Створення різних layouts
  • CSS анімації. Тривалість та 'ритм' виконання анімації
  • Трансформації елементів
  • Переміщення. масштабування, обертання, прозорість
  • CSS 3D. CSS Grid. Шаблони рядів та колонок
  • Порядок та об'єднання колонок та рядів
  • Grid-зони
  • Верстка під мобільні пристрої
CSS фреймфорк - Bootstrap
  • Сітка Bootstrap та побудова каркасусторінки
  • Bootstrap компоненти та скрипти
  • Інші CSS бібліотеки та фреймворки
  • Reset, Normalize, Foundation, Tailwind_CSS
JavaScript
  • Введення у JavaScript. Інструменти
  • Інтерпретатор. Змінні. Типи даних
  • Null и undefined
  • Оператори (бінарні, унарні). Оператори порівняння
  • Перетворення типів
  • Умовні оператори (if, тернарний)
  • Логічні оператори (і, або, не)
  • Цикли (while, for)
  • Конструкція switch
  • Функції та аргументи
  • Рекурсія, стек
  • Методи та властивості. Введення
  • Семантика, строгий режим, валідація, налагодження
  • Масиви. Об'єкти та методи
  • Класи та ООП
  • Объекти BOM (window, history, navigator, location, screen)
Дерево DOM
  • Блокова верстка сайту
  • Створення різних layouts
  • Навігація в DOM
  • Пошук: getElement* та querySelector*
  • Додавання та видалення вузлів
  • Вступ. Сплив і перехоплення. Делегування подій
  • Події миші
  • Події scroll, load, error, ready
Advanced JavaScript
  • MVC, MVP, MVVM
  • RegExp
  • Unit Testing
  • Canvas
  • Ітератори та генератори
  • Promises
  • Cookies
  • Інтерфейс Storage
  • Flux
HTTP-протокол
  • JSON
  • Подхід AJAX
  • XMLHttpRequest
  • Fetch
  • Інші способи мережевих запитів
REACT
  • React основи
  • JSX і компоненти
  • Стан компонента (state) та метод render
  • Передача даних компоненту – props
  • Методи життєвого циклу
  • React - обробка подій
  • Робота зі стилями компонентів
  • Клієнтський роутинг
  • React router
  • Мережеві запити в React. Робота React з API
  • Функції вищого ладу
  • React HOC
  • Контекст Provider та Consumer
  • React без класів. Основні Хуки. Кастомні Хуки
  • Бібліотека Redux
  • Redux-React combo
PROJECT
  • Написання програми
  • Защита выпускного проекта

Хто читає цей курс?

Микола Сотула

Микола Сотула

FullStack developer&mentor SoftServe

12 років викладаю складні речі максимально простими словами
10 років розробляю веб, мобільний, десктопний та серверний софт
10 років створюю сайти, мобільні програми, програми для ПК та серверів
5 років працюю FullStack розробником

Як відбувається навчання?

Живі заняття

Навчання в офлайн форматі та з можливістю онлайн підключення

90% практики

Практика з першого дня навчання: робота над реальним проектом для портфоліо

Підтримка викладачів

Закритий Telegram чат групи з викладачем, розбір домашніх завдань та регулярний зворотний зв'язок

Кар'єрні івенти

Онлайн-екскурсії в топові IT-компанії, тренінги з Soft Skills та підготовка до працевлаштування

Твоє резюме після навчання

Максим Рудских FRONT‑END developer Trainee
Зарплата від 600$
Графік Работа в офісі
Освіта Level Up
Ключові навички
  • Розробка проектів frontend-частини з нуля
  • Розробка бізнес-логіки та back-end системи для підтримки продукту
  • Проектування інтерфейсів користувача
  • Вільне володіння JavaScript та JavaScript транспайлерами
  • Знання та досвід роботи з популярним фреймворком React та його бібліотеками
  • Володіння інструментами контролю версій Git, GitHub
  • Розуміння принципів побудови бекенда та розбиратися у серверних технологіях
  • Сильні аналітичні здібності та увага до деталей
  • Готовність вчитися, зростати та вдосконалюватися в галузі якості

Так буде виглядати твій електронний сертифікат

який ти зможеш додати до свого CV

Инструменты, которые вы освоите

icon
instrumet preview
instrumet preview
instrumet preview
instrumet preview
instrumet preview
instrumet preview
instrumet preview
instrumet preview
instrumet preview
instrumet preview
instrumet preview
instrumet preview

HTML

Мова гіпертекстової розмітки сторінок, яку застосовують для розмітки документів для перегляду веб-сторінок у браузері. Його використовують для того, щоб дати браузеру зрозуміти, як потрібно відображати завантажений сайт або сторінку.

instrumet preview

CSS

Каскадні таблиці стилів. CSS — формальна мова опису зовнішнього вигляду документа, написаного за допомогою мови розмітки. Також може застосовуватися до будь-яких XML-документів, наприклад SVG або XUL.

instrumet preview

JavaScript

Мультипарадигменна мова програмування. Підтримує об'єктно-орієнтований, імперативний та функціональний стилі. JavaScript – єдина мова програмування для браузерів.

instrumet preview

Bootstrap

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

instrumet preview

DOM

Незалежний від платформи та мови програмний інтерфейс, що дозволяє програмам та скриптам отримати доступ до вмісту HTML-, XHTML- та XML-документів, а також змінювати вміст, структуру та оформлення таких документів.

instrumet preview

AJAX

Технологія звернення до сервера без перезавантаження сторінки, які дозволяють веб-додаткам працювати асинхронно — обробляти будь-які запити до сервера у фоновому режимі техніки розробки веб-інтерфейсів, що дозволяють робити динамічні запити до сервера без видимого перезавантаження веб-сторінки: користувач не помічає, коли його браузер запитує дані. AJAX забезпечує динамічність та асинхронність web-розробок за відсутності необхідності оновлення сторінок.

instrumet preview

React

JavaScript-бібліотека з відкритим вихідним кодом для розробки інтерфейсів користувача. React розробляється та підтримується Facebook, Instagram та спільнотою окремих розробників та корпорацій. React може використовуватися для розробки односторінкових та мобільних додатків.

instrumet preview

Redux

Бібліотека для JavaScript з відкритим кодом, призначена для керування станом програми. Найчастіше використовується у зв'язці React для розробки клієнтської частини.

instrumet preview

MVC

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

instrumet preview

Git

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

instrumet preview

github

Найбільший веб-сервіс для хостингу IT-проектів та їхньої спільної розробки. Веб-сервіс заснований на системі контролю версій Git та розроблений на Ruby on Rails та Erlang компанією GitHub. Насамперед, сервіс Gitub - це хмарне сховище файлів. Сенс у тому, що на цьому сервісі ви можете розмістити файли зі свого комп'ютера і зберігати їх на віддаленому сервері. Причому, робити це можете абсолютно безкоштовно.

Допомагаємо з працевлаштування

кожен випускник Level Up отримує допомогу та підтримку Центру розвитку кар'єри

Надаємо консультацію

Разом із фахівцем ти проаналізуєш свої компетенції, визначиш кар'єрні цілі та позиціонування на ринку праці

Допомагаємо з резюме

Разом з кар'єрним менеджером ти складеш якісне резюме та супровідний лист, які допоможуть виділитися серед інших кандидатів

Пропонуємо вакансії

Менеджер з працевлаштування регулярно інформує студентів курсу про актуальні вакансії у наших компаній-партнерів

Сприяємо твоєму розвитку

Менеджер з працевлаштування створює безкоштовні івенти для розвитку твоїх soft skills та HR-зустрічі з роботодавцями

Допомагаємо отримати роботу мрії

Ти навчишся презентувати себе на співбесіді - очній або заочній. А якщо подаєш резюме на вакансії наших партнерів, менеджер з працевлаштування збирає зворотний зв'язок у роботодавців

Повна вартість курсу

39600 грн

Виберiть спосiб оплати

Сплата за весь курс При повній оплаті знижка 10% Заощаджуй 3960 грн
Розстрочка від Level Up Не хочеш платити відразу? Сплачуй помісячно 8 платежiв по 4950 грн

Заповніть контактні дані

    Оплата курсу

    Ім'я
    Прізвище
    Телефон
    Виберіть кількість платежів

    Введіть слово, щоб почати пошук