Курсы Frontend Developer: HTML и CSS

Курс присвячений знайомству з основами мови HTML і таблиць CSS та практичним аспектам фронтенд-розробки.

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

Знайомство з основними тегами

• Вступ до курсу
• Що таке HTML та CSS
• Теги та їхні типи
• Теги для розмітки тексту

Знайомство з Visual Studio та верстка тексту

• Знайомство з Visual Studio
• Верстка тексту
• Встановлення та налаштування Visual Studio Code

Робота зі стилями

• Підключення каскадних таблиць стилів CSS та форматування текстів
• Робота з таблицями

Підключення стилів та верстка таблиць

Підключення стилів та верстка таблиць.

Блочна верстка та селектори CSS

• Семантична верстка
• Що таке "Блочкова модель" та як вона влаштована
• Селектори CSS
• Псевдокласи
• Media query

Блочна модель, селектори, псевдокласи та медіазапити

• Робота з Figma для фронтенд-розробників
• Блочкова модель, селектори, псевдокласи та медіазапити

Флексбокси

• Що таке флексбокси та як з ними працювати
• Робота з сітками
• Види позиціонування елементів

Сітки, флексбокси та позиціонування

Сітки, флексбокси та позиціонування.

Робота з формами

• Верстка форм
• Оформлення форм
• Кросбраузерність в CSS

Створення простої форми

Створення простої форми.

UI Kit

• Підключення нестандартних шрифтів
• Що таке UI Kit і з чого він складається

Створення UI Kit

Створення UI Kit.

Створюємо просту посадкову сторінку

• Верстка посадкових сторінок
• Передача дизайн-проєкту фронтенд-розробнику
• Розміщення сторінок в інтернеті

Створення посадкової сторінки

Створення посадкової сторінки.

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

• За попередньою підпискою стартуй навчання в будь-який момент
• Самостійне навчання онлайн у власному темпі
• Сертифікат після проходження курсу

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

Антон Супрун - ведучий розробник CASES та Креативної Практики

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

Блок 1. Web, HTML, CSS, Bootstrap

Ввідний курс по веб-технологіям

• Технологія клієнт сервер
• Мережа інтернет, провайдер, домен, хостинг, web сервер
• http запити, типи запитів POST, GET
• Протоколи передачі даних: http, tcp / ip, ftp, ssh і інші

Базовий синтаксис HTML

• Базовий синтаксис css
• Створення кросбраузерності html сторінки з урахуванням відображення її на мобільних пристроях

Основи JavaScript. Вступ

Історія javaScript, область застосування, програми для написання коду підключення до html сторінці.

Основи синтаксису

• Типи даних і змінні
• Оператори порівняння і логічні значення
• Умовні оператори if і else
• Цикли while, do while, for, for in, each
• Функції, замикання і область видимості
• Масиви і об'єкти

Робота з DOM моделлю

• Вибірка html елементів зі сторінки за назвою класу, id, імені тега і інші способи
• Вставка, зміна і створення html елементів на сторінці
• Події браузера, click, mouseover, mousedown, mousemove і інші
• Створення обробників подій у відповідь на дії користувача

Регулярні вирази

Блок 2. Об'єктно-орієнтоване програмування (ООП)

ООП при процедурному програмуванні

• Конструктор об'єкта
• Поняття інтерфейсу
• Методи роботи з інтерфейсом (сеттери, геттери)
• Функціональне успадкування

ООП в прототипному програмуванні

• Прототип об'єкта
• Класи
• Спадкування
• Свої помилки, успадкування від Error

Високий рівень JavaScript, ES-2015/ES6, Node.js ES-2015/ES6

• Змінні let і const
• Деструктуризація
• Нові можливості оголошення функцій і роботи з рядками
• Робота з об'єктами і прототипами
• Робота з класами і спадкуванням між ними, extends, constructor, super, static, геттери, сеттери
• Тип даних Symbol, ітератори, Set, Map, WeakSet і WeakMap
• Promise, асинхронний javascript
• Генератори, модулі, proxy

Node.js

