Online | Offline

КУРС

FRONT‑END розробка

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

Оплата частинами

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

від 500$ до 3700$

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

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

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

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

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

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

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

Development

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

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

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

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

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

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

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

Працювати з Git & GitHub

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

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

12+

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

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

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

Введення

Про курс та результати на які слід очикувати
Коротка історія WEB (історія, w3c)
HTML, CSS, JS – що і для чого
Редактор коду Visual Studio Code

HTML

GIT
Основи HTML
Структура html-документа, основні теги, коментарі, спецсимволи
Таблиці
Форми, HTML5 форми
Атрибути
Списки
Теги, коментарі, doctype, форматування. Вкладеність
Посилання, навігація
Медіаконтент (img, audio, video)

CSS

Введення, література. Підключення стилів
Друкарня та шрифти
Відсутні та 'набивання'
Селектори нащадків та БЕМ-CSS
Стилізація форми
Властивості фону, спрайти
Підключення іконок та псевдоелементи
севдокласи та специфічні селектори
Градієнти, заокруглення кутів, тінь
Позиціювання
Абсолютне, відносне та фіксоване
Накладення (z-index)
Ідентифікатори, класи, селектори
Специфічність селекторів
Наслідування та каскадування
Величини в CSS
Форматування тексту, шрифти
Блочна модель
Резинова і адаптивна верстка
Властивості ширини та висоти (min, max)
Плаваючі елементи Float
Властивості фону, спрайти
Позиціонування
Накладення (z-index)
Flex
Коефіцієнт збільшення та фактор стиснення flex-елемента
Зміна порядку та вирівнювання flex-елементів
Блокова верстка сайту
Створення різних layouts
CSS анімація
Тривалість та 'ритм' виконання анімації
Затримка виконання анімації
Трансформація елементів
Переміщення. масштабування, обертання, прозорість
CSS 3D
CSS Grid. Шаблони рядів та колонок
Порядок та об'єднання колонок та рядів
Grid-зони
Препроцессори SASS/SCSS
Верстка під мобільні пристрої
CSS фреймфорк - Bootstrap
Сітка Bootstrap та побудова каркасу сторінки
Bootstrap компоненти та скрипти

JavaScript

Введення у JavaScript. Інструменти. Література
Парсер
Змінні
Типи даних
Null і undefined
Оператори (бінарні, унарні)
Оператори порівняння
Перетворення типів
Умовні оператори (if, тернарний)
Логічні оператори (і, або, не)
Цикли (while, for)
Конструкція switch
Функції та аргументи
Рекурсія, стек
Методи і властивості. Вступ
Семантика, строгий режим, валідація, налагодження
Масиви
Об'єкти і методи
Класи та ОВП
Об'єкти BOM (window, history, navigator, location, screen)
Об'єкти BOM (window, history, navigator, location, screen)
Об'єкти BOM (window, history, navigator, location, screen)

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

Дерево DOM
Робота з DOM з консолі
Навігація в DOM
Пошук: getElement* та querySelector*
Додавання та видалення вузлів
Запровадження. Сплив і перехоплення. Делегування подій
Події миші
Події форми
Події scroll, load, error, ready
Специфічні завдання та їх вирішення
Знайомство та робота з jQuery
Селектори
Атрибути (класи, дата, отримання значень, html)
Допоміжні функції
Виведення елементів у DOM - render items
Оптимізація використання ресурсів браузера та швидкість завантаження
Практика DOM
JS-анімація

HTML5 API

HTTP-протокол
Cookies
Інтерфейс Storage

AJAX

JSON
Підхід AJAX
XMLHttpRequest
Ajax практика
Інші способи мережевих запитів

JS - React

React основи
JSX та компоненти
Стан компоненту (state) та метод render
Передачі даних компоненту - props
Методи життєвого циклу
Монтування та демонтаж
React – обробка подій
Робота зі стилями компонентів
Клієнтський роутинг
React router
Мережеві запити в React
Робота React з API
Функції вищого ладу
React HOC
Контекст
Provider та Consumer
React без класів
Основні Хуки
Кастомні Хуки
Додаток на React

Project

Написання програми
Відкритий захист проєкту

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

Дмитро Томчук

FRONT-END DEVELOPER (ANGULAR DEVELOPER)

5+ досвіду роботи у WEB-розробці, спеціалізуюсь на JavaScript розробці з використанням Angular
Маю досвід роботи як на фрізансі так і в великів компанії. Працював над створення інтерфейсів великих маркетплейсів по типу eBay, Amazon and Walmart
Досвід викладача та ментора більше 3х років

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

Живі заняття

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

90% практики

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

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

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

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

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

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

Максим Рудских FRONT‑END developer Trainee

Зарплата від 500$

Графік Работа в офісі/онлайн

Освіта Level Up

Ключові навички

Розробка проектів frontend-частини з нуля
Розробка бізнес-логіки та back-end системи для підтримки продукту
Проектування інтерфейсів користувача
Вільне володіння JavaScript та JavaScript транспайлерами
Знання та досвід роботи з популярним фреймворком React та його бібліотеками
Володіння інструментами контролю версій Git, GitHub
Розуміння принципів побудови бекенда та розбиратися у серверних технологіях
Сильні аналітичні здібності та увага до деталей
Готовність вчитися, зростати та вдосконалюватися в галузі якості

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

Розглянути

Інструменти, які ви освоїте

HTML

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

CSS

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

JavaScript

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

Bootstrap

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

DOM

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

AJAX

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

React

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

Redux

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

MVC

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

Git

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

github

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

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

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

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

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

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

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

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

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

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

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

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

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

Деталі курсу

Дата старта

За запитом

Тривалість

180 годин, 30 тижні

Розклад

Пн, Чт 18.00-21:00

Способи оплати

10% знижка Одразу за курс

20% знижка ЗСУ та військовим

Покупка частинами
від від 2 до 8 платежів без комісії

Дізнатись вартість та отримати консультацію