Курси Frontend Developer: HTML та CSS

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

CSS/HTML

• Основи Git. GitHub
• Figma. Photoshop
• Контент. Семантика. HTML теги. Атрибути. Валідація
• Введення в CSS. Синтаксис. Селектори
• Одиниці виміру
• Стилізація текстів. Шрифти. Наслідування
• Блочна модель і позиціонування
• Графіка на сторінці. <img/>. Background. Тіні
• Анімація в CSS
• Адаптивний веб-дизайн
• Основи Twitter Bootstrap

JavaScript

• Знайомство з JS
• Змінні. Типи даних
• Оператори
• Умовні оператори
• Цикли
• Функції
• Робота з числами і текстом
• Дата і час
• Об'єкти
• Наслідування
• jQuery (взаємодія з вибіркою)

Vue.js

• Основи Vue.js
• Умови, списки
• Основи компонентів
• Події, робота з формами
• AJAX
• Слоти, користувацькі події
• Переходи і анімація, слайдери зображень
• Маршрути (Vue-Router)
• Vuex або глобальне сховище
• PWA

По закінченню курсу ви:

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

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

• Онлайн навчання
• 2 заняття на тиждень по 2 години
• Сертифікат про проходження курсу
• Підтримка ментора

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

Денис Скоров - Full Stack Developer

Курс складається з двох блоків: hard skills (занять з розробки сайтів Front-End - отримання професійних навичок) та Soft skills (занять з управління собою та командою, розвитку персональних навичок). Навчаємо підлітків з нуля. Вступне тестування на рівні Beginner - на логіку та базове володіння комп'ютером. Модуль Працевлаштування - робота з реальними замовниками, симуляція проходження співбесід, оформлення професійного портфоліо та резюме тощо.

План курсу

Освітні результати

Hard skills (Рівень Beginner):

• 4 створених власних сайта
• Критичне та креативне мислення
• Основи типографіки
• Основи теорії кольору
• Принципи вебдизайну
• Розгортання сайту на своєму домені
• Основи програмування мовою JavaScript
• Робота з DOM-елементами
• Створення своєї гри у Web
• Робота з анімаціями
• Основи роботи з CSS Frameworks
• Робота з HTML\CSS
• Робота з API
• Створення адаптивного UI

Hard skills (Рівень Advanced):

• Знання на рівні Junior спеціаліста
• Створення складних web додатків
• Досвід проектування UX та прототипування додатків
• Вміння писати асинхронний код
• Розгортання базового сервера
• Вміння верстати складні дизайни
• Grids, Flexboxes, CSS Tricks
• Принципи Mobile First
• Ключова та програмувальна анімація в web
• Робота з Canvas та растровою графікою
• Проєктний менеджмент з нуля до релізу
• Досвід роботи самостійно, в парах та у великих командах в різних ролях, актуальних у сфері IT
• Trello
• Участь в унікальному модулі Працевлаштування, результатом якого будуть реалізовані персональні та командні комерційні та соціальні проєкти, пітчі перед експертами сфери IT
• Можливість дізнатись, як влаштуватись на першу роботу в компанію, працювати на фрілансі або заснувати свій бізнес
• Отримати перші замовлення, роботу або інтернатуру після закінчення курсу

Soft skills:

• Емоційний інтелект
• Самоідентифікація
• Лідерство
• Цілепокладання
• Мотивація та дисципліна
• Тайм-менеджмент
• Самопрезентація
• Комунікація - конфліктологія - перемовини
• Мистецтво публічного виступу
• Робота в команді та з замовником

Результат курсу

IT сфера цінує знання та досвід. Підліток отримує:

• Профорієнтацію, підготовку до вступу у профільний ВНЗ (вже після рівня Beginner)
• Здатність працювати на рівні Junior IT спеціаліста (після рівня Advanced)
• Професійне портфоліо власних та командних робіт
• Сертифікат о проходженні кожного рівня (Beginner, Advanced)

Перша робота:

• Рівень Beginner дає базу та розуміння напрямку подальшого розвитку
• Рівень Advanced є професійним, тому дозволяє працювати на фрілансі
• Програма навчання складається із командних проєктів та їх захисту (пітчів) перед експертами сфери та HR менеджерами
• В тому числі таким чином підлітки знаходять свою першу роботу або стажування в компаніях
• Також в нас працює кар'єрний сервіс для випускників Ampli з пошуку стажування та першої роботи

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