• Встановлення і запуск
• Робота з модулями
• NPM і Yarn менеджери встановлення пакетів для node js
• Підключення бази даних, post і get запити
• Складальник проєктів Webpack, Babel

Робота з API

• Робота з http запитами, технологія клієнт - сервер
• Вивчення ajax запитів і формату передачі даних JSON
• XMLHttpRequest і fetch
• Принципи роботи REST API

Блок 3. Вивчення сучасної JavaScript бібліотеки

React JS

• Базова концепція, для чого і де використовується
• Налаштування оточення, створення структури програми
• Вивчення JSX - синтаксису
• React Virtual DOM
• Рендеринг елементів
• Компоненти і реквізит
• Оформлення компонентів, робота з CSS
• Життєвий цикл React-компонентів
• Стан і життєвий цикл
• Обробка подій
• Умовний рендеринг
• Списки і ключі
• Форми
• Зворотний потік даних, підйом стану
• Налагодження

Блок 4. Вивчення сучасної JavaScript бібліотеки React JS

Redux JS

• Базова концепція, єдине джерело істини, для чого використовувати з react
• Підключення до react
• Події, асинхронні події
• Reducers, створення і оновлення сховища, імутабельність даних
• Connect метод
• Налагодження
• Розробка фронтенд додатку на REACT JS

Вивчення написання end-to-end i unit тестів для тестування Frontend додатків на React

• Jest js
• Enzyme
• Nightwatch

Розробка фронтенд додатку на React JS і написання серверної його частини на Node JS

Після онлайн курсу ти:

• Ти навчишся створювати веб-сторінки і повноцінні веб-додатки
• Напрацюєш своє стартове портфоліо
• Ти зможеш додавати анімацію і графічні ефекти на веб-сторінки
• За допомогою JavaScript навчишся взаємодіяти з користувачами через веб-інтерфейс

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

• Денис Руденко - В IT сфері вже більше 8 років
• Волосович Андрій - Більше 5 років досвіду у сфері IT

Основи розробки web-сторінок, що таке "Front-end" та "Back-end" і як вони взаємодіють між собою, побудова елементів за допомогою JavaScript - все це та багато іншого чекає на слухачів курсу.

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

Теми:

• Принципи роботи веборієнтованих технологій
• Дизайн сайтів. Промосайт від роботи з замовником до реалізації проєкту
• Мова гіпертекстової розмітки HTML. Починаємо створювати сайт самостійно
• Види сайтів. Різновиди верстки. Списки та таблиці
• Діалог із користувачем і дружній інтерфейс. Меню, форми, фрейми
• Landing page - перший вебпроєкт. Особливості реалізації. Створення та захист проєкту
• Додаткові можливості стилю та дизайну сайтів. CSS - спеціальна мова стилю сторінок. Деталі використання CSS
• Графічні елементи сайту. Обробка та оптимізація зображень для WEB. Підготовка, графіки
• Особливості підготовки дизайн-макету до верстки
• Оцінка сайту. Тестування. Хостинг
• Майстер-клас "Секрети вебдизайну"
• Захист проєкту

Опис курсу

Основи розробки web-сторінок і принципи web-дизайну взагалі. На курсі навчимося створювати web-сторінки, використовувати в роботі принципи побудови та перебору елементів сторінки за допомогою JavaScript і створення сценаріїв для роботи з ними надалі. Мінімальні вимоги: навички роботи з текстовими редакторами.

• тривалість заняття - 60 хвилин
• інтенсивність - 1 заняття 3 рази на тиждень
• повна тривалість курсу - 1 місяць, 12 занять
• заняття проходять онлайн, що дає можливість вчитися в комфортній, безпечній обстановці та не пропускати зустрічі

Що необхідно для навчання?

Ноутбук або комп'ютер, підєднаний до інтернету та оснащений необхідними гарнітурами (колонки або навушники, вебкамера, мікрофон).

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

• Авторська система освітніх курсів
• Унікальна команда тренерів
• Турбота й індивідуальний підхід
• Офіційний сертифікат
• Навчання в будь-який час і з будь-якого місця
• Комфортний освітній процес. Заняття проходять у мінігрупах
• Засновник - перша в Україні дистанційна школа "Оптіма"
• Корисні та потрібні знання. Максимум практики в кожному занятті

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

