Курсы Frontend Developer: HTML и CSS

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

Блок 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. Почни проходити курс

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

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

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

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

Git Basics

CSS Fundamentals

• Flexbox
• CSS Grid
• Pre & Post Processing CSS
• Responsive Design
• CSS Methodologies

JavaScript Fundamentals

• Functions
• DOM
• DOM Events
• OOP Intro
• Ajax
• Frontend Optimization
• JS Tools
• JS Patterns
• JS Modules
• JS unit testing
• Front-End optimization

Попередні вимоги

• Знання англійської на рівні B1 і вище
• Навички самостійного навчання та самодисципліни
• Базові знання HTML, CSS та JavaScript
• Базове розуміння інформаційних технологій та концепцій розробки програмного забезпечення
• Практичний досвід програмування будь-якою мовою є додатковою перевагою

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

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

Програма занять призначена для студентів з попередніми знаннями у JavaScript, для початківців-розробників, які мають бажання поглибити свої знання про особливості розробки front-end у продуктах, а також для Middle developers, які хочуть систематизувати свої знання про front-end розробку.

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

Основи побудови додатка

• Правильний стиль проєктування та використання патернів як інструменти спрощення коду та розв'язування продуктових задач (Clean Code principles, принципи SOLID, GRASP, патерни проєктування)

Екосистема

• Front-end екосистеми (eslint, prettier, husky)
• Особливості мобільної та десктопної розробки

Архітектура

• Особливості фреймворків великої трійки
• Принципи побудови архітектури додатка

Надійність системи

• Правильне використання TypeScript
• Що таке контракти?
• Як потрібно писати тести
• Обробка помилок
• Моніторинг системи

SSR & SEO

• Робота серверного рендерингу, особливості та проблеми

SDLC

• Етапи, які проходить задача перед тим, як потрапити на production
• Підхід CI/CD, та як це допомагає проєктам рухатись швидше

Вимоги для проходження курсу

• Володіння HTML та CSS
• Базове знання JavaScript (знання синтаксису, структур даних та базових алгоритмів)
• Знання одного з популярних фреймворків (React, Vue, Angular)
• Навички адаптивної верстки
• Розуміння роботи з системою контролю версій GIT

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

• Попередня реєстрація на курс, з проходженням тестових завдань та співбесіди
• Доступ до матеріалів курсу залишається протягом 2 місяців після закінчення
• Домашні завдання та групові проєкти
• Найкращі студенти можуть отримати запрошення на співбесіду чи офер від компанії

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

• Андрій Попович - CTO
• Микола Коваль - Head of Front-End Guild
• Лев Давидов - Front-End Developer
• Олег Вязовий - Front-End Developer
• Андрій Шавловський - Head of QA
• Саша Ковріжних - Tech Lead Front-End Team

Курс ознайомить з основами HTML та CSS. Отриманні навички зможете застосувати на практиці та навчитесь перетворювати намальований дизайнером макет в живий сайт.

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

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

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

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

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

Введення у HTML

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

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

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

Введення в CSS

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

Шрифти

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

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

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

Flexbox

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

Розкладка CSS Grid

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

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

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

Графіка

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

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

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

Анімація

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

Створення веб-форм

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

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

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

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

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

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

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

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

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

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

• Фінальний модуль та отримання диплому.

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

• Заняття проходять у зручний час
• Практичні домашні завдання
• Додаткові переваги у пакеті "Pro"
• Доступ до особистого кабінету із записами занять

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

Дмитро Рябовол - Markup developer at Studytube.

Курс для вивчення та поглиблення знань з Front-end. Основним напрямком курсу є створення інтерфейсів користувача та правильне налаштування робочого оточення для ефективної роботи.

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

Модуль 1. Basic

HTML

• Introduction: what is Front end and Back end?
• Basic tags
• Tables

CSS

• Selectors
• inline-block, float layouts
• Flexbox
• Grid
• BEM, Preprocessors, Bootstrap
• Basic animation
• Pseudo-elements, Pseudo-selectors, dropdown
• Adaptive and responsive layouts

Модуль 2. PRO

JS

