Курс Front-end розробка

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

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

Введення

• Про курс та результати на які слід очикувати
• Коротка історія 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)

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
• XMLTttpRequest
• Ajax практика
• Інші способи мережевих запитів

JS - React

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

Project

• Написання програми
• Захист випускного проєкту

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

• Проєктувати інтерфейси користувача, створювати кросбраузерну, адаптивну верстку і вносити зміни в існуючу
• Розробляти логіку роботи клієнтської частини та розуміти роботу серверної частини web-додатків
• За допомогою JavaScript будеш створювати інтерактивні інтерфейси, розробляти серверну частину сайтів
• Для структурування коду, об'єктного представлення вихідного HTML-документа та здійснювати асинхронне оновлення веб-сторінок
• Використовувати повною мірою можливості бібліотеки для прискорення та спрощення процесу розробки
• Аналізувати та керувати результатами своєї роботи використовуючи систему контролю версій Git & GitHub

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

• Інтенсивна практика і розбір домашніх завдань
• Можливість онлайн навчання + Відеозаписи всіх занять
• Викускний проєкт для портфоліо, який ти презентуєш роботодавцям
• Допомога у працевлаштуванні, оформленні резюме та підготовка до співбесіди
• Кар'єрні івенти
• Підтримка викладачів
• Великий стек технологій
• Можлива оплата курсу частинами

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

Дмитро Томчук - Front-end Developer (Angular developer)