Вступ, що таке Веб

Тема 1. Що таке web , як влаштований інтернет ?

• Як працює інтернет
• Що таке домен що таке хостінг

Тема 2.  Роль FrontEnd у світі IT. Взаємодія "фронтенду" з "бекендом" і дизайнером. ?

• Хто такий frontend web developer
• Як виглядає процес розробки сайту в компанії і на фрілансі
• Що таке редактор коду, які редактори коду є, як встановити visual studio code.

HTML

Тема 1. Загальна структура.

• Знайомство з базовими тегами та атрибутами.
• Створення текстових та блочних елементів, додавання зображень відео та посилань.
• Взаємини блоків: вкладений, дочірній, сусідній, батьківський
• Семантична верстка, HTML5 теги
• Таблиці.
• Форми зворотнього зв’язку , input, checkbox, textarea

Тема 1: Основи HTML

• Уведення в HTML та його роль у веб-розробці.
• Робота зі структурою HTML-документа.
• Введення в базові теги та атрибути.

Тема 2: Текстові елементи

• Використання заголовків <h1>, <h2>, ..., <h6>.
• Використання тегів <p>, <strong>, <em>, <span>.

Тема 3: Списки та вкладеність

• Створення маркованих списків <ul> та нумерованих списків <ol>.
• Додавання пунктів списку <li>.
• Вкладеність списків.

Тема 4: Зображення та посилання

• Вставка зображень <img>.
• Додавання посилань <a>.

Тема 5: Таблиці

• Створення таблиць <table>, рядків <tr> та комірок <td>.
• Додавання заголовків стовпців <th>.

Тема 6: Форми

• Введення тексту <input>, <textarea>.
• Використання кнопок <button>.
• Створення форм та їх відправка на сервер.

Тема 7: Семантична верстка

• Використання семантичних тегів HTML5 для кращої структури сторінки.

Тема 8: Взаємодія блоків

• Властивості взаємодії між блоками: вкладений, дочірній, сусідній, батьківський.

Тема 10: Завершення та практика

• Практичні завдання та вправи для закріплення знань.
• Рекомендації щодо подальшого вдосконалення навичок у веб-розробці.
• Створення простого сайту на зразок Wikipedia з використанням тільки html

CSS

Тема 1. Знайомство з CSS.

• Знайомство з CSS, його синтаксисом та способом оголошення.
• Користування браузерною консоллю та знаходження помилок.
• Колір, розмір елементів
• Рамка border, варіанти рамки
• Селектори CSS та підключення стилів до сторінки.
• Каскад ("вага" селекторів)
• Комбінування та угруповання селекторів. Ієрархія селекторів. Успадкування. Значення inherit
• Створення простого прототипу сайту

Тема 2. Блочна верстка, поєднання селекторів CSS.

• Вбудовані стилі браузерів. CSS reset.
• Блокова модель (Display:block; Inline-block)
• Властивість Float
• Правильна побудова HTML сторінки, рівні вкладення.
• Стилізація шрифтів та властивості, які змінюють вигляд тексту на сторінці.
• Одиниці вимірювання(px,rem,em, %)
• Верстка першого макету сайту за зразком.

Тема 3. Фон, позиціонування фону, градіент.

• Види позиціонування фону на сторінці та їх особливості.
• Важливість кольору та візуального сприйняття на сторінці.
• Моделі задання фону та зображень.

Тема 4. Графічні редактори

• Графічні редактори, Figma, Photoshop, Avocode
• Векторна та растрова графіка, формати зображення.
• Робота з PSD макетами за допомогою графічних редакторів.

Тема 5. Методологія BEM , кроусбраузерність, валідність коду.

• Графічні редактори, Figma, Photoshop, Avocode
• Векторна та растрова графіка, формати зображення.
• Робота з PSD макетами за допомогою графічних редакторів.

Тема 6. Flexbox, Position, GRID.

• Flexbox та його застосування.
• Шрифтові іконки, їхнє призначення та застосування.
• Створення різних видів меню для сайтів.
• Створення випадаючого меню та "Акордіон".
• Верстка макету сайту з дизайн макету в Figma.