Людмила Булигіна - Викладачка програмування Фізико-Технічного інституту (КПІ)

Цей курс допоможе тобі отримати необхідний теоретичний фундамент, розібратися з основними поняттями і концепціями в розробці, щоб зробити зважений вибір майбутньої професії.

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

1. Welcome to IT Fundamentals

2. IT Fundamentals - Basics of Computer Science

• Computer Hardware Basics
• Data Representation & Computer Architecture
• Formal Languages
• Operating Systems (Optional)
• Network and Protocols Databases
• Security
• Productivity Tools

3. IT Fundamentals - Basics of Programming

• Introduction to Programming
• Data Types
• Operators, Expressions
• Basic Statements in Programming
• Algorithm Design and Modern Software Development Process Models
• Functions
• Structured Types/Dynamic Data Structures
• Sorting Methods
• Files
• Introduction to Object-Oriented Programming

4. Version Control with Git

• Version Control concept
• Download, install and configure git
• GitHub
• Git graphical tools
• Git internals
• Undoing changes
• Branching and merge
• Tags
• Stash
• Remotes
• Branching strategies
• Extras
• Practical tasks

5. IT Fundamentals - Math for IT [Optional]

• Functions
• Composition of Functions
• Matrices and Operations
• Big O Notation
• Recursive Functions
• Introduction to Probability Theory
• Combinatorics
• Graph Theory (Optional)

6. Data & Analytics. Introduction to SQL [Optional]

• Database Basics
• SQL Foundation
• SQL for Analysis

7. Software Development Methodologies

• High-level overview
• Waterfall
• Agile
• Scrum
• Kanban
• Extreme Programming
• Test-Driven Development
• Behaviour-Driven Development
• Summary & Extras

8. Front End Basics

• HTML Essential
• CSS Essential
• JS Essential

9. Cloud Overview

• Cloud Core Concepts
• Cloud Service Models
• Cloud Ownership
• Public Cloud Platforms Overview

Final Test

Як долучитися до програми?

1. Зареєструйся та заповни профіль
2. За бажанням пройди тест на визначення рівня англійської мови
3. Переглянь відео-гід з користування платформою EPAM Learn, на якій ти будеш проходити навчання
4. Створи акаунт на навчальній платформі
5. Перевір пошту. Посилання на курс буде надіслано на твою адресу після реєстрації
6. Почни проходити курс

Що необхідно для успішного навчання:

• Навички самонавчання та самодисципліни
• Аналітичне мислення та креативність у вирішенні нестандартних завдань
• Відкритість до нових знань, вміння самостійно шукати оброблювати інформацію
• Базове розуміння інформаційних технологій та мінімальні навички у використанні програмного забезпечення

Курс не має обмежень по часу проходження! Складається з відеоуроків, домашніх завдань та тестів для контролю знань.

Людей, які одночасно володіють великою кількістю скіллів та виконують всі обов’язки світу, називаються оркестрами. У світі розробників також є такі представники — Full Stack Developer-и: і серверну частину продукту створить, і front-end налаштує, і в тестування може, і з базами даних впорається. Щоб вивчити такий обсяг інформації та практично все опрацювати з нуля, необхідно чимало часу, а головне — мотивації, і один курс не стане панацеєю й не зробить з новачка профі. Однак якщо ти вже маєш базові знання з бекенд-розробки, і тобі не вистачає навичок з фронтенду для того, щоб назвати себе FullStack Developer, ти на правильній сторінці.

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

Заняття-знайомство

Познайомимося, дізнаємось більше про курс та обговоримо організаційні моменти, а також з'ясуємо, з якою IDE працюватимемо.

Загально про HTML

• Що таке HTML
• Структура html-документа та основні теги
• Посилання та навігація

Елементи HTML

• Таблиці та Форми
• Зображення та інші теги

CSS

• Що таке CSS
• Способи підключення стилів
• CSS-селектори та основні CSS-властивості