• Тривалість навчання - 6 місяців (24 тижнів/занять)
• Онлайн навчання під контролем наставника - IT-спеціаліста та супроводом стаді-менеджера плюс 4 персональних онлайн заняття з наставником
• Завдання для роботи серед тижня: відео-підручник (3-5 відео на тиждень), тести до нього, практичні завдання, додаткові матеріали (галузеві статті, ін.). Перевірка завдань тренером. Спілкування у чаті
• Заняття у зручний для підлітка час. У середньому 2-5 годин/тиждень
• Онлайн-практикуми з тренером по soft skills (надпрофесійні навички) раз на тиждень (1.5 години)
• Зворотний зв'язок для батьків:
  • раз/місяць статус навчання по програмі від стаді-менеджера
  • раз/три місяці - відгуки наставників

Автори програми

• Роман Мордюк - AVA.codes
• Владислав Омельченко - LumoSpark
• Назар Галайко - galaikonazar.com.ua
• Євген Вінійчук - Youshido
• Юрій Кабай - Levi9
• Nick Rollinson - Mews
• Роман Балата - ekreative
• Ігор Бондарчук - GlobalLogic
• Олексій Горносталь - CloudWorks
• Ярослав Виговський - Falcrum/GlobalLogic
• Василь Нагуляк - ekreative
• Назар Барчук - Nasdaq

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

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

Введення в JavaScript

• Зародження JS
• Особливості та вимоги до студентів
• Визначення об'єктів, властивостей та методів
• Базові методи виводу строк на екран
• Вставка в HTML

Змінні та типи даних

• Змінні
• Методи вводу об'єкта window
• Типи даних
• Оператори

Алгоритми та умови

• Вирішення логічних задач та побудова алгоритмів
• Умови if/else та switch/case
• Оператори виключних ситуацій

Цикли

• for
• while та do while
• Генерація випадкових чисел

Функції

• Робота з функціями
• Види функцій

Строки

Практика використання та робота з методами обробки строк.

Масиви

Методи обробки масивів. Практика.

Об'єкти та Класи

• Створення об'єктів, їх методи та властивості
• Синтаксис роботи з класами

Об'єкти Date та RegExp

• Date - обробка дати та часу
• RegExp - регулярні вирази

DOM

• Пошук елементів
• Обробка подій
• Таймери
• Робота з класами та атрибутами

Local Storage

Практика використання локального сховища.

Drag'n'drop

Перетягування елементів.

Ajax

Асинхронна передача/прийом даних на сервер без перезавантаження сторінки.

jQuery

• Знайомство з популярною бібліотекою
• Принципи роботи
• Основні методи

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

• Офлайн курс у Хмельницькому
• Для дорослих та молоді від 14 років
• 2-чі на тиждень по 2 год. 16:00 - 18:00
• Дні навчання: понеділок, четвер
• 5 місяців / 40 занять
• +30 хв. консультації після кожного заняття (до 18:30)
• Вимоги: базові знання з основ верстки HTML/CSS

Курс присвячений освоєнню одного з найпопулярніших фреймворків для веб-розробки на Python. Учасники дізнаються про роботу з шаблонами, базами даних, аутентифікацією користувачів, створення REST API та інтеграцію з front end технологіями. Курс дозволить швидко і якісно створювати комерційні веб-додатки, використовуючи всі можливості Django.

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

Вступ до Django

• Запуск проєкту
• Файл settings.py
• Основні принципи роботи

Бази даних та моделі

• Поняття моделі
• Створення моделі
• Зв’язки в базі даних

Система URL-адрес

• Slug-адреси
• Динамічні адреси
• Статичні адреси
• Namespace

Шаблонизатор

• Система шаблонів
• Фільтри
• Теги
• Створення власних фільтрів та тегів

Практика

Форми та валідатори форм

• Форма на основі моделей
• HTML-форма
• Django-forms

Class-based views

• Створення класів для відображень
• Використання шаблонів з класами
• Налаштування методів GET і POST
• Спадкування та розширення класів

Аутентифікація, авторизація та реєстрація користувачів

