Взагалі не рекомендую цю школу! Жахливий сервіс, де вас не попередять про зростання цін, клієнтоорієнтованість взагалі жах! На усі зауваження відповідь дають «зафіксував», коли провина саме лежить на школі та надані послуг.
Роблять усі умови, щоб ви сплатили пакетом, кажуть що якщо щось дитині не сподобається то повернуть кошти , але повертають вони 30% з того , що повинні. Звичайно, що це прописано у оферті на 9 сторінок, але при продажу кажуть зовсім інше і в тебе не виникає навіть сумнівів, що таке може бути!! Я проходила навчання раніше і в інших школах і усе було прозоро, відповідально і тд, а тут просто пробили дно.
Ще важливе зауваження- при підписані договору заявляли, що ціна закріплюється на весь період навчання, але потім раптом все змінилось і навчання подорожчало на 15%. Ось такий сервіс, тємкі муткі
Курсы Frontend Developer: HTML и CSS
Сравнение всех курсов
- Frontend
У курсі буде продемонстровані приклади додавання інтерактивних і динамічних компонентів сторінки, різних елементів управління, ефектів і плагінів.
Програма курсу
Введення в jQuery
- Основи jQuery
- Обгортка jQuery
- Ненав'язливий JavaScript
- Елементи DOM
Базові селектори
- Базові селектори CSS
- Створення нових елементів HTML
- Маніпуляція обгорненим набором елементів
Маніпуляція властивостями і атрибутами
- Читання і установка значень атрибутів
- Зміна стилю відображення елемента
- Установка вмісту елементу
- Обробка значень елементів форми
Модель подій jQuery
- Модель подій DOM рівня 0
- Модель подій DOM рівня 2
- Модуль подій Internet Explorer
- Модуль подій jQuery
Анімація
- Приховування і відображення елементів
- Анімаційні ефекти при зміні візуального стану
Ефекти
- Створення своїх анімаційних ефектів
- Ефект масштабу
- Ефект падіння
- Ефект розсіювання
Допоміжні функції jQuery
- Прапори jQuery
- Управління об'єктами і колекціями JavaScript
- Динамічне завантаження сценаріїв
Розширення jQuery за допомогою власних модулів
- Основні правила створення модулів розширення для jQuery
- Створення власних допоміжних функцій
- Додавання нових методів обгортки
jQuery UI
- Вибір стилів і компонентів на сайті jQuery UI
- Робота з елементами керування jQuery UI
- Ефекти
Використання розширень
- FancyBox
- Form Plugin
- Dimension Plugin
- Live Query Plugin
Особливості курсу
- Практичні заняття і перевірка ДЗ
- Безкоштовний відеокурс
- Онлайн тестування і сертифікація
- JavaScript
- Frontend
Даний курс дозволить слухачеві, використовуючи різні шаблони кодування, зробити додаток максимально зручним для супроводу та розширення. Також в цьому курсі ви вивчите шаблони проектування, які допоможуть розробляти свої фреймворки і розуміти структуру інших бібліотек, написаних на JavaScript.
Програма курсу
Літерали і конструктори
- Перевага використання літералів
- Використання літералів об'єктів
- Використання літералів масивів
- Шаблони для створення користувацьких конструкторів
- Об'єкти - обгортки простих типів
Функції
- Особливості функцій в JavaScript. Термінологія
- Шаблони використання функцій зворотнього виклику
- Шаблони роботи з функціями
- Миттєві функції
- Самовизначні функції
- Замикання
- Мемоізація
- Каррірування
Шаблони створення об'єктів і повторне використання коду
- Шаблон створення просторів імен
- Шаблон "Модуль"
- Шаблон "Ізольований простір імен"
- Класичні шаблони повторного використання коду
- Сучасні шаблони повторного використання коду
Шаблони проєктування в JavaScript
- Singleton
- Фабрика
- Ітератор
- Декоратор
- Стратегія
- Фасад
- Проксі
- Медіатор
- Спостерігач
Шаблони роботи з DOM
- Анти шаблони роботи з деревом DOM
- Приклади правильної організації звернення до DOM
- Розробка сценаріїв, які працюють тривалий час
- Способи розгортання сценаріїв
- Мінімізація JavaScript коду
- Замір швидкості завантаження документа, оптимізація веб-документа
Особливості курсу
- Практичні заняття і перевірка ДЗ
- Безкоштовний відеокурс
- Онлайн тестування і сертифікація
Викладачі курсу
- Дмитро Охріменко - Експерт з побудови розподілених та веб-орієнтованих додатків
- Олена Хижняк - Web Frontend Developer
- Angular
- Frontend
В курсі Angular 6 Advanced ви дізнаєтеся, як створюються директиви і фільтри, основи використання реактивних підходів в програмуванні і в роботі з Observable, а також познайомитеся з відстеженням змін в Angular-проєкті.
Програма курсу
Користувальницькі директиви і компоненти
У цьому уроці ми вивчимо принципи створення структурних і атрибутивних директив. Це допоможе вам зрозуміти, як працюють директиви в Angular-додатку. Також в цей урок включені приклади створення призначених для користувача фільтрів (Pipe). Ви не тільки навчитеся створювати і використовувати фільтри, але і дізнаєтеся, які налаштування фільтрів можуть підвищити продуктивність програми.
Форма. Частина 1
У цьому уроці ми навчимося створювати користувальницький інтерфейс з використанням Model Driven підходу або реактивних форм. Крок за кроком ми створимо модель, прив'яжемо її до інтерфейсу і додамо логіку, виконує перевірку коректності введених користувачем даних. Також ми розглянемо принципи створення користувацьких валідаторів, а також дізнаємося, як працюють асинхронні валідатори в Angular.
Форма. Частина 2
У цьому уроці ми продовжимо розглядати роботу з формами в Angular. У прикладах буде показаний спосіб створення динамічних форм, які створюють елементи управління в процесі виконання програми, спираючись на модель даних. Також в ці уроки включені приклади створення компонентів, які використовують 3rd party бібліотеки.
Реактивне програмування. RxJS
Реактивне програмування - це підхід в розробці програмного забезпечення, який заснований на маніпуляції асинхронних потоків. У цей урок входять приклади роботи з Observable об'єктами та їх методами, які надає бібліотека Ext.js. Ви дізнаєтеся, як можна створювати вами об'єкти і використовувати різні методи, такі як filter, map, flatMap, debounce та інші. Також ви дізнаєтеся, як можна використовувати вами об'єкти при створенні сервісів в Angular.
Відстеження змін
Важливою частиною будь-якої бібліотеки або фреймворка для написання односторінкових додатків є механізм відстеження змін. У цьому уроці ви дізнаєтеся принцип виявлення змін у Angular-додатках, а також те, як можна вплинути на продуктивність програми, змінивши стратегію відстеження змін на рівні окремих компонентів.
Особливості курсу
- Практичні заняття і перевірка ДЗ
- Безкоштовний відеокурс
- Онлайн тестування і сертифікація
Викладачі курсу
- Дмитро Охріменко - Експерт з побудови розподілених та веб-орієнтованих додатків
- Сергій Патьоха - Senior Software Engineer at BIScience
- Олександр Гончаренко - Web Frontend Developer
- Анна Павлюк - Web Frontend Developer
- Олена Хижняк - Web Frontend Developer
- Поліна Соколенко - Web Frontend Developer
- Віталій Мазяр - Web Frontend Developer
- Оксана Дмитрієва - Web Frontend Developer
- Денис Ковтун - Web Frontend Developer
- Frontend
- WEB Developer / Webmaster
Курс XML складається з 5 занять на яких повноцінно розглядається це метамова. В ході курсу вивчаються семантика XML документів, таблиці стилів XSL, інструкції мови, атрибути, елементи, об'єкти.
Програма курсу
Знайомство з XML
На цьому уроці повноцінно розглядається технології XML і методи роботи з ними. У нього входить:
- Термінологія XML
- Робота з документами
- XSL розширювана мова таблиць стилів
- XLink, XPointer
DTD - штучна мова описання структури документа
- DTD - описання типів документу
- Побудова DTD
- Застосування DTD
- Перевірка структури за допомогою DTD
XML схеми
- Недоліки DTD
- Знайомство з XML схемами
- Основні елементи XML схем
- Описання типів, єлементів та атрибутів
- Перевірка документів по XML схемі
Знайомство з XSLT, XPath
- XSLT як засіб перетворень XML документа
- Мова XPath
- Осі вибірки
- Предикати
- Типи даних і функції XPath
Основні елементи XSLT
- Вузли-елементів
- Вузли-атрибутів
- Текстові вузли
- Створення коментарів і інструкцій обробки
- Копіювання вузлів
- Керуючі конструкції
- Умовна обробка
- Оператор вибору
- Циклічна обробка
- Сортування значень
Після закінчення курсу ви будете вміти:
- Розбиратися в особливостях мови розмітки XML: структурі, граматиці, синтаксисі і семантиці
- Працювати зі штучною мовою опису структури документа DTD
- Працювати з XML-схемами
- Застосовувати основні елементи мови XSLT у перетворенні XML-документів
Попередні вимоги
- Впевнене володіння персональним комп'ютером
- Навички роботи з текстовими редакторами
- Знання HTML, CSS
Особливості курсу
- Практичні заняття і перевірка ДЗ
- Безкоштовний відеокурс
- Онлайн тестування і сертифікація
- Frontend
Програма курсу
Основи верстки сайтів
- Введення у веб розробку
- Основи роботи з графічним редактором Figma
- Введення HTML, теги, отрибути, елементи
- Робота з об'єктами Form
- Вступ до CSS - властивості, правила, успадкування, каскадування, нормалізація та скидання стилів
- CSS стилі, робота зі стилями
- CSS потоки, позиціонування та розташування об'єктів по сітці
- Псевдокласи, псевдоелементи
- CSS3 та робота з анімацією
- FlexBox
- Робота зі шрифтами
Оптимізація верстки та знайомство з Frontend
- Адаптивна та чуйна верстка, основні правила створення адаптивного сайту
- Media-запити
- Препроцесор - SASS/SCSS, знайомство з LESS
- Вступ до jQuery
- Підключення, кастомізація та комплексна робота з плагінами
- Tabs, Slider
Основи JavaScript
- Редактори коду
- Спосіб підключення до HTML
- Суворий режим - "use strict"
- Змінні
- Типи даних
- Взаємодія: alert, prompt, confirm
- Базові операції
- Пріоритет операцій
- Оператори порівняння
- Як працюють логічні оператори
- Умовні оператори
- Тернарні оператори
- Оператор Switch Case
- Цикли
- Функції
- Рядки
- Числа
- Масиви. Об'єкти
VCS Git
- Встановлення та конфігурація Git
- Базова робота з Git (git add, git commit)
- Скасування змін у Git (git reset)
- Розгалуження Git (checkout)
- Робота з віддаленим репозиторієм
- Налаштування SSH
Робота з DOM
- Що таке DOM
- Доступ до елементів
- Вміст елементів
- Атрибути
- Класи
- Додавання подій
- Сплив і занурення
- Об'єкт події
- Делегування подій
Об'єкти та функції
- Об'єкти та прототипи
- Як працюють прототипи
- Створення та налаштування об'єктів
- Ітерація ключів об'єкту
- Як працюють замикання
- Що таке контекст
- Прив'язка контексту
- Рекурсія
Додаткові можливості JavaScript
- Обробка помилок
- Ajax
- Promise, async/await
- Генератори, просунута ітерація
- Модулі
- Fetch API
- Event Loop
Фреймворки
- Огляд React/Vue/Angular
- Базове застосування
- Проєкт
- Підготовка до співбесіди. Іспит
Результат після проходження курсу
- Впевнені знання з теорії HTML, CSS, SCSS, JS
- Чітке розуміння життєвого циклу розробки веб-продукту
- Розуміння кроссбраузерної, адаптивної верстки та семантичної html-розмітки
- Навички роботи з jQuery
- Знання алгоритмів, структур даних та загальних принципів організації коду
- Розуміння принципів ООП
- Досвід самостійної розробки програм JavaScript
- Практичні навички роботи з Git
- Навички роботи з одним із фреймворків (React/Vue/Angular)
Особливості курсу
- Можливість оплати курсу частинами
- Сертифікат після проходження курсу
- Курс збудований з урахуванням реальних вимог IT компаній
- Протягом усього курсу ведеться рейтинг успішності
- Додаткове заняття зі стратегії працевлаштування
- Frontend
Програма курсу
Модуль 1 - Основи верстки сайтів
- Введення у веб-розробку
- Основи роботи з графічним редактором Figma
- Введення в HTML, теги, атрибути, елементи
- Робота з об'єктами Form
- Введення в CSS - властивості, правила, успадкування, каскадування, нормалізація та скидання стилів
- CSS стилі, робота зі стилями
- CSS потоки, позиціонування та розташування об'єктів по сітці
- Псевдокласи, псевдоелементи
- CSS3 та робота з анімацією
- FlexBox
- Робота зі шрифтами
Модуль 2 - Оптимізація верстки сайтів та знайомство з Frontend
- Адаптивна та чуйна верстка, основні правила створення адаптивного сайту
- Медіа-запроси
- Препроцесор - SASS/SCSS, знайомство з LESS
- Введення у jQuery
- Підключення, кастомізація та комплексна робота з плагінами
- Tabs, Slider
- Основи JavaScript - змінні, функції, робота з елементами
Результати після проходження курсу:
- Впевнені знання mark-up та можливість продовжувати навчання у напрямку програмування (JavaScript, PHP, Java)
- Вміння самостійно створювати красиві та зручні сайти для Web та Mobile
- Власний готовий проєкт та приклади робіт, які можна показати на співбесіді
- Найкращі студенти отримають рекомендації для працевлаштування в IT компанії
Особливості курсу
- Є можливість оплатити курс частинами
- Наприкінці курсу надається сертифікат
- Курс збудований з урахуванням реальних вимог IT компаній
- Протягом всього курсу ведеться рейтинг успішності
- Бонусне заняття зі стратегії працевлаштування
- VueJS
- Frontend
Курс Vue.js складається з 6 уроків, на яких учні ознайомляться з новою бібліотекою JavaScript - Vue.
Програма курсу
Введення в бібліотеку Vue.js
Ознайомлення з бібліотекою Vue.js, історією створення, методи підключення і визначення на сторінці, а також знайомство з екземпляром об'єкта Vue(). Будуть розглянуті основні елементи - прив'язки і шаблони, їх мета і використання. Розбір основних прив'язок на сторінку, а також життєвий цикл примірника Vue.
Робота з формами
Ознайомлення з бібліотекою Vue.js, історією створення, методи підключення і визначення на сторінці, а також знайомство з екземпляром об'єкта Vue (). Будуть розглянуті основні елементи - прив'язки і шаблони, їх мета і використання. Розбір основних прив'язок на сторінку, а також життєвий цикл примірника Vue.
Умовне відображення даних
Ознайомлення з директивами умовного відображення об'єктів і масивів. Будуть розглянуті основні методи роботи з висновком масивів в призначений для користувача інтерфейс. Також в уроці дається визначення обчислюваним властивостям об'єкта Vue, фільтрів і спостерігачам.
Компоненти Vue.js
Вивчення компонентів, як частини примірника Vue, методами їх підключення. На уроці будуть розглянуті основні елементи компонентів, його параметри і поведінку. Використання компонентів в роботі з одними подіями, використання слотів у вкладених шаблонах, а також області видимості компонентів на сторінці
Анімація і переходи
Вивчення роботи анімації і переходів у Vue, компонента transition, основних класів появи і зникнення елементів Virtual DOM. Застосування групового компонента для списків. Буде показаний приклад Velocity бібліотеки для поліпшення режиму анімації. Розглянуто тему власних компонентів і застосування їх на сторінці.
Маршрутизація у Vue.js
Ознайомлення з основними відмінностями SPA і серверним рендерингом. Розібратися з основними програмами для роботи програми на локальному сервері. Розібрати поняття маршрутизації і розглянути компонент vue-router. Ознайомитися з видами маршрутів, а також з основними параметрами.
Особливості курсу
- Практичні заняття і перевірка ДЗ
- Безкоштовний відеокурс
- Онлайн тестування і сертифікація
- Frontend
Bootstrap 5 - це HTML, CSS, JavaScript фреймворк для розробки кросбраузерності веб-орієнтованих інтерфейсів. Bootstrap представляє набір інструментів від Twitter, створений для полегшення розробки web-додатків і сайтів, використовує CSS і HTML для друкарні, форм, кнопок, таблиць, сіток, навігації і т.д., а також додаткові розширення JavaScript, що спрощують роботу веб-розробника.
Програма курсу
Знайомство з Bootstrap 5. Типографіка
- Знайомство з фреймворком
- Способи підключення фреймворка
- Знайомство з Grid-System
- Заголовки і скорочення
- Блокові текстові елементи
- Цитати і вирівнювання
- Списки і таблиці
- Зображення і фігури
Компоненти Bootstrap 5
- Оповіщення
- Значок
- Хлібні крихти
- Картка
- Кнопки, групи кнопок
- Випадаючі списки
- Пагінація форми
- Інпут групи
- Навігація, навбари
- Підказка
- Прогрес бар
- Скролінг
- Адаптивне відео
JavaScript Bootstrap 5
- Перевірка форм
- Карусель
- Акордеон
- Списки груп
- Модальні вікна
Утиліти Bootstrap 5. Службові класи
- Межа
- Очищення
- Колір
- Відображення елементів
- Flexbox
- Розміри, позиціонування
- Відстань
- Форматування тексту
- Вертикальне вирівнювання
Особливості курсу
- Практичні заняття і перевірка ДЗ
- Безкоштовний відеокурс
- Онлайн тестування і сертифікація
Викладачі курсу
- Сергій Патьоха - Senior Software Engineer at BIScience
- Олександр Гончаренко - Web Frontend Developer
- Анна Павлюк - Web Frontend Developer
- Олена Хижняк - Web Frontend Developer
- Поліна Соколенко - Web Frontend Developer
- Дмитро Охріменко - Експерт з побудови розподілених та веб-орієнтованих додатків
- Анастасія Ткаченко - Web Frontend Developer
- Філіп Севене - Web Frontend Developer
- Віталій Мазяр - Web Frontend Developer
- Оксана Дмитрієва - Web Frontend Developer
- Ростислав Сілівейстр - Web Frontend Developer
- Олександр Петрик - FullStack Developer, CEO at Dinamicka Development
- Денис Ковтун - Web Frontend Developer
- TypeScript
- Frontend
В цьому курсі ви дізнаєтеся все, що необхідно для початку використання цієї мови програмування. Протягом 5 уроків, ви навчитеся користуватися інструментами для розробки і компіляції коду і освоїте синтаксичні конструкції, які є в TypeScript.
Програма курсу
Введення. Змінні та функції
- Навіщо використовувати TypeScript
- Синтаксис TypeScript
- Інструменти для роботи
- Налаштування фреймворками
- Створення HelloWorld додатки
- Типи даних в TypeScript
- Статична і динамічна типізація
- Ambient Declarations
- Об'єкти
- Функції, Arrow function
- Статичні типи
Класи і інтерфейси
- Використання модифікаторів доступу
- Accessors
- Спадкування і використання ключового слова super
- Робота з абстрактними класами
- Використання інтерфейсів
Generics
- Методи для роботи з масивами
- Визначення узагальненого типу даних (Generic)
- Generic і інтерфейси
- Приклад створення словника
- Обмеження при використанні generic
- Шаблон Iterator
- Використання Symbo
- Використання генераторів
Модулі і простори імен
- Використання просторів імен в TypeScript
- Визначення модуля
- Створення модулів
- Використання завантажувачів модулів
- Основи застосування Webpack
Практика
Даний урок присвячений практичному закріпленню матеріалу даного курсу
Особливості курсу
- Практичні заняття і перевірка ДЗ
- Безкоштовний відеокурс
- Онлайн тестування і сертифікація
Викладачі курсу
- Олена Хижняк - Web Frontend Developer
- Віталій Мазяр - Web Frontend Developer
- Оксана Дмитрієва - Web Frontend Developer
- Денис Ковтун - Web Frontend Developer
- Angular
- Frontend
Цей курс є частиною спеціальності Frontend розробник. Він допоможе вам вивчити основи платформи Angular.
Програма курсу
Введення до Angular
- Знайомство з фреймворком Angular
- Огляд необхідних інструментів для початку розроблення
- Створення додатку, огляд файлів та папок створеного проєкту
- Знайомство з синтаксисом та структурою коду на Angular
- Створення компонентів і їх реєстрація через CLI
- Компонентний підхід задання стилів
- Компоненти та модулі в додатку, а також те, як вони описані шаблоном Декоратор
- Додавання картинок/іконок до проєкту
Події та датабайдинг
- Основи маршрутизації і основні принципи виведення даних на сторінку
- Створення простого проєкту з маршрутизацією
- Задання різної логіки виведення даних
- Стилізація розмітки через інструменти Angular
- Розбір синтаксису запитів та технічної різниці між ними в їх використанні
Директиви, пайпи. Роль модулів Angular
- Використання директив
- Створення необхідних шаблонів, які повторюються в проєкті
- Перетворення даних за допомогою пайпів
- Модульна архітектура
Компоненти та їх робота
- Стилі компонентів
- Передача даних між компонентами
- Взаємодія компонентів
- Життєвий цикл компонентів
Основи роботи сервісів та їх роль у додатку
- Основи роботи сервісів
- Створення та реєстрація сервісу
- Локальні сервіси
- Область видимості сервісів та їх взаємозв'язок
Введення у HttpClient та RxJS
- Основи бібліотеки RxJS та її використаннядля роботи з асинхронністю
- Модуль HttpClientModule для взаємодії з сервером
Форми в Ангуляр
- Створення форм в Angular
- Двосторонній байдинг
- Реактивні форми. Відображення стану форми та її полів
- Валідатори
- Управління формою, її полями
- Асинхронні валідатори
Маршрутизація
- Основи маршрутизації, динамічні сторінки
- Динамічні сторінки і передача даних між ними
- Обмеження маршрутизації в Angular
Практичне заняття. Підготовка до роботи проєкту
Підготовка до роботи проєкту, налаштування маршрутизації, реалізація простого запиту на сервер для виводу інформації в блоках.
Практичне заняття. Створення окремих сторінок динамічною маршрутизацією
Створення окремих сторінок динамічною маршрутизацію і передача даних між сторінками.
Практичне заняття. Додавання форми з валідацією
Додавання форми з валідацією.
Після завершення курсу ви будете вміти:
- Розуміти роль та переваги Angular у веб-технологіях
- Створювати простий додаток, який буде складатися з компонентів, модулів та сервісів
- Налаштовувати маршрутизацію в додатку та передавати дані між сторінками
- Використовувати додаткові вбудовані інструменти для додатку, такі як: директиви, пайпи, сервіси, форми
- Виконувати запити та приймати відповіді з серверної сторони сайту/додатку
Особливості курсу
- Практичні заняття і перевірка ДЗ
- Безкоштовний відеокурс
- Онлайн тестування і сертифікація
Викладачі курсу
- Дмитро Охріменко - Експерт з побудови розподілених та веб-орієнтованих додатків
- Сергій Патьоха - Senior Software Engineer
- Олександр Гончаренко - Web Frontend Developer
- Анна Павлюк - Web Frontend Developer
- Олена Хижняк - Web Frontend Developer
- Поліна Соколенко - Web Frontend Developer
- Віталій Мазяр - Web Frontend Developer
- Оксана Дмитрієва - Web Frontend Developer
- Денис Ковтун - Web Frontend Developer
- Frontend
Пройшовши цей курс ви дізнаєтеся, як застосовувати передові технології, засновані на HTML5, для написання програм, що дозволяють максимально використовують можливості сучасних браузерів.
Програма курсу
Принципи побудови розмітки, Flex, Grid, шаблони сайтів
- Визначення CSS3 Grid Layout
- Підтримка Grid Layout браузерами
- Визначення сіток, колонок і рядків
- Властивості Grid для зображування контейнерів
- Методи окремих елементів для зображування
- Вкладені Grid
- Області Grid
Анімація та градієнти
- Властивість transition
- Створення переходів
- Різновиди трансформації
- Матриця трансформації
- Спільне використання трансформації із переходом
- 3D-трансформації
- Анімації
- Використання градієнтів
Робота з графікою на стороні клієнта
- Основи SVG
- Path та координати
- Різні можливості з фігурами
Canvas
- Ознайомлення з тегом canvas
- Промальовування ліній
- Малювання прямокутної області
- Заливка меж і градієнта
- Очищення прямокутної області
- Малювання кривих і дуг
- Додавання img
- Градієнтна заливка
- Додавання тексту та тіні до елементів
- Встановлення прозорості
- Трансформація елементів полотна
- Розгляд прикладів
Геолокація і налаштування карт для сайту
- Перевірка функціонала геолокації у сучасних браузерах
- Структура геолокації API
- Функції JavaScript у розмітці для пошуку розташування
- Функція зворотного геокодування
Знайомство з Node.js i Webpack
- Знайомство з nodeJS
- Створення проєкту і встановлення пакетів webpack
- Налаштування запуску проєкту
Sass основи
- Визначення SASS і перетворення формату SASS в CSS
- Вкладеність
- Використання змінних
- Використання @mixin
- Інтерполяція змінних
- Директива @if у SASS
- Імпортування та розширення файлів
- Директива @if у SASS
Практика
Написання макету сторінки з використанням вивчених інтернет-технологій
Практика
Особливості курсу
- Практичні заняття і перевірка ДЗ
- Безкоштовний відеокурс
- Онлайн тестування і сертифікація
Викладачі курсу
- Сергій Патьоха - Senior Software Engineer at BIScience
- Олександр Гончаренко - Web Frontend Developer
- Анна Павлюк - Web Frontend Developer
- Олена Хижняк - Web Frontend Developer
- Поліна Соколенко - Web Frontend Developer
- Дмитро Охріменко - Експерт з побудови розподілених та веб-орієнтованих додатків
- Анастасія Ткаченко - Web Frontend Developer
- Філіп Севене - Web Frontend Developer
- Віталій Мазяр - Web Frontend Developer
- Оксана Дмитрієва - Web Frontend Developer
- Ростислав Сілівейстр - Web Frontend Developer
- Олександр Петрик - FullStack Developer
- Денис Ковтун - Web Frontend Developer
- Богдан Мартиненко - Frontend Developer
- Тарас Заславський - Frontend Developer
- Владислав Бєлік - React Frontend Developer
- Олексій Татаренков - Frontend Developer
- Олексій Кучеренко - Тренер консультант напрямку Frontend
- React
- Frontend
На цьому курсі учні напишуть невеликий додаток за допомогою React, навчаться розбивати його на логічні частини та компоненти, попрактикуються в написанні стилів разом із CSS Modules, а також познайомляться з основними концепціями написання додатку за допомогою цієї платформи.
Програма курсу
Вступ до React
На уроці учні познайомляться з React, навчаться створювати простий додаток за допомогою Create React App.
JSX у React
На уроці учні познайомляться з JSX, навчаться писати прості компоненти за допомогою JSX.
Основи React
На уроці учні познайомляться з підвидами компонентів, дізнаються, що таке state у React компонентах, навчаться додавати події до елементів та працювати зі списками.
Стан та життєвий цикл
На уроці учні познайомляться зі станом та життєвим циклом в React компонентах, дізнаються різницю між функціональними та класовими компонентами, навчаться їх використовувати, а також коротко ознайомляться з Redux.
Форми
На уроці учні познайомляться з можливістю працювати з формами в React, а також з такими поняттями, як підйом стану та валідація з PropTypes.
Стилізація у React
На уроці учні познайомляться з можливістю стилізації компонентів у React, а також навчаться використовувати модулі CSS для стилізації.
Створення списку заміток
На уроці учні познайомляться з можливістю вибору типу компонента під час виконання, попрактикуються застосовувати знання props, state, lifecycle та інших, а також створять список нотатків за допомогою React.
Hooks
На уроці учні познайомляться з основними хуками React, принципами їх роботи та напишуть свій (кастомний) хук і закріплять пройдений матеріал на практиці.
Введення в роутинг
На уроці учні познайомляться з бібліотекою react-router, навчаться організовувати маршрутизацію у додатку.
Створення сторінки помилки
На уроці учні познайомляться із Запобіжниками, React.Fragment, Строгим Режимом у React, а також навчаться створювати сторінку помилки.
Створення модального вікна
На уроці учні познайомляться з Рефами, Context API і Рендер пропсами, створять модальне вікно з використанням контексту і рендер пропс.
Оптимізація та продуктивність React додатків
На уроці учні дізнаються, що React може бути повільним - зрозуміємо, коли це може відбуватись і як із цим боротися. Познайомимося з різними інструментами, які дозволяють виявити наявність вузьких місць у React додатках, інструментами для оптимізації та аналізу, а також розберемо "нормалізацію" сховища в Redux, з'ясуємо, чим гарні іммутабельні структури даних у JavaScript, і як зробити білд додатку стрункішим та худішим.
Практика
По завершенню курсу ви будете вміти:
- Застосовувати базові концепції побудови односторінкових додатків в екосистемі React
- Писати та розбивати додатки на логічні частини і компоненти
- Стилізувати додатки за допомогою CSS модулів
- Будувати прості односторінкові додатки за допомогою React
Особливості курсу
- Практичні заняття і перевірка ДЗ
- Безкоштовний відеокурс
- Онлайн тестування і сертифікація
Викладачі курсу
- Богдан Мартиненко - Frontend Developer
- Тарас Заславський - Frontend Developer
- Владислав Бєлік - React Frontend Developer
- Ростислав Сілівейстр - Web Frontend Developer
- Олексій Татаренков - Frontend Developer
- Олексій Кучеренко - Тренер-консультант напрямку Frontend
- Frontend
Курс HTML5&CSS3 Стартовий складається з 10 логічно взаємопов'язаних уроків, на яких учні застосовують практично теоретичні знання технологій HTML5&CSS3 для створення простих елементів веб сторінки.
Програма курсу
Введення у HTML. Типи елементів та атрибути
На початку курсу буде розглянуто, що таке HTML, для чого він потрібен і як пишуться його елементи. Ви дізнаєтеся про теги, форматування в HTML, про редактора в якому пишеться код початкової розмітки, з якою побудована будь-яка веб-сторінка і для чого використовуються коментарі в коді. Як додати на сторінку зображення, а також різні переходи за посиланнями. Дізнаєтесь перші типи елементів та їх різницю з можливими помилками під час написання коду.
Введення в CSS та визначення розмірів блоків
На занятті буде розглянуто способи підключення стилів на сторінку, види селекторів, за допомогою яких можна прив'язати стилі указаним елементам сторінки. І за якими принципами визначається пріоритетність записів у CSS. У цьому уроці студент розгляне базову поведінку елементів для формування ним розмірів. У яких випадках можливо, що контент випадатиме з елемента і псуватиме завнішній вигляд сторінки.
Робота з відступами, властивість margin, робота з текстом та видимістю елементів
Студент познайомиться із механікою роботи зовнішніх відступів у елементів. Дізнається, що таке провалювання (схлопування) і в яких випадках воно є. Переглянемо не явні відступи під час роботи з рядково-блочними елементами. Познайомиться з різними правилами CSS для стилізації тексту і як працює спадкування стилів елементів нащадків. Як можна приховувати елементи розмітки на сторінці та у чому різниця між різними способами.
Верстка з використанням Flexbox
Метою заняття є розібрати основні принципи роботи модуля Flexbox та навчити їх використовувати. Можливість задавати гнучку відстань між блоками та як визначаються їх розміри у деяких випадках. Поведінка зовнішніх відступів під час використання flexbox.
Комбінування селекторів та робота з фоном, властивість background
Комбінування дуже важлива частина при написанні коду, що розглянуто в структурі списків і таблиць, оскільки великі вкладеності необхідно створювати і розбирати постійно на етапі роботи з проєктом. Можливості звернень до елементів із псевдокласів та роботу пріоритету в таких структурах. На заняттях буде розібрано основні способи запису палітри кольорів у властивостях, де вказується забарвлення. У чому різниця встановлення прозорості елемента через opacity() та rgba(). Випадки додавання картинок через CSS та розміщення багато їх на одному елементі.
Семантична верстка
Студент дізнається про нові семантичні теги які з'явилися з HTML версії 5 та правила їх використання. Розглянуто структури простих сайтів із використанням семантичних тегів.
Форми
Метою даного уроку є ознайомлення з формами та їх призначенням. Розгляд елементів форм, їх можливостей та нюансів роботи як з функціоналом, так і зі стилізацією.
Позиціювання елементів
Метою даного уроку є знайомство з форматуванням елементів сторінки, завдання позиціонування через властивість position. Також буде розглянуто псевдоелементи та можливість реалізовувати просту анімацію для елементів.
Практика
Метою даного уроку є закріплення пройденого теоретичного матеріалу.
Практика
Метою даного уроку є закріплення знань на практиці верстаючи макет.
Особливості курсу
- Практичні заняття і перевірка ДЗ
- Безкоштовний відеокурс
- Онлайн тестування і сертифікація
Викладачі курсу
- Сергій Патьоха - Senior Software Engineer at BIScience
- Олександр Гончаренко - Web Frontend Developer
- Анна Павлюк - Web Frontend Developer
- Олена Хижняк - Web Frontend Developer
- Поліна Соколенко - Web Frontend Developer
- Анастасія Ткаченко - Web Frontend Developer
- Філіп Севене - Web Frontend Developer
- Віталій Мазяр - Web Frontend Developer
- Оксана Дмитрієва - Web Frontend Developer
- Ростислав Сілівейстр - Web Frontend Developer
- Олександр Петрик - FullStack Developer, SEO at Dinamicka Development
- Денис Ковтун - Web Frontend Developer
- Богдан Мартиненко - Frontend Developer
- Тарас Заславський - Frontend Developer
- Владислав Бєлік - React Frontend Developer
- Олексій Татаренков - Frontend Developer
- Олексій Кучеренко - тренер консультант напрямку Frontend
- Олександр Виноградов - Software Developer
- Frontend
Курс дозволить опанувати та зрозуміти принципи роботи HTML, CSS та JavaScript. На заняттях Ви навчитесь працювати з бібліотеками React.js, Redux, розумієте принципи побудови сучасних односторінкових додатків. Додатково отримаєте Soft навики, такі як робота в команді, розподіл задач, вміння презентувати себе та свої проєкти, критичне мислення та інше.
Програма курсу
Підготовка до початку курсу
Наші студенти починають вчитися фактично одразу після того, як успішно проходять тестування і зараховуються на програму. Кожен при цьому отримує підготовчі теоретичні матеріали з верстки та Javascript. Перед кожним стоїть перша теоретична задача, щоб одразу перейти до практики на конкретних прикладах.
Модуль: Soft Skills
- Основні комунікативні навички.
- Орієнтування у ситуації спілкування.
- Управління емоціями.
- Емоційний інтелект.
- Критичне мислення.
- Робота у команді.
- Самопрезентація.
Модуль 1. Частина 1: Основи HTML, CSS
- HTML – засіб логічної розмітки веб-сторінки
- Використовуючи структуру розмітки, можливо вносити дані на сторінку. У процесі першого модуля студенти навчаться описувати цю структуру, використовуючи HTML-теги
- Основи CSS
- Селектори CSS
- Оформлення елементів
- Управління розміром і положенням блоків на сторінці
- Поля і відступи
- Порядок верстки блоку
- Тестування результатів верстки
- Адаптивна веб-верстка
- Нюанси кросбраузерності верстки
- Базова анімація
- Стандарт CSS3
- Основні інструменти розробника
- Основи JavaScript
- Базові і об’єктні типи даних
- Перетворення типів
- Змінні і правила їх іменування
- Умови, оператори, масиви, цикли, функції
- Області видимості, замикання
- Контекст виклику
- Керуючі конструкції
- Обробка помилок
- Введення в браузерні події
- Localstorage/Sessionstorage
- Порядок обробки подій (event loop)
- Взаємодія з браузером DOM
- Функціями зворотного виклику (callback)
- Знайомство з бібліотекою Jquery
Модуль 2. Advanced HTML/CSS
- CSS методології на прикладі BEM
- Верстка з піксельної точністю
- Верстка з підтримкою Retina екранів
- Крос-браузерна верстка
- Web accessibility
- Mobile first
Модуль 3. Advanced JavaScript
- Основи об’єктно-орієнтованого програмування (ООП)
- Базові шаблони проєктування
- Основи функціонального програмування
- Можливості стандарту ES6/ES7 (ECMAScript)
- Також будуть розглянуті:
- Конструктори
- Прототипне наслідування (prototype)
- Рекурсія
- Модулі
- Strict mode
- Cookies
- Async/ Await
- Знайомство зі стандартами WebSocket, JSONP, AJAX, XMLHttpRequest, Promise, Single Page Application
- Загальна інформація про RESTful API
Модуль 4. Основи роботи з бібліотекою React.js.
- Верстка JSX
- Віртуальний DOM
- Components
- Робота з Props/State компонента
- React Router
- Redux
- Робота з ImmutableJS в React/Redux додатку
- Робота з middleware, Redux-thunk
- Redux-forms
- Тестування додатку за допомогою Jest та Enzyme
- Використання хуків у React
Воркшоп: Серверний JavaScript (BackEnd)
- Знайомство з технологією Node.js
- Інфраструктуру і використання пакетного менеджера NPM (package manager)
- Фреймворк Express.js
- Роботу з базами даних на прикладі MongoDB
Додаткові навички
- Робота з Git Bash
- Workflow від створення сховища до його відправки на віддалений сервер
- Робота з гілками
- Робота з файлами
Воркшопи та майстер класи
- Курс Front End включає майстер-класи, воркшопи та участь у вебінарах від ізраїльських та українських фахівців
Soft skills, технічна англійська і підготовка до співбесіди
Фінальний проєкт
Команди студентів курсу фронтенд будуть працювати над фінальним проєктом за методикою scrum. Кожен проєкт розпочнеться з реалізації задачі клієнта. По закінченню фінального проєкту студенти-девелопери будуть презентувати його перед членами Наглядової ради.
Бонусний модуль: Англійська для ІТ
Особливості курсу
- Живі заняття у вечірній час (19:00-22:00)
- Система оцінки знань
- Постійна підтримка ментора
- Робота над реальними проєктами у команді
- Увага до Soft skills
- Допомога у працевлаштуванні
Викладачі курсу
- Ігор Тоболяков - Front End Developer в Newfold Digital
- Віталій Мудрий - Software Engineer в Gravity
- Роман Марченко - Senior Frontend Developer, Freelance
- Арсеній Деркач - Front-end React developer в Revjet
- Максим Матвеєв - FrontEnd developer, Freelance
- Богдан Адмін - Senior Software Engineer, NDA
- Іван Сердюков - Web development lead at Clario
- Андрій Моргун - Middle front-end engineer, LULU Software
- Станіслав Чірва - Senior Frontend (JS) Engineer, EPAM Systems
- Angular
- Frontend
Студенти ознайомлюються з оновленим фреймворком Angular 15, дізнаються про основні його переваги, можливості, компоненти та інше. Слухачі навчаться користуватись формами та HTTP-протоколом, попрактикуються в роботі з TypeScript та вивчать усю функціональність фреймворку, необхідну для створення односторінкових SPA-додатків.
Програма курсу
Вступ в Angular
- Знайомство з фреймворком
- Основні переваги
- Унікальні можливості
- Знайомство та робота з TypeScript
- Основи модульної архітектури
Створення першого додатка та структура фреймворку
- Запуск першого проєкту
- Робота з CLI
- Організація коду в Angular-додатку
- Standalone Components vs NgModules
- Підключення змінних та функцій
Основи роботи з DOM в Angular
- Компоненти та їх структура
- Директиви (структурні та атрибутивні)
- Pipes (вбудовані та кастомні)
- Шаблонізація та робота з подіями
- Вступ до Angular Elements
Робота з даними та реактивністю
- Прив'язка даних (Data Binding)
- Декоратори та сервіси
- Взаємодія між компонентами
- Сигнали (Signal API) та Observables
- Використання HttpClient для роботи з API
Робота з формами
- Шаблонні та реактивні форми
- Валідація форм
- Отримання та обробка даних з форм
- Динамічні форми та кастомні валідатори
Життєві цикли компонентів
- Використання хуків життєвого циклу
- constructor, ngOnInit, ngOnDestroy та інші
- Детальний розбір роботи з компонентами
Маршрутизація та Lazy Loading
- Angular Router: основи та налаштування
- Динамічні маршрути та передача параметрів
- Захист маршрутів (Guards)
- Lazy Loading для оптимізації продуктивності
Оптимізація, тестування та Best Practices
- Робота з Change Detection та оновлення UI
- Використання NgRx або Signals для керування станом
- Юніт-тестування компонентів та сервісів
- Angular Material та інші UI-бібліотеки
Мінімальні вимоги
- Впевнене знання JavaScript
- Вміння працювати з системою контролю версій
Після курсу ви зможете
- Розуміти цілі розробки фреймворка і переваги його використання
- Розбиратися в принципах двостороннього зв'язування даних
- Працювати з формами, перевіряти їх та обробляти помилки
- Працювати з вбудованими директивами й створювати свої
- Створювати прості односторінкові додатки, використовуючи фреймворк
- Використовувати CLI (Command line interface) для створення і розробки проєкту
Особливості курсу
- Допомога ментора
- Практика
- Проєкт в портфоліо
- Сертифікат про проходження курсу
- Frontend
Від PSD-макету до адаптивного документа, разом з HTML5 та каскадними таблицями стилів CSS3. Так, це твій шлях до кар’єри у розробці — з 0 до junior front-end з заробітком від $800
Програма курсу
Модуль 1 - HTML5, CSS3. BEM. Bootstrap5. Адаптивна верстка. Верстка навчального проєкту
Заняття 1. Знайомство, вступна інформація. Перший кодинг
- Знайомство
- Що таке IT загалом і яке місце займає front-end у веб-розробці
- Етапи розробки проекту
- Огляд інструментів для розробки
- Структура документа HTML
- Основні теги
- CSS властивості
Заняття 2. Принципи роботи HTML та CSS. Figma. Практика
- Внутрішні стиль
- Три методи підключення CSS
- Рендеринг сторінок
- Блокові-малі
- Особливості HTML5. Поняття кросбраузерності та валідності
- Figma для fornt-end розробника
- CSS властивості
Заняття 3. Специфіка CSS. FTP. Практика
- Селектори
- Специфіка css
- Значення селектора, вага від типу звернення
- Посилання. Багатосторінкові сайти
- FTP. Робота із сервером
- Коментування коду
- CSS властивості
Заняття 4. Шляхи, імпорт скидання стилів. Методологія BEM. Практика
- Абсолютний та відносний шлях
- Імпорт стилів
- Скидання стилів за замовчуванням
- CSS reset
- Зображення як частина контенту
- Методологія БЕМ. Неймінг класів. Призначення, актуальність, плюси та мінуси
- CSS властивості
Заняття 5. Таблиці, flexbox layout. Практика. Робоче оточення
- Верстка таблиць
- Flexbox layout
- Робоче оточення або що має бути встановлене. Приклади використання
- CSS властивості
Заняття 6. Flexbox layout. Псевдоелементи. Позиціонування елементів
- Flexbox layout
- Позиціонування елементів, властивість position, static, relative, absolute, fixed, sticky: детальний розгляд кожної поведінки
- Псевдоелементи after та before
- Навичка гуглити
- CSS властивості
Заняття 7. Стани :hover, :active, :focus. Спрайти. Квіткоутворення
- CSS псевдоклас :hover, :active, :focus. Порядок зйомки
- Концепція спрайт. Технічне застосування. Призначення, актуальність, плюси та мінуси
- Семантична верстка
- Верстка навігація соціальних мереж із застосуванням спрайтів
- Квіткоутворення. rgb. hex. Альфаканал та непрозорість
- Навичка гуглити
- CSS властивості
Заняття 8. Шрифти, змінні css, функція calc()
- Підключення шрифтів. Що таке безпечні шрифти?
- google fonts огляд, застосування
- Псевдоклас: root
- Використання змінних у CSS. Призначення, актуальність, плюси та мінуси
- Функція calc() математичні операції CSS
- Навичка гуглити
- CSS властивості
Заняття 9. Псевдокласи. Селектори атрибутів
- Псевдокласи: first,: last,: nth-child. Приклади використання практично
- Звернення до силектора, різноманітність методів
- Синтаксис селекторів атрибутів
- Вендорні префікси
- Адаптивний шрифт (px, rem, em, vw). Робота з макетами
- CSS властивості
Заняття 10. Форми. Javascript старт. JQuery. jQuery-Mask
- Форми. Призначення, принцип роботи
- Атребути тега input
- Теги для верстки форм
- Стилізація елементів форм
- Що таке JQuery
- Презентація плагіна jQuery-Mask.js
- Реалізація маски введення телефону засобами jQuery-Mask.js
- CSS властивості
Заняття 11. Стилізація тега select. jQuery Nice Select. Градієнти. Паралакс
- Презентація плагіна jQuery Nice Select
- Підключення до проєкту jQuery Nice Select
- Стилізація checkbox/radio
- Лінійні і радіальні градієнти. Приклади використання
- Паралакс
- CSS властивості
Заняття 12. Гумова верстка. Медіазапит
- Верстка таблиці тегів
- Гумова верстка, приклади та правила
- Медіа-запити. Використання медіавиражень. Актуальні брекпоінти
- mobile/desctop first. Призначення, актуальність, плюси та мінуси
- Адаптуємо таблицю тегів
Заняття 13. Фреймворк bootstrap5 знайомство
- Презентація фреймворку bootstrap5
- Підключення. Вивчення розмітки та breakpoints
- Використання компонентів
- Розсмілення класів
- Структура розмітки bootstrap5. Система сіток
Заняття 14. bootstrap5 адаптивна верстка
- Поглиблене вивчення системи сіток та структури розмітки
- Адаптація. Детальний аналіз застосування шести точок скидання фреймворку
- Кастомізація компонентів під потреби проекту
Модуль 2 - Анімація. Робота з плагінами jQuery. SVG
Заняття 15. Властивість перетворення. Анімація
- Детальний аналіз якості transform і його значень
- Ключові кадри Keyframes
- Keyframes + transform
- Анімація "Розкадрування"
- Застосування фреймворку bootstrap у розмітці лекції
Заняття 16. SVG. Анімація SVG. Слайдер slick.js
- SVG у HTML. Вступ
- Стилізація об’єктів SVG
- Анімація SVG об’єктів
- Анімація по заданій траекторії
- Презентація сладера
- Підключення. Застосування. Натсройка. Стилізація
- Застосування фреймворку bootstrap у розмітці лекції
Заняття 17. Анімація wow.js та animate.css. aos.js. Слайдер slick.js
- Презентація бібліотеки wow.js Підключення. Розбір атребутів
- Застосування
- Презентація бібліотеки animate.css Підключення. Розбір атребутів
- Застосування
- Презентація бібліотеки aos.js Підключення. Розбір атребутів
- Застосування
- Застосування фреймворку bootstrap у розмітці лекції
Заняття 18. fullPage.js
- Презентація jqeary плгін fullPage.js
- Підключення. Розбір атребутів. Застосування
- Застосування фреймворку bootstrap у розмітці лекції
Заняття 19. jquery.multiscroll.js
- Презентація jqeary плагін jquery.multiscroll.js
- Підключення. Розбір атребутів. Застосування
- Застосування фреймворку bootstrap у розмітці лекції
Заняття 20. Start VanillaJS. Фреймворк PaperCSS
- Фреймворк PaperCSS
- Презентація фреймворку PaperCSS
- Підключення. Вивчення розмітки та breakpoints
- Використання компонентів
- Розсмілення класів
- Структура розмітки bootstrap5. Система сіток
- Практичне застосування PaperCSS
Заняття 21. Javascript. Фреймворк Neomo. Робота DOM деревом. Цикл forEach. Отримання атрибутів. Рух миші. Реалізація складного інтерактивного SVG об'єкта
- Фреймворк Неомо
- Презентація фреймворку Neomo
- Підключення. Вивчення розмітки та breakpoints
- Використання компонентів
- Розсмілення класів
- Структура розмітки Neomo. Система сіток
- Практичне застосування Neomo
Заняття 22. Javascript. Фреймворк Bulma. Конструкція if, else if, else. Медіавирази. window, onload, onresize, innerWidth
- Фреймворк Bulma
- Презентація фреймворку Bulma
- Підключення. Вивчення розмітки та breakpoints
- Використання компонентів
- Розсмілення класів
- Структура розмітки Bulma. Система сіток
- Практичне застосування Bulma
Заняття 23. Бібліотека lottie.js, анімація на json
- Що таке json і навіщо він потрібний
- Бібліотека lottie.js
- Презентація фреймворку lottie.js
- Підключення
- Практичне застосування lottie.js
- Реалізація анімації із застосуванням формату json
Модуль 3 - JS, Git, Gulp, Sass. Верстка проєкту
Заняття 24. Git, Node.js, Gulp, Sass, Include. Видача складання проєкту. Старт проєкту
- Що таке node.js, npm, Gulp. Принципи взаємодії
- Огляд популярних плагінів для Gulp
- Ідеальність верстки. PerfectPixel
- Огляд плагінів
- Що таке Git. Принципи роботи. Git Bush
- git clone, add, commit, push
- Верстка проєкту
Заняття 25. Git, Gulp, Sass.URL-encoder for SVG. Генератор HTML-дерева. Верстка проєкту
- Синтаксис scss. Переваги та актуальність
- git branch, checkout, gitk, відкат комміту
- Переміщення файлами в командному рядку
- Генератор HTML-дерева
- URL-code для SVG
- Верстка проекту
Заняття 26. Git, Gulp, Include. Верстка проєкту
- Include. Преимущества и актуальность
- Git merge
- Верстка проекта в разных ветках, мёрж веток
Заняття 27. Git, Gulp, API. Оптимізація зображень. Верстка проєкту. VSC-Configure Users Snipets
- VSC – Configure Users Snipets. Створення власних сніпетів
- Підключення API TinyPNG
- Верстка проєкту
- GitHub Pages
- Командна робота з гітом
Заняття 28. Git, Gulp, мовна панель vannila.js таби. Верстка проєкту
- Мовна панель vannila.js
- Верстка проекту
- Командна робота з гітом
- Підготовка до співбесіди
- code review учнів
Заняття 29. Git, Glup, vannila.js таби. Верстка проєкту
- Таби vannila.js
- Верстка проекту
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Заняття 30. Git, Glup, vannila.js burder-menu. Верстка проєкту
- Burger-menu vannila.js
- Верстка проекту
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Заняття 31. Git, Glup, vannila.js акордеон. Верстка проєкту
- Акордеон vannila.js
- Верстка проекту
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Заняття 32. Git, Glup, vannila.js scroll-to-top. Верстка проєкту
- Кнопка scroll-to-top vannila.js
- Верстка проекту
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Заняття 33. Git, Gulp, vannila.js fixed-header. Верстка проєкту
- vannila.js fixed-header
- Верстка проєкту
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Заняття 34. Git, Glup, vannila.js відстеження блоку на сторінці. Верстка проєкту
- vannila.js відстеження блоку на сторінці. Заклик до дії
- Верстка проекту
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Заняття 35. Заняття з Program Manager
- Принцип управління проєктами/продуктами в ІТ Комунікація та ролі у класичному менеджменті
- Особливості команди та комунікації в Agile
- SCRUM як методологія трансформер Estimates або як оцінювати завдання
- Kanban
Заняття 36. Оптимізація проєкту. Pagesspeed оптимізація. Markup Validation Service. Генератор HTML-дерева. Верстка проєкту
- Pagespeed оптимізація
- Оптимізація СSS
- Оптимізація JS
- Оптимізація зображень
- Знайомство із сервісом validator.w3.org
- Виправлення помилок HTML
- Контроль класнеймінгу методології BEM
Заняття 37. Огляд популярних фреймворків та CMS
React, Angular, Vue, Wordpres, Opencart. Карта росту
Заняття 38. Розмова з кар'єрним менеджером
- Як і де шукати роботу для початківця і які інструменти при цьому використовувати
- Як правильно зробити резюме і яка інформація у ньому є надважлива, а що буде зайвим
- Як створити профіль на Linkedin, щоб його могли побачити потенційні роботодавці
- 7 порад, які допоможуть пройти онлайн співбесіду набагато успішніше
- Q&A
Особливості курсу
- Безкоштовна IT англійська
- Додаткові матеріали
- Кар'єрний менеджер
- Лекція Project Manager
- Діджитал диплом для Linkedin
Викладачі курсу
- Дмитро Максюта - Senior Front-end Developer
- Ростислав Суслов - Middle Front-end Developer
- Євген Велигора - Middle Front-end Developer
- Frontend
Створюючи програму курсу 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
- Frontend
Програма курсу
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
- Базове розуміння інформаційних технологій та концепцій розробки програмного забезпечення
- Практичний досвід програмування будь-якою мовою є додатковою перевагою
Як долучитися до програми
- Зареєструйся
- Пройди тест з англійської мови, який буде доступний у твоєму профілі
- Пройди технічний тест
- Отримай запрошення на співбесіду з рекрутером
- Отримай запрошення в групу та насолоджуйся навчанням
- Frontend
Frontend курси DEXA передбачають велику кількість практичних завдань, підготовку до працевлаштування, та міні тренінги з пошуку клієнтів та роботи. Завдяки гнучкій системі навчання в DEXA ви зможете легко впоратися з проходженням курсу, об'єднуючи його з вашою роботою, чи іншими зобов'язаннями. 2 заняття на тиждень виконанні в записі, та 1 заняття практики та створення проєкту з обговоренням в Zoom відбувається ввечері.
Програма курсу
Що таке Web. Структура HTML
- Що таке веб і як він працює
- Знайомство з базовими тегами та атрибутами
- Створення текстових та блочних елементів, додавання зображень, відео та посилань
- Основні помилки у записах тегів
- Семантична верстка, HTML5 теги
- Класифікація тегів: лінійні та блокові
- Модель форматування тексту: заголовки та абзаци. Елементи p, h1..h6. Вирівнювання тексту блокових елементів: атрибут align
- Класифікація тегів: логічне та фізичне форматування
Введення в CSS
- Знайомство з CSS, його синтаксисом та способом оголошення
- Користування браузерною консоллю та знаходження помилок
- Колір, розмір елементів
- Блочна верстка, поєднання селекторів CSS
- Фон, позиціонування фону, градієнт
- Методологія BEM, кросбраузерність, валідність коду
- Псевдокласи та псевдоелементи
- Адаптивна верстка
- Препроцесори SASS/SCSS, LESS
- Фреймворки Bootstrap, Animation.css, Semantic-UI
- Система контролю версій Git
- Фінальний проєкт (Повноцінний адаптивний сайт під всі пристрої, розміщений в інтернеті)
JavaScript
- Conditional Statements
- If, else if, else
- Конструкція switch
- Цикли for, while, do while
- Function Expression, Function Declaration
- Рекурсія, замикання та інші цікаві речі
- Array. Способи оголошення масиву та робота з ним
- Робота з DOM за допомогою JavaScript
- SetTimeout i setInterval
- Фінальний проєкт (Слайдер, Свайпер, Вспливаюче вікно, Таби, Таймер)
JavaScript (Advanced)
- Поняття ООП в JavaScript
- Що таке наслідування, його використання та приклади
- Здійснення пошуку за допомогою регулярних виразів
- Використання регулярних виразів для валідації
- Що таке Gulp, Webpack і для чого вони потрібні
- Формат JSON, Метод JSON.parse, JSON.stringify
- LocalStorage / SessionStorage
- Конструкція try..catch
- HTTP запити. Що це? Як працюють?
- Фінальний проєкт (Блог, Новинний портал)
Мова програмування TypeScript
- Встановлення TS і запуск файлів
- Використання системи типів у функціях
- Спеціальний тип any. Практика типізації коду
- Тип never null i undefined
- Типізація об'єктів і деструктуризація
- Кортежі (Tuples). Об'єднання (Union)
- Примітивні літеральні типи (Literal types)
- Generics (Узагальнення), що це і навіщо потрібно
- Фінальний проєкт
Фреймворк Angular
- Що таке Angular і які ще є фреймворки
- Створення додатка, огляд файлів та папок
- Передача параметрів із компонентів
- Створення компонента за допомогою Angular CLI. Вставка значень в текст (інтерполяція)
- Зв'язування даних (bindings). Робота із подіями (Event Bindings)
- Додавання динамічних класів із директивою ngClass. Налаштування стилів за допомогою директиви ngStyle
- Цикли за допомогою ngFor. Використання фільтрів (pipes)
- Роутинг, GUARDS
- Створення об'єктів з POST RxJS оператори та індикатор завантаження
- Фінальний проєкт (Повноцінний інтернет магазин з кошиком, адмін панелю, та взаємодія з бекендом)
Що ти будеш мати і вміти після курсу:
- Верстати сайти з дизайн-макетів з Photoshop та Figma, використовуючи HTML та CSS
- Розробка програм, використання інструментів розробника в браузері та відлагодження коду.
- Вміти ефективно використовувати CSS і JS бібліотеки та плагіни зі зрозумінням їхнього функціоналу.
- Майстерно володіти системою контролю версії Git та користування GitHub
- Мати високий рівень майстерності у роботі з JavaScript і TypeScript
- Розуміти та використовувати базові шаблони проєктування і принципи створення проєктів
- Створювати великі та складні веб-додатки з використанням Angular
- Велике портфоліо практичних робіт які не відрізняються від реальних проєктів
- Підготовку для проходження співбесід, та знання як і де знайти клієнтів і роботу
Особливості курсу
- Онлайн курс
- Запис занять
- Ніякої води
- Актуальний матеріал
- Постійна підтримка ментора та розбір завдань
- Сертифікат про проходження курсу
- Можлива оплата частинами
- Зручний графік занять
- Портфоліо робіт
- JavaScript
- Frontend
Програма курсу
Основи
- Змінні
- Типи даних
- Браузерні функції
- Перетворення типів даних
- Базові оператори, математика
- Оператори порівняння
- Оператор 'if', '?', 'switch', '??'
- Console, comments
Цикли
- Цикл for
- Цикл while
- Цикл do...while
- Цикл for in
- Цикл for of
Функції
- Основи функцій
- Function Expression
- Стрілочні функції
- Область видимості функції
- Замикання функцій
Масиви
- Основи
- Методи масивів
- Перебирання масивів
- Map i Set
- Spread i Rest
- Деструктуризація
Дата та час
- Об'єкт дати
- setTimeout() та setInterval()
DOM та робота з браузером
- DOM
- Пошук по елементам
- Зміна елементів
- Перебирання
- Створення, вставка та видалення
- Робота з подіями
- Події миші
- Події клавіатури
- Робота з формами
Інструменти які ти вивчиш на курсі
- JavaScript
- VS Code
- GitHub
Навички які ти отримаєш після курсу
- Вміння самостійно робити програми рівня панелі адміністратора, та виявляти й виправляти помилки в коді
- Глибоке розуміння мови JavaScript, синтаксису, типів даних, змінних, функцій та об'єктів
- Вміння застосовувати захоплюючі ефекти на сторінках та реалізовувати інший цікавий функціонал
- Вміння впевнено представляти себе на співбесіді та розвивати свої SoftSkills
Викладачі курсу
Владислав Ралець - Front End Developer at CGI
Подать заявкуСтраницы
Читайте нас в Telegram, чтобы не пропустить анонсы новых курсов.
Отзывы о курсах
У школі сподобалося, що ніхто не тягне кота за хвіст. Все чітко, по темі і з купою практичних задач. Брала курс Front-end. Вперше написала сайт, який відкривається не тільки в мене на ноуті. Вдячна викладачу за терпіння.
Як учасник стажування хочу підтримати компанію після відгуку нижче. Як колись написав один з учасників - "це вже не курси, а симуляція реальної роботи і ніхто не буде водити вас за ручку". Зі своєї сторони хочу підтвердити, що стажування проходить на дуже хорошому рівні для тих, хто прийшов туди за досвідом. Прикольний доволі складний проєкт, на момент моєї участі був доволі активний чат учасників, які допомагали один одному.
Після 10 років важкої фізичної праці на меблевій фабриці я й не сподівався, що в моєму житті щось може кардинально змінитись. Але бажання навчитися чомусь новому, спробувати себе в чомусь іншому й нарешті відчути повагу до своєї праці підштовхнуло мене до програмування.
Чесно кажучи, все це «айтішні» розповіді про басейни, більярди, фітнес-зали, гнучкий графік і круте ставлення на роботі здавалося мені вигадкою. Але вирішив ризикнути. Вступив на курс. І знаєте що? Вже через кілька тижнів зрозумів - це моє.
Було важко. Деякі речі давались із боєм. Але цікавість і підтримка менторів тримали на плаву. Найбільшим шоком стало те, що вже через два місяці після старту навчання мені запропонували пройти співбесіду на позицію верстальника в одній компанії. Пройшов. З першого разу. Після 10 років, де максимум що змінювалося — це розміри меблів.
Зараз я вже на третьому місяці випробувального терміну. Працюю з HTML, CSS і JavaScript. Робота не легка, але я кайфую. Радію, що наважився. І хочу сказати всім, хто сумнівається: у вас усе вийде, якщо не здаватись.
Дякуємо за ваш надзвичайно щирий і надихаючий відгук!
Ваша історія - це найкраще підтвердження того, що зміни можливі в будь-якому віці й з будь-якого старту. Ви - приклад сили волі, наполегливості та віри в себе. Дуже радіємо, що навчання стало для вас тим самим кроком, який відкрив нові можливості та новий етап життя.
Пишаємося, що ви змогли знайти своє місце в ІТ і вже працюєте за спеціальністю! Нехай далі буде ще більше професійних перемог, задоволення від роботи та впевненості у власних силах. Дякуємо, що обрали GoIT і поділилися своєю історією!