• Introduction: how do all languages work?
• Data Types, logic operations
• Variables
• Loop
• Array
• Function
• OOP, Solid
• Object, Class, Function Construction
• Event Loop, Call Context
• DOM
• Events
• WebStorage
• Promise, Async function
• Ajax, Restful API
• Npm, Node.js, Webpack

React

• Setup new project, create an app
• JSX, Props
• Hooks:
  • useState
  • useEffect
  • useMemo
  • useCallback
  • useRef
  • useContext
• Class Components:
  • set state
  • props
  • lifecycles

Routing

• Routes
• React Router
• Hooks:
  • useParams
  • useNavigate
  • useLocation

Redux

• Introduction (store, flux architecture)
• react-redux

Final Project

Bonus

• Basic TypeScript
• Basic Junit Testing
• Preparing for an interview

Модуль 3. Advanced

React

• Setup new project, create an app
• JSX, Props
• Hooks:
  • useState
  • useEffect
  • useMemo
  • useCallback
  • useRef
  • useContext
• Class Components:
  • set state
  • props
  • lifecycles

Routing Routes

• React Router
• Hooks:
  • useParams
  • useNavigate
  • useLocation

Redux

• Introduction (store, flux architecture)
• react-redux

TypeScript

• Unit Tests:
  • Jest
  • React testing Library

Final Project

Bonus

• Preparing for an interview
• Vue, Vuex

Вимоги для проходження курсу

• Мінімальний досвід у Web розробці (HTML, CSS, JavaScript) і / або участь у навчальних курсах по front-end

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

• Курс складається із теоретичних занять, низки домашніх завдань, онлайн майстер-класів та воркшопів
• Бонусом є вебінар "Interview Easy or Hard" з Sr. Recruiter в Sigma Software

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

Олександра Донцова - Software Engineer at Sigma Software

Створюючи програму курсу Front-End, викладачі IT-школи A-Level додали до неї всі необхідні та актуальні інструменти фронтенд розробника.

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

Модуль 1 - Верстка

Знайомство з HTML

• Роль FrontEnd у світі IT.Взаємодія "фронту" з "беком" і дизайнером
• Етапи життя проєкту
• Інструменти для розробки (редактор коду, Photoshop, devTools)
• Рендеринг сторінки
• Базові принципи верстки. Кросбраузерність і валідність - що це і чому це важливо
• Браузери
• Структура HTML-документа
• Взаємини блоків: вкладений, дочірній, сусідній, батьківський

CSS

• Що таке CSS
• Способи завдання стилів
• Селектори CSS
• Каскад ("вага" селекторів)
• Комбінування та угруповання селекторів. Ієрархія селекторів. Успадкування. Значення inherit
• Вбудовані стилі браузерів. CSS reset
• Блокова модель
• border
• Властивість display
• Потік
• Властивість float
• Позиціювання
• Властивість overflow
• Властивість transition
• Властивість transform
• CSS3-анімація

CSS-Flex-box

• Вбудовані стилі браузера
• Блокова модель
• border
• Box-sizing
• Властивість display
• Потік
• Властивість float
• clearfix
• Властивість overflow

Responsive

• Adaptive & Responsive
• Види "девайсів"
• CSS-інструменти для респонсування
• Налаштування для респонсування сторінки
• Медіа-запити CSS
• Breakpoints (контрольні точки)
• Навігація на сайті
• Pixel Perfect

Практична верстка

• Social networks за допомогою SVG-іконок
• Шрифти та їх підключення
• Практична верстка

Git

• Основи: команда diff
• Системи контролю версій
• Команда init
• Статуси файлів, команди status, add, commit, config, log
• Робота із віддаленим репозиторієм, ssh, ключі
• Основні команди

Linux

• WHO IS OPERATION SYSTEM
• UNIXWAY
• Automation, scripting, network tools (ssh, rsync, ftp, telnet)
• Networking
• Docker
• Docker-compose

Bootstrap

• Framework. Що? Навіщо? Чому?
• Bootstrap: встановлення, налаштування
• Компоненти Bootstrap
• Утиліти (Utilities)

Модуль 1

Модуль 2 - JavaScript

Що таке JavaScript?

