Курс Front-end

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