Тема 7. Псевдокласи та псевдоелементи.

• Знайомство з сучасними методами в CSS та цікавими анімаційними змінами елементів.
• Керування візуальними змінами на сторінці за допомогою стилів.
• Використання продвинутих методів доступу до елементів сторінки.

Тема 8. Адаптивна верстка.

• Створення адаптивної сторінки за допомогою @media запитів в CSS.
• Створення "гумових" сайтів.
• Варіанти media запитів
• Створення адаптиву сайту

Тема 9. Анімація в CSS3.

• Що таке анімація і як вона працює в CSS3?
• Плавність та трансформація(Transform, transition, scale)
• Створення живої та динамічної сторінки за допомогою @keyframes анімацій.
• Створення анімації на сайті.

Тема 10. Препроцесори SASS/SCSS, LESS.

• Що таке препроцесори і їх види для HTML і CSS.
• Переваги використання препрорцесорів.
• Знайомство з SASS/SCSS.
• Застосуєвання препроцесора на практиці.
• Pixel perfect

Тема 11. Фреймворки Bootstrap, Animation.css, Semantic-UI.

• Знайомство з тим, що таке CSS-фреймворк.
• Переваги та недоліки використання фреймворків.
• Знайомство з Bootstrap, його основними елементами.
• Bootstrap grid.
• Верстка сайту за допомогою Bootstrap.

Тема 12. Система контролю версій GIT.

• Що таке Git , встановлення налаштування.
• Що таке GitHub регістрація
• Базові команди.
• Робота з гілками.
• Робота з GIT через термінал і через visual studio
• Викладення сайту в інтернет, на веб хостінг від github.

Тема 12. Фінал та захист проекту.

• Принципи progressive enhancement і graceful degradation, що таке mobile first.
• Захист вашого проектів в зумі
• Обговорення помилок, міні співбесіда.
• Що таке Host і для чого потрібна FileZilla.
• Як писати менше та отримувати більше оптимізуючи код.

JAVA SCRIPT

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

Тема 1. Що таке JavaScript.

• Загальна інформація про мову JavaScript та її особливості.
• Як викликати JavaScript? З чим взаємодіє JavaScript?
• Типи даних та приведення типів.

Тема 2. Conditional Statements.

• If, else if, else.
• Конструкція switch.
• Вирішення логічних задач на JavaScript.

Тема 3. Loop.

• Цикли for, while, do while.
• Break and continue.
• Рішення математичних рівнянь за допомогою циклів.

Тема 4. Functions.

• Function Expression, Function Declaration.
• Область видимості функції.
• Рекурсія, замикання та інші цікаві речі.

Тема 5. String.

• Створення стрічок, спеціальні символи.
• Методи стрічок.
• Практичні завдання для пошуку, заміни, видалення даних зі стрічок.

Тема 6. Array.

• Способи оголошення масиву та робота з ним.
• Методи масивів та їхня користь.
• Робота з великою та різноманітною кількістю даних.

Тема 7. Object.

• Способи оголошення об’єкту та робота з ним.
• Об’єкти та їхня користь для сценарію.
• Робота з об’єктами на практиці.

Тема 8. Document Object Model.

• Що таке DOM?
• Структура DOM документа.
• Робота з DOM за допомогою JavaScript.

Тема 9. Робота з інтерфейсом.

• Змінюєм стилі за допомогою скріпта, взаємодія сайту з користувачем.
• Логіка сторінки.

Тема 10. Mouse events.

• Click, mouseover, mouseout, focus, blur та інші події.
• Приклади роботи з подіями та динамічністю сторінки.

Тема 11. Keyboard events.

• Keyup, keydown, keypress.
• Приклади роботи з подіями та динамічністю сторінки.

Тема 12. SetTimeout і setInterval.

• Що таке setTimeout і setInterval.
• Об’єкт Math та робота з ним.
• Об’єкт Date та робота з ним.
• Приклад годинника, таймера, секундоміра на JavaScript.

