Курс Frontend розробник

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

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

HTML/CSS

Розробка інтерфейсів з нуля

• Що потрібно знати.
• Для чого потрібна ця професія.
• Що таке веб.
• Шляхи розвитку.

Початок роботи

• Налаштування середовища.
• Програми для роботи.
• Завантаження першого сайту.

Введення у HTML

• Теги та атрибути.
• Семантика.
• Робота з текстом.
• Зображення.
• Інтерактивні елементи.
• Списки.

Продовження HTML

• Інструменти розробника.
• Таблиці.
• Символьні підстановки.
• Медіаконтент, фрейм.
• Оформлення і валідація коду.

Введення в CSS

• Підключення стилів.
• Синтаксис, селектори.
• Каскадність і специфічність.
• CSS змінні.

Шрифти

• Підключення шрифтів.
• Локальні шрифти.
• Оформлення тексту.

Блокова модель

• Геометрія елемента.
• Типи елемента.
• Структурні псевдокласи.

Flexbox

• Основні концепції.
• Flex-контейнер і flex-елемент.
• Практичне застосування.

Розкладка CSS Grid

• Основні концепції.
• Grid-контейнер.
• Grid-елемент.
• Практичне застосування.

Декоративні ефекти

• Типи зображень.
• Фон.
• Градієнти.
• Тінь.
• Псевдоелементи.

Графіка

• Растрова графіка.
• Векторна графіка. SVG.
• Додавання SVG на сторінку.
• SVG-спрайт.

Позиціонування

• Типи позиціонування.
• Властивість overflow.
• Накладання елементів.

Анімація

• Трансформація.
• Переходи.
• Анімація.

Практика: тестування API

• Основи роботи.
• Елементи форм.
• Групування полів.

Валідація веб-форм

• Види валідації.
• Перевірка введених значень.
• Псевдокласи стану.

Препроцесори

• Препроцесори SASS, SCSS.
• Вкладені правила.
• Директиви.
• Вендорні префікси.

CSS Методології

• Навіщо потрібні методології.
• Методологія БЕМ.
• Блок, елемент, модифікатор.

Адаптивність і Адаптивна графіка

• Типи і види верстки.
• CSS media запити.
• Стратегії Mobile і Desktop first.
• Адаптив і ретинізація фонових та контентних зображень.

Іспит HTML/CSS

• Іспит з пройденого матеріалу.

JavaScript

Введення

• JavaScript – що це таке.
• Підключення скрипта.
• DevTools.
• Визначення об'єктів, властивостей та методів.
• Типи данних.

Оператори

• Що таке оператори.
• Вивід данних/Ввід данних.
• Вирішення логічних задач та побудова алгоритмів.
• Умови if/else та switch/case.

Масиви і цикли

• Масиви.
• Цикли.
• Методи присвоєння.
• Методи масиву.
• Області видимості.

Функції

• Функції.
• Стрілочні функції.
• Лексичне оточення.
• Контексти і виклики.

Замикання this

• Замикання this.
• Контексти і виклики.
• Call, apply, bind.

Об'єкти та класи

• ООП.
• Об'єкти.
• Інкапсуляція, абстракція, наслідування, поліморфізм.
• Практика.

ES6

• Конструктори.
• Внутрішні методи.
• Прототипи.
• ES6.

DOM

• Що таке DOM.
• Навігація по DOM.
• Властивості.
• Робота з DOM-вузлами.

Події

• Події.
• Форми.
• Event propagation.
• Drag'n'Drop.

Local Storage та Node.js

• Local Storage.
• Node.js.
• Установка і використання.
• Додавання/видалення бібліотек.

Асинхронний JS і дата

• Асинхронний JS.
• Синхронність, асинхронність, багатопотоковість.
• SetTimeout і setInterval.
• Дата.
• Promise.

Протоколи передачі даних

• TCP/IP.
• HTTP.
• HTTPS.
• Коди відповіді.
• Помилки і обробка.

REST API

• REST API.
• Ajax.
• Fetch.
• Практика.

WebPack & Gulp

• Складання проєктів: WebPack, Gulp.

React

• Основи популярної бібліотеки.
• Створення зборки.
• Використання React на прикладах.

Іспит з JavaScript

Soft skills IT

Що таке soft skills

• Які бувають?
• Де застосовувати?
• Як виміряти свій рівень володіння soft skills.
• Як покращувати свої скіли.

Soft skills для IT спеціаліста

• Для чого IT спеціалісту розвивати soft skills?
• Комунікація: як прокачати і де знадобиться.
• Креативність і гнучкість: як прокачати і де знадобиться.
• Самодисципліна: як прокачати і де знадобиться.
• Критичне мислення: як прокачати і де знадобиться.
• Уважність: як прокачати і де знадобиться.
• Проактивність: як прокачати і де знадобиться.
• Адаптивність: як прокачати і де знадобиться.
• Інші навички.

Цілі і їх досягнення

• Колесо балансу.
• Як зрозуміти чого хочу саме я?
• Як правильно поставити свої цілі (смарт).
• Як декомпозувати цілі.
• Як досягати своїх цілей?

Емоційний інтелект/Емпатія

• Що таке емоційний інтелект?
• Ща таке емпатія і чим відрізняється?
• Як це застосовувати з вигодою для себе.
• Особисті кордони при високому рівні емпатії.

Основи комунікації

• Що таке екологічна комунікація?
• Види комунікації.
• Бар'єри в комунікації.
• Ціль в комунікації, як її побачити і застосувати на практиці.
• Правила успішної комунікації.

Конфліктологія

• Що таке конфлікт? Чому це добре?
• Який ідеальний результат конфлікту.
• Види та способи розв'язання конфліктів.
• Як зберігати спокій під час конфліктів.

Ораторське мистецтво

• Навіщо нам рот?
• Як говорити так, щоб тебе почули?
• Як правильно, ефективно та швидко доносити свої думки.
• Страх говорити.

Ефективне навчання

• Що таке ефективне навчання?
• Як правильно навчатись?
• Принципи швидкого і якісного навчання.
• Як не забути все, що вивчив.

Основи фінансової грамотності

• Скільки грошей мені треба для щастя?
• Скільки грошей мені треба насправді?
• Як вести власний бюджет і знати куди і звідки приходять гроші?
• Лайфхак: де взяти гроші, коли їх нема?

Планування і тайм-менеджмент

• Як правильно визначити пріоритетність задач?
• Принципи планування і тайм менеджменту.
• Багатозадачність: добре чи погано? Як встигнути все?
• Трекінгові системи.

Фінальна робота

• Розробка власного проєкту на вибір:
  • Сайт.
  • Веб додаток.
  • Мобільний додаток.

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

• Заняття проходять 2-3 рази на тиждень
• Практичні домашні завдання
• Живі Q&A-сесії в онлайн-форматі
• Запис кожного заняття буде доступний в особистому кабінеті
• Власний проєкт у портфоліо
• Викладачі – практикуючі фахівці у IT-компаніях
• Додаткові переваги у пакеті "Pro"

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

• Крістіна Малітовська - Frontend/Mobile Developer
• Дмитро Рябовол - Розробник UI інтерфейсів. Markup developer at Studytube
• Дарія Звягіна - Head of Product and Service