Вступ до JavaScript

• Що таке JavaScript
• Інтеграція JS у HTML
• Змінні
• Типи даних

Оператори та конструкції

• Вирази та оператори
• Створення умовних конструкцій (if...else, switch-case, ternary)
• Розуміння та робота з циклами (while, do...while, for-loop)

Масиви, функції та об'єкти

• Масиви, а також їх методи
• Функції та область видимості в JS
• Об'єкти. Їх властивості та методи

Ajax та HTTP-запити

• Основи та розуміння Ajax
• HTTP-протокол та статуси
• Процес очікування завантаження даних. Loading
• Робота з JSON

Введення в RESTFul API та основи роботи з HTTP-запитами

• Основи RESTFul API
• HTTP та його роль у RESTFul API
• Формати даних та обмін даними в RESTFul API
• Основи роботи з API-ключами та автентифікацією

React: вступне заняття

• Знайомство з React i JSX
• Components та Props
• Методи стану та життєвого циклу

Робота з версткою в React

• Обробка подій
• Умовне відтворення
• Списки та ключі

Форми та контрольовані компоненти

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

HTTP-запити та React Router: як користуватися

• Обробка HTTP-запитів
• Маршрутизація за допомогою React Router

Аутентифікація та авторизація у веб-додатках (JWT, OAuth, OpenID Connect)

• Основи аутентифікації та авторизації
• JSON Web Tokens (JWT)
• OAuth 2.0
• OpenID Connect
• Реалізація аутентифікації та авторизації у веб-додатках

Всуп до Material UI

Знайдемо відповіді на запитання:

• Що таке Material UI і його переваги?
• Як встановити Material UI у вашому проєкті?
• Огляд компонентів і стилів Material UI

Основні компоненти та стиль

Розглянемо такі підтеми:

• Основні компоненти, такі як Button, Textfield, and Checkbox
• Компоненти стилю з вбудованими стилями та назвою класу
• Використання постачальника тем і об’єкта теми Material UI для налаштування стилю

Layout та Grid system

• Розуміння Material UI Grid system
• Використання контейнерів і точок зупину для адаптивного дизайну
• Створення базового макета за допомогою компонентів Grid

Розширені компоненти та налаштування

• Додаткові компоненти, такі як Table, List, and Dialog
• Налаштування компонентів Material UI за допомогою реквізитів і замін
• Створення власних компонентів за допомогою системи стилів Material UI

Найкращі практики використання Material UI

• Написання багаторазового та підтримуваного коду за допомогою Material UI
• Розуміння API та документації Material UI
• Використання Material UI з різними бібліотеками CSS-in-JS, такими як Styled Components або Emotion

Введення в GraphQL

• Основи GraphQL
• Схема та типи у GraphQL

Вступ до Redux

Що таке Redux і чому він корисний?

Підключення до React:

• Принципи Redux, включаючи магазин, дії та редуктори
• Контейнерні компоненти та презентаційні компоненти
• Actions та State — короткий огляд

Actions та Reducer

• Як створити actions в Redux?
• Синхронні та асинхронні actions
• Обробка actions в Redux
• Як працюють reducers в Redux?
• Чисті функції та reducers
• Комбінування reducers

Middleware

• Як працює Middleware в Redux?
• Створення Middleware
• Логування та асинхронні запити з Middleware

Асинхронний Redux

• Як працює асинхронний Redux?
• Redux-Thunk
• Redux-Saga

Тестування React та Redux програми

• Тестування компонентів React
• Тестування Redux
• Тестування асинхронного коду
• Інтеграційне та функціональне тестування
• Оптимізація та покращення якості коду

Заняття з англійської

Технічні навички - це круто, однак який розробник без англійської?

Кар'єрна консультація з рекрутером

Рекрутер допоможе тобі скласти резюме та скоординує в пошуку роботи.

Q&A Session

Будь які запитання знайдуть свої відповіді на цьому занятті. І так - це останнє заняття, після якого ти можеш впевнено казати - "Я знаю, як використовувати фронтенд!"