Тема 13. Базові елементи сторінки.

• Створення слайдера на JavaScript.
• Валідація форм на стороні клієнта.

Тема 14. Що таке JQuery?

• Де скачати і як підключити?
• Робота з DOM за допомогою JQuery.
• Селектори та ієрархія JQuery.

Тема 15. Аналогія між JQuery та CSS.

• Фільтри в JQuery.
• Приклади складних фільтрів в JQuery.

Тема 16. JQuery events.

• Як працюють події в JQuery?
• Використання подій на практиці.

Тема 17. JQuery UI.

• Де скачати та як встановити.
• Draggable, droppable.

Тема 18. Анімація в JQuery.

• Що таке parallax scrolling?
• Застосування parallax scrolling на практиці.

Тема 19. Логічні задачки та закріплення матеріалу.

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

Тема 20. Фінальний проект

• Створення фінального проекту з використанням js(Slider, Swiper, Tabs, Timer)

JS ADVANCED

На етапі курсу "JavaScript Advanced" ти зможеш реалізувати на своєму сайті все задумане, адже будеш вивчати такий популярний фреймворк Angular. Ти дізнаєшся про те які є фреймворки та як з ними працювати. Навчишся працювати з базами даних та зрозумієш особливості роботи сервера. Дізнаєшся що таке Git та опануєш новий для тебе підхід роботи з даними. Дізнаєшся що таке Gulp та як з його допомогою можна автоматизувати роботу фронтенд-розробника.

Будеш працювати з об'єктами, функціями та дізнаєшся про всі можливості їх взаємодії у JavaScript.

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

Тема 1. ООП.

• Поняття ООП в JavaScript.
• Що таке наслідування, його використання та приклади.
• Практика в об'єктно орієнтованому стилі програмування.
• This та шаблони виклику функцій.

Тема 2. RegExp.

• Здійснення пошуку за допомогою регулярних виразів.
• Використання регулярних виразів для валідації.
• Правила пошуку тексту.

Тема 3. Система збірки проекту Gulp, Webpack.

• Що таке Gulp, Webpack і для чого вони потрібні.
• Встановлення та налаштування файлу конфігурацій.
• Встановлення додаткових плагінів.
• Використання збірки на практиці.

Тема 5. JSON.

• Формат JSON, Метод JSON.parse, JSON.stringify.
• Передача даних за допомогою об'єктного запису JavaScript.

Тема 6. Зберігання даних в браузері.

• LocalStorage / SessionStorage.
• Cookies
• Проект з використанням засобів зберігання даних.
• Створення проекту список справ toDO з збереженням ваших задач

Тема 7. Перехоплення помилок, "try..catch".

• Конструкція try…catch.
• Об’єкт помилки.
• Приклади застосування на практиці.

Тема 8. AJAX.

• HTTP запити. Що це? Як працюють?
• Взаємодія "Клієнт-Сервер".
• Використання методів AJAX для відправки та отримання даних.
• Створення проекту з використанням rest api , новинний блог

Тема 10. Database.

• Знайомство з базамами даних.
• Принципи роботи SQL і NoSQL БД.
• Приклад створення і маніпуляція даних в БД.

Тема 11. Node.js.

• Що таке серверний JavaScript?
• Які переваги? Як працювати з Node.js?

Тема 12. Ключові професійні навики.

• Впевнене володіння мовою Javascript.
• Розуміння концепції DOM.
• Робота з бібліотекою JQuery.
• Знання AJAX та HTTP запитів.
• Знання JSON.
• Уміле застосування регулярних виразів.
• Поняття серверного JavaScript (Node.js).
• Володіння фреймворком.
• Побудова красивого та динамічного сайту.

TypeScript

Тема 1: Введення в TypeScript

• Що таке TypeScript і для що він потрібен.
• Установка TypeScript та запуск файлів.

Тема 2: Базові типи TypeScript

1. Основні типи: рядок (string), число (number), булевий тип (boolean).
2. Використання системи типів у функціях.
3. Особливий тип "any".
4. Практика типізації коду.
5. Тип "never".
6. Типи "null" і "undefined".
7. Рідкі примітивні типи: bigint, символ (symbol).