• Вбудовані механізми аутентифікації Django
• Створення користувацьких форм реєстрації
• Налаштування авторизації та прав доступу
• Використання Django Allauth для соціальної автентифікації

Відправка повідомлень на електронну пошту та Telegram

• Налаштування SMTP для відправки електронних листів
• Використання бібліотеки Django для роботи з електронною поштою
• Відправка повідомлень через Telegram бот
• Використання сторонніх API для повідомлень

Практика

• Розробка навчального проєкту
• Впровадження отриманих знань у реальний проєкт
• Тестування та дебагінг коду
• Презентація та обговорення проєктів

Створення REST API

Django REST Framework.

Вступ до Front-end

• Основи мови JavaScript
• Базові поняття CSS
• Налаштування front end частини проєкту

Бібліотека jQuery та фреймворк React.js

• Технологія AJAX
• Використання REST API
• Реактивні дані

Після завершення курсу учасники будуть вміти

• Професійно розробляти комерційні веб-додатки за допомогою Django
• Створювати та налаштовувати проєкти Django
• Працювати з базами даних та моделями
• Налаштовувати URL-адреси та шаблони
• Використовувати форми та валідатори
• Реалізовувати аутентифікацію та авторизацію користувачів
• Створювати REST API та інтегрувати їх з front end частиною
• Використовувати бібліотеки jQuery та фреймворк React.js

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

• Допомога ментора
• Практика
• Проєкт в портфоліо
• Сертифікат про проходження курсу

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

Trainee Level (1 Етап)

JavaScript Start

Середивище виконання

На цьому етапі ми встановимо весь інструментарій, що достатній для знайомства з мовою програмування JavaScript. До них відносяться платформа Node.js та IDE VS Code. З цими інструментами ми будемо працювати протягом усього курсу.

Змінні

Тут ми познайомимося зі змінними, дізнаємось яке їх призначення, що ми можемо зберігати в змінних і розглянемо синтаксис (правила) створення зміних.

Структури даних

На цьому етапі розглянемо структури даних, які використовуються в JS, такі як об'єкти, масиви, Map, Set. Розглянемо окремо кожен з них, наведемо приклади навіщо кожен з них використовують і які їх особливості.

Логічні операції, цикли. функції, помилки

Тут ми розглянемо дуже важливі конструкції які застосовуються для розробки реальних програм, подивимося як працювати з кожним з них, і розглянемо на прикладах навіщо кожен із них застосовується і які завдання вони вирішують.

Класи та екземпляри класів

В цьому розділі ми розкриємо тему класів. Які елементи є у класів, як вони взаємодіють, для чого вони використовуються, як допомагають робити нашу програму більш зрозумілою та простою до змін.

ООП

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

Особливості JS

У цій секції ми розглянемо деякі особливості JS, такі як асинхронність. Розглянемо у чому її переваги перед синхронністю. Також трохи розкриємо тему об'єктів у контексті JS, ключове слово this для JS, і що таке пакетний менеджер і чим він корисний для розробника.

Задачі перед менторингом

Розділ 1. Робота з примітивними типами даних

В розділі 10 задач на роботу з примітивними типами даних.

Розділ 2. Умовні оператори

Розділ містить 10 задач на закріплення навичок роботи з умовними операторами.

Розділ 3. Цикли

Цей розділ мscnbnm 10 задач для вирішення за допомогою циклів for та while.

Розділ 4. Масиви

10 задач на роботу з масивами.

Junior Level (2 Етап)

React

Git Course

Вiдеокурс по GitLab допоможе вам зрозуміти основні концепції та інструменти, які використовуються для керування проєктами програмного забезпечення. Під час цього курсу ви ознайомитеся з основами системи контролю версій Git та платформою GitLab, яка надає широкий спектр можливостей для спільної роботи над кодом, відстеження змін, управління задачами та багато іншого. Ви дізнаєтеся, як ефективно використовувати GitLab для спільної роботи в команді, ведення проєктів та забезпечення якості програмного забезпечення.

Передмова

Для всіх завдань курсу, які передбачають наявність дизайнів, ми надаємо їх у Figma, де вони чітко опрацьовані талановитим дизайнером. Тож у вас не виникне запитань щодо того, який вигляд має бути у виконаного завдання. У розділі React, окрім базових завдань, є завдання із зірочкою, спрямовані на найамбітніших студентів, щоб зробити ваше навчання ще цікавішим і наповненим відчуттям подолання виклику.