Результат після проходження курсу:

• Розуміння принципів і практик фронтенд-розробки
• Досвід створення повноцінного застосунку
• Знання основ взаємодії між фронтендом і бекендом
• Портфоліо

Попередні вимоги для курсу

Ти маєш знати:

• Основи бекенд-розробки
• Досвід роботи хоча б з однією мов програмування
• Досвід роботи хоча б з однією з баз даних
• Розуміння принципів роботи веб-технологій
• Базові знання про основні патерни проєктування
• Досвід роботи з системами контролю версій
• Навички читання і розуміння англомовної тех-документації
• Уміння працювати в команді та використовувати засоби комунікації
• Базові навички роботи з командним рядком та інструментами для розробників
• Відкритість до вивчення нових технологій

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

• Лекції в зручний час
• Практичні заняття
• Невеликі групи
• Підтримка ментора
• Сертифікат
• Можливість контракту з IT-компанією
• 27 онлайн-занять
• Доступ до додаткових матеріалів — презентацій, записів лекцій, чек-листів
• Готовий проєкт на фініші курсу, який ти зможеш додати до портфоліо

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

Владислав Байрак - Senior Full Stack Developer at CHI Software

На курсі ви опануєте сучасні технології веброзробки. На заняттях вас навчать створювати інтерфейси користувача, веб-сторінки та корпоративні сервіси, а також вивчите основи верстки 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

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

Модуль 1. Вступ до JavaScript

• Вступ до веб-розробки та JavaScript
• Встановлення середовища розробки та інструментів

Модуль 2. Основи JavaScript

• Синтаксис та змінні
• Умовні конструкції
• Цикли та ітерація
• Функції
• Масиви

Модуль 3. Робота з DOM

• Вступ до DOM (Document Object Model)
• Робота з елементами
• Робота з подіями

Модуль 4. ООП в JavaScript

• Вступ до ООП
• Конструктори та прототипи

Модуль 5. Вступ до React.js

• Ознайомлення з React.js
• Компоненти
• Робота з JSX
• Життєвий цикл компонентів

Модуль 6. Основи TypeScript

• Вступ до TypeScript
• Типи даних та анотації типів
• Інтерфейси та класи в TypeScript

Модуль 7. Робота з API та AJAX

• Взаємодія з сервером за допомогою AJAX запитів
• Використання API

Модуль 8. Розробка проєкту з використанням React.js i TypeScript

• Планування та створення проєкту
• Розробка компонентів з використанням React.js та TypeScript

Модуль 9. Завершення курсу

• Розробка та презентація фінального проєкту
• Підсумкове тестування та оцінювання знань

Вимоги до учасників курсу

Курс вимагає початкових знань з HTML/CSS. Знання англійської мови для розуміння літератури буде перевагою під час навчання.

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

• Практичні завдання
• Експертні інструктори
• Сертифікат після проходження курсу

Курс розрахований на тих, кого цікавлять основи створення сучасних сайтів. Протягом навчання створите свій перший самостійний проєкт. Студенти також мають можливість відвідувати воркшопи та майстер-класи від профі.

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

Основи HTML/CSS

• Робота із системою контролю версій Git
• Основи HTML5, базові HTML елементи та атрибути
• Основи CSS, основні правила, оформлення елементів
• Селектори CSS
• Робота з технологіями Flexbox та CSS Grid
• Керівництво розміром та розміщенням блоків на сторінці
• Псевдо-елементи та псевдо-класи
• Робота з таблицями, формами
• Анімації в CSS
• Робота з адаптивною вебверсткою та особливості кросбраузерної верстки
• Препроцесори CSS

Степ-проєкт в кінці навчання

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

• Живі заняття онлайн
• Система оцінки знань
• Навчальний проєкт
• Ізраїльська методика Телем
• Підтримка ментора
• Робота над реальними проєктами
• Допомога курс-координатора
• Сучасна LMS-система
• Система оцінки знань

Протягом курсу Ви розберетесь в HTML, CSS, навчитесь робити розмітку, адаптивну кросбраузерну верстку, працювати з API та взаємодіяти з сервером. Навчитесь використовувати такі інструменти як: JQuery, React, GitHub, Brackets.

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