Тема 3: Типізація об'єктів і деструктуризація

• Типізація об'єктів.
• Деструктуризація об'єктів.

Тема 4: Типізація масивів

• Типізація масивів.
• Практика типізації коду.

Тема 5: Кортежи та Об'єднання типів

• Типи даних "кортежи" (tuples).
• Об'єднання типів (union).
• Суження типів (narrowing).
• Примітивні літеральні типи (literal types).
• Псевдоніми типів (type aliases).
• Перевірка знань (15 запитань).

Тема 6: Generics (Обобщения)

• Введення в модуль Generics.
• Generics в функціях.
• Generics у типах і інтерфейсах, обмеження (constraints).
• Практика.

Тема 7: Generics у класах та вбудовані обобщення

• Generics у класах.
• Вбудовані обобщення (Readonly, Partial, Required).
• Маніпуляції з типами та їх реалізація.
• Оператор "keyof".
• Оператор "typeof" та запроси типів.
• Indexed Access Types.
• Практика.
• Розбір завдань.

Тема 8: Умовні типи та infer

• Умовні типи (conditional types).
• Infer в умовних типах.
• Маповані типи (mapped types), +/- оператори.
• Шаблонні літеральні типи (template literal types).
• Utility types: Pick, Omit, Extract, Exclude, Record.
• Практика.
• Розбір завдань.

Тема 9: Додаткові вспомогательні типи (Utility types)

• Робота з запитами на сервер, Promise і JSON.
• Awaited.
• Перевірка знань.
• Створення проекту з використанням type script

Angular

Модуль 1: Огляд Angular та Його Інсталяція

• Введення в Angular та його роль у розробці веб-додатків.
• Встановлення та конфігурація середовища розробки Angular.

Модуль 2: Основи Angular - Компоненти та Модулі

• Огляд основних понять та архітектури Angular.
• Створення та використання компонентів Angular.
• Структурування додатку за допомогою модулів.

Модуль 3: Робота з Шаблонами та Директивами

• Розробка шаблонів та використання директив Angular.
• Вставка значень в текст (інтерполяція).
• Зв'язування даних (bindings).

Модуль 4: Робота з Сервісами та HTTP

• Розробка сервісів для обробки даних та бізнес-логіки.
• Використання HTTP для взаємодії з сервером та обробки даних.

Модуль 5: Маршрутизація та Навігація

• Налаштування маршрутизації в Angular додатку.
• Створення навігаційних меню та вкладених маршрутів.

Модуль 6: Робота з Формами та Валідація

• Розробка форм та їх валідація в Angular.
• Використання реактивних форм для складних форм.

Модуль 7: Оптимізація та Продуктивність

• Практики оптимізації та зменшення завантаження додатку.
• Профілювання та виправлення помилок.

Модуль 8: Робота із Даними та Отримання і Відображення Даних

• Отримання і вивід даних з сервера в шаблон.
• Створення об'єктів з POST-запитами.

Модуль 9: Редагування та Видалення Даних

• Видалення елементів з сервера.
• Перенесення логіки в сервіс.
• Модифікація елементів з PUT-запитами.

Модуль 10: Обробка Помилок та Робота з API

• Обробка помилок та додавання заголовків до запитів.
• Робота з параметрами запитів.

Модуль 11: Розширені Техніки та Функції

• Робота з параметрами запитів.
• Параметр observe та обробка відповідей.
• Перехоплення запитів за допомогою інтерсептора.

Модуль 12: Створення Проекту з Використанням Angular

• Створення конкретного проекту з використанням Angular.
• Розробка функціональності для інтернет-магазину, блогу або системи управління відносинами з клієнтами (CRM).

Модуль 13: Огляд Файлів та Папок в Проекті

• Детальний огляд структури файлів та папок у проекті Angular.

Модуль 14: Передача Параметрів та Створення Власних Компонентів