HTML/CSS

• Верстка сторінки відповідно до наданого дизайну, використовуючи Flex
• Верстка адаптивної веб-сторінки, використовуючи Flex і Grid для двох різних макетів
• Створення форми, аналогічної дизайну, обов'язково використовуючи всі зазначені інпути
• Створення анімації з використанням CSS
• Створення сторінки з паралакс-ефектом, де прокрутка покаже 4 пори року
• Створення сторінки документації з використанням дизайну
• Створення каруселі згідно з дизайном
• Фінал. Верстка повноцінної адаптивної веб-сторінки з використанням усіх вивчених у курсі технік

JavaScript

• Зміна кольору фону сторінки, що випадково генерується, під час кліку на кнопку
• Створення сторінки ресторанного меню з фільтрацією елементів за натисканням кнопки
• Сортування масиву різними способами (Bubble Sort, Sort by choice, Insertion Sort, Quicksort, Merge Sort)
• Реалізація класу валідації для перевірки строкових даних (OOP challenge)
• Створення віджета погоди з можливістю пошуку
• Створення списку завдань (Todo list) відповідно до дизайну. Todo list повинен зберігатися в cookie з обмеженим терміном дії
• Створення сторінки зі списком країн з можливістю переключитися на темну тему оформлення, фільтрацією за регіоном і пошуком за назвою
• Створення онлайн-магазину з кошиком покупок. Використання local storage
• JavaScript на серверній стороні (Node.js, Express). Створення простого API для додатка TODO
• Створення гри Doodle Jump на JavaScript. (Опціонально)

React

• Вступ до React. Створення mobile gallery app з використанням css/scss modules, styled-components або tailwind на вибір
• Поглиблене занурення в React hooks. Створення простого додатка "Таймер" з використанням useState, useEffect, useMemo, useRef, useCallback
• Форми в React. Створення сторінки з двома формами, використовуючи контрольовані та неконтрольовані компоненти
• Керування станом у React. Створення гри хрестики-нулики з використанням однієї з бібліотек: redux-toolkit, zustand, mobx тощо
• Маршрутизація в React. Створення додатка магазину з навігацією між сторінками, використовуючи react-router або аналогічні бібліотеки
• UI Kit. Створення кастомних компонент (Button, Link, Input, Textarea, Checkbox, SelectMenu, Dropdown, ColorPicker тощо), що використовуватимуться у фінальному проєкті
• Тестування у React. Написання юніт-тестів для UI Kit з попереднього завдання. Використання Jest framework і react-testing-library
• Асинхронні операції в React. Створення клієнт-серверного додатка TODO з асинхронними операціями, використовуючи локальне API із завдання 2.9. Використання однієї з бібліотек: react-query, rtk-query, useSWR, redux-saga та ін.
• Фінальний проєкт - Веб-календар із широким функціоналом

Angular

Git Course

Вiдеокурс по GitLab допоможе вам зрозуміти основні концепції та інструменти, які використовуються для керування проєктами програмного забезпечення. Під час цього курсу ви ознайомитеся з основами системи контролю версій Git та платформою GitLab, яка надає широкий спектр можливостей для спільної роботи над кодом, відстеження змін, управління задачами та багато іншого. Ви дізнаєтеся, як ефективно використовувати GitLab для спільної роботи в команді, ведення проєктів та забезпечення якості програмного забезпечення.

HTML/CSS

• Основи верстки
• Створення макету в стилі "святий Грааль"
• Flex і Grid layouts
• Реалізацію складних інтерфейсів користувача

JavaScript

• Взаємодія з DOM, рядками та масивами
• Об'єктно-орієнтований JavaScript
• Розширення та валідація форм за допомогою JS
• Оновлення веб-сторінок за допомогою AJAX
• Зберігання даних із застосуванням Local та Session Storage
• Збереження проміжних даних із використанням cookie

Angular