• ECMAScript
• Модель документу
• Автоматичне керування пам'яттю
• Відсутність сурової типізації даних
• Відсутність засобів для введення та виведення інформації (не підтримується - - запис/читання файлів)
• Відсутність доступу до функцій операційної системи
• Обробка дій користувача та подій браузера

Початок роботи. Основи JS

• Приведення типів
• NaN | null | Infinity
• BigInt (ES10)
• Функції
• Методи рядків
• Практика інтегрування скриптів у сторінки

Завантаження скриптів

• Async
• Defer
• Методи рядків
• Практика інтегрування скриптів у сторінки

Типи даних

• Типи даних JavaScript
• Number (число)
• String (рядок)
• Boolean (логічний тип)
• Null
• Undefined (тип невизначений)
• Object (об'єкт)
• Symbol
• BigInt (спосіб представляти цілі числа більше 253 - 1)

Hoisting (Підняття)

• Hoisting (Підняття)
• Змінні
• Var
• Let та const
• Замикання

Рядки

• Створення рядка
• String
• Перенесення рядка
• Використання змінних
• Екранування символів
• Масив
• Методи

Числа

• Складання та конкатенація
• NaN та Infinity
• Методи
• Math

Об'єкти

• Об'єкт
• Створення об'єктів
• Використання об'єктів
• Копіювання об'єктів
• Дескриптори властивостей об'єктів
• Структура дескриптора
• Властивість configurable, enumerable, value, writable, get, set
• Клас Object
• Прототипи об'єктів
• Прототипне успадкування
• Властивість prototype

Масиви

• Масив
• Створення масиву
• Доступ до елементів масиву
• Зміна масиву
• Методи масивів
• toString/join
• unshift/push
• shift/pop
• concat/slice
• splicefilter/sort
• find/some/every
• reducemap

Змінні

• Оголошення змінних JavaScript
• Іменування змінних JavaScript

Різниця між var, let i const

• var
• let
• const

Приведення типів

• Приведення до рядка
• Приведення до
• Логічне приведення

Оператор умови (if)

• Оператор if
• Оператор switch
• Тернарний оператор

Цикли (for)

• while
• do...while
• for
• for...of
• for...in
• Використання continue i break

Функції (function)

• Функція
• Оголошення та виклик функції
• Аргументи
• Ключове слово return
• Стрілочні функції
• Контекст
• Область видимості

Date

• ISO Date
• Методи

ООП

• Що таке ООП?
• Класи в ООП
• Асоціація
• Успадкування
• Перевантаження
• Недоречне застосування
• Абстрактні класи
• Поліморфізм
• Інкапсуляція
• Аксесори (гетери та сеттери)
• Абстракція
• Рівень абстракції

Класи

• Оголошення функції
• Оголошення класу
• Успадкування
• статичні методи та властивості
• Дескриптори у класах
• get, set

Замикання. Таймери

• setTimeout()
• setInterval()
• setImmediate()

DOM

• Отримання елементів DOM
• Зміна елементів DOM
• Видалення елементів з DOM

Local i Session Storage

• Promise - async/await
• Виключення
• Fetch API
• Модулі
• Window

Модуль 2

Модуль 3 - React

Що таке SPA?

• Що таке SPA?
• SPA: Плюси
• SPA: Мінуси
• Складові SPA

Що таке React?

• Вступ до React
• Віртуальний DOM
• Інші особливості React
• Видача індивідуальних робіт

Що таке JSX?

• JSX
• Вбудовування виразів у JSX
• JSX це теж вираз
• Використання атрибутів JSX
• Використання дочірніх елементів у JSX
• JSX запобігає атакам, заснованим на ін'єкції коду
• JSX є об'єктами

CRA (Create React APP)

Рендеринг елементів

• Рендеринг елементу в DOM
• Оновлення елементів на сторінці
• React оновлює лише те, що потрібно

Компоненти і пропси

• Функціональні та класові компоненти
• Як відрендерити компонент
• Вилучення компонентів
• Композиція компонентів
• Пропси можна лише читати

Стан та життєвий цикл (Класовий компонент)

• Подивитися на CodePen
• Перетворення функціонального компонента на класовий
• Додамо внутрішній стан у клас
• Додамо методи життєвого циклу до класу
• Як правильно використати стан
• Односпрямований потік даних
• Ефекти без скидання
• Ефекти зі скиданням

Стан та життєвий цикл (Функціональний компонент)

• Що таке хук?
• useState
• Читання стану
• Оновлення стану
• useEffect

Props Drilling

• Що таке бурове встановлення?
• Чому props drilling - це добре?
• Які проблеми може спричинити Props drilling?
• Як уникнути проблем з props drilling?

Хуки (Hooks)

• Мотивація, що стоїть за Hooks
• Як Hooks співвідносяться з класами
• Приклад useState() Hook
• React відстежує state
• Multiple States
• Приклад useEffect() Hook
• Отримання даних та оновлення state
• Проблеми з продуктивністю під час використання Effects
• Приклад useContext() Hook
• Приклад useRef() Hook
• Різні типи hooks
• Правила Хуків

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

• Пам'ятайте про правила гарного тону
• Обробка форм із використанням State Hook
• Створення хука користувача
• Обробка великої кількості полів
• Альтернативний підхід
• Коли краще використовувати кожний підхід?

Робота з API в React

• Класові компоненти
• Функціональні компоненти
• Як запустити хук програмно чи вручну?
• Debounce - як оптимізація
• Завантаження індикатора завантаження
• Завантаження індикатора помилки
• Створюємо useNewsApi хук

Flux

• Що таке Flux?
• Flux vs MVC
• Архітектура Flux, як вона працює
• Детальний огляд Dispatcher
• Redux

useReducer

• Чому useReducer такий хороший?
• Використання useState
• Використання useReducer
• Думай як користувач

useReducer i useContext в React

• Навіщо мені потрібний Context API?
• Як контекст допомагає?
• Як створити контекст?
• Як використовувати контекст за допомогою хуків?
• Проблеми продуктивності
• Чому Context відмінно працює з useReducer?
• Чи потрібно замінювати Redux за допомогою useContext + useReducer?

Redux

• Установка Redux
• Файлова структура проєкту
• Наш перший сценарій
• Декілька слів про сервіси
• Завершення сценарію - ред'юсер та подання
• Декілька слів про дурні компоненти
• Декілька слів про бізнес-логіку
• Перехід до наступної стадії - список постів
• Екран постів - знову state-first
• Перший сценарій - список постів без вільтрації
• Наступний сценарій - фільтр постів
• Останній сценарій - зміст посту

Консультаційне заняття

Дипломна робота

Опис

Дипломна робота включає в себе створення сайт. Сайт має містити: реєстрацію та логін, індивідуальний кабінет (залежить від конкретного проєкту), роутинг, захищений роутинг за наявності ролей на беку, заливка файлів, структурне розташування коду на диску, один із фреймворків або своя верстка: Bootstrap, Ant Design. Структурна верстка, розбиття на компоненти за суттю. Сховище, Redux + кілька ред'юсерів, серверна взаємодія та тривалі сценарії: actionCreator + Thunk або Saga, робота з беком.

Захист дипломної роботи

Необхідно здати практику, передбачає демонстрацію робочого проєкту, відповіді на будь-які питання пов'язані з проєктом, демонстрацію коду на вимогу. І здати співбесіду на Junior Developer, сторонньому, незалежному експерту За обидва блоки можна отримати від 0 до 10 балів

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

• 24 заняття з англійської мови
• Тестова співбесіда з технічним спеціалістом
• Майстер клас по складанню резюме та проходження співбесід
• Консультація з рекрутером та тестова співбесіда
• Супровід до моменту працевлаштування менеджером, закріпленим за групою

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

• Повертайленко Євген - Frontend Developer
• Казначеєв Олександр - Frontend Developer
• Панченко Юрій - Senior markup development
• Жданов Кирило - Middle Full-Stack JS/Java Developer
• Ковальчук Сергій - Frontend Developer
• Макаров Ілля - Frontend Developer
• Яновий Ілля - Front End Engineer
• Найдьонов Данило - Senior Software Engineer
• Іван Гринкін - Full Stack developer
• Усачов Павло - Senior Magento Developer

Протягом курсу Ви розберетесь в 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