• Передача параметрів між компонентами.
• Створення власних компонентів та їх використання.

Модуль 15: Робота з Шаблонами та Директивами (Продовження)

• Використання директив для маніпуляції DOM.
• Додавання динамічних класів із директивою ngClass.

Модуль 16: Робота із Подіями та Додатковими Функціями

• Робота із подіями (Event Bindings).
• Двостороннє зв'язування (2 Way Binding).
• Налаштування стилів за допомогою директиви ngStyle.

Модуль 17: Умовне Відображення та Цикли (Продовження)

• Відображення в залежності від умови за допомогою ngIf та ngIf else.
• Використання директиви ngSwitch.
• Цикли за допомогою ngFor.
• Використання фільтрів (pipes).

Модуль 18: Додаткові Можливості та Оптимізація Коду

• Використання додаткових можливостей Angular, таких як анімація та інтернаціоналізація.
• Практики оптимізації коду та продуктивності додатку.

Модуль 19: Завершення Проекту та Оцінка

• Завершення розробки проекту.
• Оцінка знань та видача сертифіката.
• Створення проекту інтернет магазин на Angular.
• Захист проекту, та співбесіда.

Тренінг "Співбесіда в IT"

Тема 1. Етапи рекрутингового процесу

• Оцінка профілів та резюме кандидатів.
• Первинний відбір інтерв'ю (телефонні або відео-співбесіди).
• Офіційні співбесіди.
• Оцінка потенційних співробітників.
• Прийняття рішення щодо найму.
• Збір зворотнього зв'язку від попередніх роботодавців (за потребою).
• Пропозиція про роботу.
• Процес офіційного прийому на роботу.
• Онбординг нових співробітників.

Тема 2. Етапи співбесіди

• Співбесіда з представниками відділу кадрів.
• Технічна співбесіда.
• Співбесіда з представниками клієнта (за потребою).

Тема 3. Варіанти проведення технічної співбесіди

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

Тема 4. Питання на співбесіді

• Традиційні питання.
• Питання з оцінкою поведінки.
• Питання щодо корпоративної культури.
• Логічні питання.
• Рішальні остаточні питання.

Тренінг "Ти Фрілансер"

Тема 1: Огляд Фріланс-бірж та Реєстрація

• Введення в фріланс і фріланс-біржі.
• Вибір популярних фріланс-бірж для роботи.
• Реєстрація на фріланс-біржі та створення профілю.

Тема 2: Пошук Проектів та Замовлень

• Способи пошуку проектів та замовлень.
• Використання фільтрів для пошуку релевантних замовлень.
• Аналіз описів проектів та визначення підходящих завдань.

Тема 3: Створення Професійного Профілю

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

Тема 4: Відгуки та Рейтинг

• Значення відгуків та рейтингу на фріланс-біржі.
• Отримання та залишення якісних відгуків.
• Підтримання високого рейтингу та репутації.

Тема 5: Підготовка та Подача Пропозицій

• Підготовка професійних пропозицій для проектів.
• Визначення оптимальної цінової стратегії.
• Ефективне комунікування з клієнтами через приватні повідомлення.

Тема 6: Укладення Угод та Запуск Проектів

• Укладення угод та узгодження деталей проекту.
• Оформлення замовлення та забезпечення безпеки оплати.
• Початок виконання фріланс-замовлення.

Тема 7: Ефективне Спілкування з Клієнтами

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

Тема 8: Управління Проектами та Виконання Замовлень

• Організація робочого процесу та виконання завдань в строк.
• Контроль якості та відправлення результатів.
• Успішне завершення та отримання відгуків від клієнтів.

Тема 9: Розвиток Кар'єри на Фрілансі

• Стратегії розвитку фріланс-компетенцій.
• Встановлення цілей та росту рівня доходів.
• Рекомендації для постійного успіху на фріланс-біржі.

Тема 10: Оцінка та Оновлення Профілю

• Способи відстеження та оцінки успішності профілю.
• Поновлення та вдосконалення професійної інформації.
• Активне участь у фріланс-спільноті та підтримка колег.