• Створення основних компонентів, модулів, моделей та сервісів за допомогою Angular CLI
• Види прив'язки даних
• Вбудовані директиви
• Події та форми
• Використання та створення каналів (pipes)
• Компоненти та їх життєвий цикл
• Служби (Services) та їх провайдери
• Маршрутизація та навігація
• Модулі (створення та використання) та таке відкладене завантаження (lazy loading)
• Асинхронні запити HTTP, використання бібліотеки RxJS
• Зберігання даних із застосуванням Firebase

Vue.js

Git Course

Вiдеокурс по GitLab допоможе вам зрозуміти основні концепції та інструменти, які використовуються для керування проєктами програмного забезпечення. Під час цього курсу ви ознайомитеся з основами системи контролю версій Git та платформою GitLab, яка надає широкий спектр можливостей для спільної роботи над кодом, відстеження змін, управління задачами та багато іншого. Ви дізнаєтеся, як ефективно використовувати GitLab для спільної роботи в команді, ведення проєктів та забезпечення якості програмного забезпечення.

Введення в Vue.js

• Огляд фреймворка
• Створення та використання компонентів
• Встановлення та налаштування середовища розробки

Маршрутизація в Vue та Vue CLI

• Використання Vue Router для навігації в додатку
• Робота з подіями та обробники подій
• Пропси, події компонентів, директиви та реактивність

Vue typescript and configuration

• Робота з конфігурацією Vite та додатковими налаштуваннями
• Створення алгоритмічної задачі
• Створення анімацій

Створення та валідація форм, локалізація тестування

• Створення форм та їх валідація за допомогою VeeValidate
• Використовування ui бібліотеки vuesax
• Основи тестування компонентів та додатку за допомогою VueTestUtils
• Імплементація локалізації за допомогою vue-i18n

Отримання, збереження та управління даними

• Використання Axios або інших інструментів для взаємодії з API
• Введення в управління станом за допомогою Vuex
• Динамічне завантаження даних

Todo список і робота з фаєрбейс

• Робота з фаєрбейс за допомогою vuefire
• Робота з різними типами запитів
• Використання Vue Router для навігації в додатку

SSR за допомогою Nuxt

• Створення проєкту за допомогою Nuxt
• Робота з сторами браузера
• Імплементація проєкту по дизайну

Підсумкова задача

На основі пройденого курсу виконання задачі з використанням останніх тенденцій. Задача може увійти у ваш приклад виконаних задач.

Багатоплатформенний проєкт (опціонально)

На основі пройденого курсу виконання задачі зі створення багатоплатформенного проєкту написаного на quasar.

Strong Junior Level (3 Етап)

Проєкт 1

Java + Angular or React

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

Проєкт 2

Java + Angular or React

Проєкт Learning Management System - інструменти для організації навчального процесу. Java, Spring, мікросервісна архітектура. Інтеграція з Google Calendar, Atlassian Jira.

Проєкт 3

Python + React

Проєкт "Платформа для благодійної організації, що займається опікою над безпритульними котиками (міні-притулок для котів)". Система має за мету поширити інформацію про діяльність організації, інформацію про котів, що потребують прихистку, збору донатів для роботи притулку, покупки кормів і т.д.

Проєкт 4

JuniorSpace (Python + React)

JuniorSpace - це платформа, спрямована на об'єднання молодих IT-фахівців та громадських організацій для створення команд, які розробляють інноваційні рішення в області інформаційних технологій. Мета проєкту - створити сприятливе середовище для розвитку новачків у сфері IT, одночасно допомагаючи соціально важливим проєктам. Платформа пропонує різноманітні інструменти для співпраці та комунікації, такі як веб-сайт, телеграм-чат та соціальні мережі, і реалізує різні форми монетизації для забезпечення стійкості та підтримки проєкту.

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

• Допомога ментора
• Практика
• Проєкт у портфоліо
• Особистий куратор
• Сертифікат про проходження курсу
• Допомога з оформленням LinkedIn
• Перевірка резюме
• Пробна співбесіда
• Вебінар по софт-скілам

Навчимо вашу дитину професійно розробляти сайти та допоможемо розвинути навички, необхідні для успішного майбутнього.

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

Frontend Junior (10-11 років)

Семестр 1

• Знайомство з WordPress
• Верстка сайту, модуль CSS Flexbox
• Оформлення, підключення та розміщення віджетів
• Пошукова оптимізація сторінки в Yoast SEO
• Збір аналітики за допомогою Google Analytics
• Плагін MailPoet та налаштування розсилки
• Підключення сторінки до CMS
• Створення власного каталогу інформації
• Робота з плагіном Advanced Custom Fields
• Використання WordPress як джерела REST API

