Online | Offline
КУРС

FRONT‑END розробка

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

Cтарт: у листопаді

Тривалість

168 години, 28 тижнів

Розклад

Вт, Чт 18:00-21:00

Вартість

7 платежiв по 4750 грн

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

від 400$ до 3700$

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

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

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

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

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

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

icon

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

icon

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

icon

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

icon

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

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

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 та бібліотека jQuery
  • Дерево DOM
  • Робота з DOM з консолі
  • Навігація в DOM
  • Пошук: getElement* та querySelector*
  • Додавання та видалення вузлів
  • Вступ. Сплив і перехоплення. Делегування подій
  • Події миші
  • Події форми
  • Події scroll, load, error, ready
Дерево DOM та бібліотека jQuery
  • Блокова верстка сайту
  • Створення різних layouts
  • Навігація в DOM
  • Пошук: getElement* та querySelector*
  • Додавання та видалення вузлів
  • Вступ. Сплив і перехоплення. Делегування подій
  • Події миші
  • Події scroll, load, error, ready
  • Специфічні завдання та їх вирішення
  • Знайомство та робота з jQuery
  • Селектори
  • Атрибути (класи, дата, отримання значень, html)
  • Допоміжні функції
  • Виведення елементів у DOM - render items
  • Оптимізація використання ресурсів браузера та швидкість завантаження
  • JS-анімація
HTML5 API
  • HTTP-протокол
  • Cookies
  • Інтерфейс Storage
AJAX
  • JSON
  • Підхід AJAX
  • XMLHttpRequest
  • Інші способи мережевих запитів
REACT
  • React основи
  • JSX і компоненти
  • Стан компонента (state) та метод render
  • Передача даних компоненту – props
  • Методи життєвого циклу
  • React - обробка подій
  • Робота зі стилями компонентів
  • Клієнтський роутинг
  • React router
  • Мережеві запити в React. Робота React з API
  • Функції вищого ладу
  • React HOC
  • Контекст Provider та Consumer
  • React без класів. Основні Хуки. Кастомні Хуки
PROJECT
  • Написання програми
  • Защита выпускного проекта

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

Євген Ступаченко

Frontend Developer

Розробкою займаюся вже 6 років. Є досвід в розробці web-проектів різних типів від Лендінзі до інтернет-магазинів і соц.сетей. Працюю як з Front End, так і Back End. Використовую останні технології і фреймворки в роботі. Завжди в курсі найсвіжіших і ефективних методів веб-розробки. Викладаю 3 роки і говорю просто про складне.

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

Живі заняття

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

90% практики

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

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

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

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

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

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

Максим Рудских FRONT‑END developer Trainee
Зарплата від 400$
Графік Работа в офісі
Освіта 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-зустрічі з роботодавцями

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

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

Інвестуй в себе!

Отримай роботу FRONT‑END developer за 28 тижні

Вартість курсу
33250 грн.
*При повній оплаті знижка 10% економія 3325 грн
Оплата по місяцям

7 платежiв по 4750 грн

Отримай консультацію,
щодо курсу

    Отримати консультацію

    Ім'я
    Телефон

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