Введення в HTML і CSS. Клієнт-серверна архітектура

• Налаштування простору для кодингу
• Основи HTML і CSS. Синтаксис
• Блочні елементи та стрічкові елементи
• Додавання тексту та його стилізація. Гіперпосилання
• Додавання графіки. Списки

Прикладне використання HTML і CSS

• Створення таблиць. Робота з формами
• HTML 5 теги. Семантика
• Робота з ресурсами (іконки, шрифти, fontawesome)
• Position. Flexbox. Grid

Анімація та адаптивність веб сайтів

• Grid
• Анімації CSS
• Адаптивність CSS (@media)
• SASS (SCSS)
• Bootstrap

JavaScript. Початок роботи з динамічними сторінками

• Вступ до JS
• Змінні. Типи даних
• Тернарний та логічні оператори
• Інструкція switch
• Цикли: for, while, do…while
• Function Declaration і Function Expression
• Анонімні функції
• Функція callback
• Функції alert, prompt, confirm

Цикли та об’єкти. Об’єкти

• Цикли: for, while, do..while
• Об'єкти. Методи об'єктів
• Копіювання об’єктів та посилання

Масиви в Javascript

• Вчимося створювати масиви
• Методи масивів
• Використання циклів

Дані. Контекст виконання функцій. Глобальний об’єкт window

• Контекст виклика і this. Методи call, bind та apply
• Функції конструктори. Дескриптори об’єктів
• Local та Sesion storages. Дата та час
• Глобальний об’єкт window. Об’єкт лексичного оточення

Робота з сервером. OOP

• Замикання
• Оператор try/catch/finally
• Синтаксис setTimeout/setInterval
• Як влаштований Event Loop в JavaScript
• OOP та його принципи

DOM та асинхронний JavaScript.

• Об’єкт Promise
• Функції async/await в JS
• DOM/BOM. Вибір елементів на сторінці

NPM/Yarn. Jsx. Віртуальний DOM

• NPM та Yarn. Огляд властивостей Webpack. Робота з import/export
• Огляд структури React додатку
• JSX та props: Рендеринг списків та Conditional рендеринг
• Віртуальний DOM
• Обробка подій. Контролюємі та не контролюємі компоненти

Життєвий цикл компонентів. React Context. Портали

• Життєвий цикл компонента
• Створення ErrorBoundary
• React-router-dom
• Портали

Основні React хуки

• Хук useState
• Хук useRef
• Хук useEffect
• Хук useMemo
• Хук useCallback
• React.memo()

React бібліотеки

Способи стилізації React додатку:

• Css modules
• Styled Components
• Redux та redux-thunk
• Material UI
• Formik

AI інструменти для роботи з кодом

• Підказки щодо архітектури, бібліотек і софту
• Написання документації
• Написання коду (функцій і скриптів)
• Написання unit-тестів (модульне тестування)
• Тестування коду із запропонованими вхідними даними
• Виправлення помилок як синтаксичних, так і логічних
• Оптимізація та оформлення коду
• Поліпшення коду на основі найкращих практик
• Зміна однієї бібліотеки на іншу
• Допомога у пошуку вразливостей у коді, динамічне тестування (DAST), статичне тестування (SAST)

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

• Відеозаписи занять та всі матеріали завжди доступні
• Практичні заняття проходять раз на тиждень по 3 години
• Особистий зворотний зв’язок від викладача
• Факультативні заняття "English for IT"
• Можлива сертифікація JSE
• Можлива заморозка курсу при необхідності
• Дипломні проєкти
• Закритий чат учнів з викладачем і куратором

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

• Олександра Рекало - Викладач курсу Front End розробник у Powercode Academy, Web developer, designer, IT mentor
• Віктор Бойко - Викладач курсу Front End розробник у Powercode Academy, Expert Full-stack developer в Infopulse
• Елеонора Кормиш - Викладач курсу Front End розробник у Powercode Academy, Full-stack developer у сфері game-development