Семестр 2

• Створення посадкової сторінки за прикладом
• Робота з динамічними елементами CSS (анімація)
• Конструктори сайтів Wix та Weblium: можливості та інструменти
• WordPress: створення сторінок, меню сайту, розміщення контенту, налаштування доступу
• Контент, оформлений в HTML, CSS
• Розгортання сайту на CSS WordPress

Фінальні проєкти:

• Особистий інформаційний сайт
• Інтернет-магазин
• Власний сайт за тематикою свого хобі

Frontend (12-17 років)

Семестр 1

• Вступ до HTML
• Блочні та рядкові теги, семантична верстка
• CSS. Використання стилів, CSS-селектори
• Каскад. Ієрархія. Наслідування. Псевдокласи
• Текст, шрифти, стилі
• Верстка дизайн-макета
• Розміщення верстки на GitHub
• Модуль Flexbox: порядок та розташування елементів
• Background

Семестр 2

• Анімація в CSS
• Властивості transition & transform
• Робота з зображеннями SVG та створення SVG-іконки
• Позиціювання при верстці
• Адаптивна верстка сайту
• Responsive та Mobile first
• Bootstrap: розмітка, компоненти, утиліти
• Препроцесори SASS/SCSS

Семестр 3

• Знайомство з JavaScript
• Змінні, типи даних, взаємодія з користувачем
• Основні оператори, числа, рядки
• Пошук DOM-вузлів, властивості, атрибути
• Події, логічні оператори, розгалуження
• Використання різних інструкцій розгалуження
• Цикли, функції, методи масиву
• Об’єкти. Створення об’єкта, переназначення властивостей. Деструктуризація об’єктів
• ООП: класи, функції, конструктор

Семестр 4

• Оптимізація подій
• Бібліотека Lodash. Throttle і Debounce
• Node.js та Пакетний менеджер npm
• Модульність коду
• Формат даних JSON, вебсховище
• Асинхронність, таймери, дата і час
• Методи класу Promise. Цикл подій
• HTTP-запити
• Пагінація
• CRUD взаємодії з ресурсами бекенду

Семестр 5

• Бібліотека React. JSX
• Компоненти .JSX
• Стилізація. CSS модулі
• Стилізація. CSS in JS
• HTTP-запити
• Життєвий цикл
• React hooks. Хуки useState, useEffect та власні хуки

Семестр 6

• Проблеми хостингу SPA. React Router V6 - призначення та налаштування
• Програмна навігація, запити та об’єкт місцезнаходження. Розподіл коду
• Знайомство з Redux, класичний Redux
• Redux Toolkit
• Redux persist
• Селектори та бібліотека Reselect
• Робота з користувачами. Портали

Фінальні проєкти:

• Сайт для пекарні або іншого локального бізнесу
• Сайт для IT компанії
• Веб-каталог ігор
• Cайт-агрегатор різних заходів та подій в країні, на якому можна придбати квитки на ці події
• Сайт Трекер витрат
• Сайт Онлайн бібліотека з електронними книгами

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

• Комфортний навчальний процес
• Зворотній зв'язок та підтримка
• Комунікація та Soft Skills
• Записи уроків
• Проєкти для портфоліо

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

• Альона - 4+ роки досвіду викладання
• Олександр - 5+ років досвіду викладання Frontend, Roblox
• Вадим - 3+ роки досвіду роботи Frontend/Wordpress developer
• Олександра - 2+ роки досвіду викладання
• Богдан - 15+ років викладання
• Ілля - Front-end розробник
• Ольга - Фрілансер, 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. Ознайомитися з видами маршрутів, а також з основними параметрами.

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

• Практичні заняття і перевірка ДЗ
• Безкоштовний відеокурс
• Онлайн тестування і сертифікація

В курсі 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

У курсі буде продемонстровані приклади додавання інтерактивних і динамічних компонентів сторінки, різних елементів управління, ефектів і плагінів.

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

Введення в 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

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

• Практичні заняття і перевірка ДЗ
• Безкоштовний відеокурс
• Онлайн тестування і сертифікація