Курсы Frontend Developer: HTML и CSS

Пройшовши цей курс ви дізнаєтеся, як застосовувати передові технології, засновані на 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

Від 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

Курс надає знання та навички розробки web-додатків та додатків для Windows Store з використанням стеку технологій HTML5/CSS3/JavaScript, створення на HTML5 програмних компонентів та структур для цих додатків. Розглядаються принципи побудови програмної логіки, визначення та використання змінних, написання циклів та розгалужень, побудови інтерфейсів користувачів, обробки та зберігання даних, які вводяться, розробки структурованих додатків на базі HTML5/CSS3/JavaScript.

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

Огляд HTML та CSS

• Огляд HTML
• Огляд CSS
• Створення web-додатків за допомогою Visual Studio 2012

Створення та стилізації HTML5-сторінок

• Створення сторінки HTML5
• Налаштування стилю сторінки HTML5

Вступ до JavaScript

• Огляд синтаксису JavaScript
• Використання DOM в JavaScript
• Вступ до jQuery

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

• Огляд форм та типів введення
• Перевірка даних, які введені користувачем, за допомогою атрибутів HTML5
• Перевірка даних, які введені користувачем, за допомогою JavaScript

Взаємодія з віддаленим джерелом даних

• Відправлення та отримання даних за допомогою XMLHttpRequest
• Відправлення та отримання даних за допомогою операцій jQuery AJAX

Моделювання за допомогою HTML5 CSS3

• Стилізація тексту
• Стилізація групи елементів
• Селектори CSS3
• Використання графічних ефектів CSS3

Створення об'єктів за допомогою JavaScript

• Розробка структурованого коду на JavaScript
• Створення власних об'єктів
• Розширення створених та наявних об'єктів

Створення інтерактивних сторінок за допомогою HTML5

• Взаємодія з файлами
• Використання мультимедіа
• Реагування на дислокацію та контекст глядача
• Налаштування та профілювання web-додатків

Використання можливостей зберігання даних на стороні клієнта

• Локальне читання та запис даних
• Збереження даних на стороні клієнта у offline-режимі за допомогою кеша додатка

Реалізація адаптивного інтерфейсу користувача

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

Використання графіки

• Створення векторної графіки за допомогою бібліотеки SVG
• Програмне створення графіки за допомогою елемента Canvas

Анімація інтерфейсу користувача

• Застосування CSS-переходів transitions
• Перетворення елементів transformations
• Використання покадрової CSS-анімації

Реалізація обміну повідомленнями, спрямованого в обидва боки, з використанням Web Sockets

• Вступ до Web Sockets
• Відправлення та отримання даних за допомогою Web Sockets

Використання Web Workers

• Вступ до Web Workers
• Виконання асинхронної обробки за допомогою Web Workers

Після курсу слухачі зможуть:

• Використовувати Visual Studio 2012 для створення Windows Store та web-додатків
• Описати нові функції HTML5, створювати сторінки в стилі HTML5
• Додавати інтерактивні сторінки HTML5 з використанням JavaScript
• Створювати форми HTML5 з використанням різних типів введення, перевіряти дані, які введені користувачем, за допомогою атрибутів HTML5 та коду JavaScript
• Відправляти та отримувати дані віддалено за допомогою об'єктів XMLHttpRequest та методів AJAX-бібліотеки jQuery
• Налаштовувати стиль сторінок HTML5 за допомогою нових можливостей CSS3
• Створювати структурований код на JavaScript, який легко супроводжувати
• Використовувати нові можливості JavaScript API в інтерактивних web-додатках
• Створювати web-додатки, які підтримують зберігання даних на стороні клієнта у offline-режимі
• Створювати web-сторінки HTML5, здатні адаптуватися до різних видів пристроїв та форм-факторів
• Виводити графіку засобами HTML5, використовуючи елементи Canvas та масштабовану векторну графіку SVG
• Підвищити зручність інтерфейсу користувача за допомогою анімації на сторінках HTML5
• Використовувати нові можливості Web Sockets API для передачі та прийому даних між web-додатком та сервером
• Зробити більш ефективною роботу додатків, які здійснюють тривалі операції з використанням Web Worker

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

• LIVE-навчання незалежно від формату участі в курсі (очно/віддалено)
• Підбірка матеріалів по темі курсу
• Попередньо налаштоване середовище та навчання на сучасному обладнанні
• Електронний сертифікат НЦ "Мережні Технології"
• Обід та кава-брейки (очний курс)
• Консультації тренера протягом 6-ти місяців після закінчення курсу

Приєднуйся та розвивай свої навички з кодування: навчайся у власному темпі з допомогою необхідних матеріалів та підтримкою ментора, щоб підготуватись до стажування. Максимум уваги – на практику.

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

Теми:

• JS for React
• OOP in JS
• Advanced JS (Asynchronous JS, Closures, Exceptions)
• Create React App. JSX, Styles
• React - Key, State, Props, Events
• React - Lifecycle & Binding Event Handlers
• React Virtual DOM, Hooks (useState, useEffect). Typescript
• Storage (local/session), Web workers, Service workers, Web socket
• Tools (npm, linter, babel, webpack)
• Node, Fetch, Axios
• React State Management (Redux)
• Redux Toolkit
• Advanced Redux
• React Router
• Refs, Higher-Order Component, DefaultProps
• Composition, Context (useContext, useMemo, useCallback hooks)
• Tests (react-testing-library)
• MUI for React
• Error Handling in React (Error Boundaries), creating custom Hooks

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

• Практика насамперед: ти будеш кодувати, використовуючи завдання, схожі на ті, які зустрічаються на реальних проєктах в SoftServe
• Мінімум теорії: курс для того, щоб кодувати. Якщо ж потрібно буде щось підівчити – ми зібрали усі необхідні відео та матеріали, щоб скоротити твій час на пошуки
• 24/7 чат з учасниками в Discord: місце для твоїх опівнічних питань, веселих стікерів та спілкування з ментором
• Усі завдання підготовлені менторами Softserve Академії, які знають про код все, адже працюють з ним щодня
• Додаткові технічні е-курси
• Розмовні клуби з англійської & селф-стаді
• Короткі курси для розвитку софт навичок
• Спільнота професіоналів-однодумців

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

• Mykhaylo Plesha - Ментор SoftServe Академії
• Vladyslav Khrychov - Ментор SoftServe Академії

В цьому курсі ви дізнаєтеся все, що необхідно для початку використання цієї мови програмування. Протягом 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

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

HTML/CSS

На етапі курсу HTML/CSS ти отримаєш всі необхідні знання стосовно "каркасу", розмітки сайту. Навчишся застосовувати стилі, шрифти та опануєш всі основні моменти у побудові сайту. Створиш свою першу лендінг сторінку, навчишся як робити навігацію по сайту, сайдбар та багато іншого. Будеш працювати з зображеннями на сайті та текстовими блоками. Зрозумієш що таке мета-кодування сторінки та для чого воно використовується. Познайомишся з різними браузерами з точки зору розробника та зрозумієш переваги та недоліки кожного з них.

Основи програмування

У блоці "Основи програмування" ти поринеш у світ IT, зробиш свій перший крок до того, щоб зрозуміти що таке програмування та чим займаються програмісти. Будеш вивчати ази мови Java, розберешся чому вона одна з найпопулярніших. Також в цьому курсі ти напишеш ряд програм, які нададуть тобі перший поштовх в цій сфері. Цей блок підготує тебе до того, щоб перейти вже на професійний рівень програмування.

JavaScript

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

JavaScript Advanced

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

Проєкт

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

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

На тренінгу ми навчимо тебе як правильно проходити співбесіду, щоб ти міг показати всі свої навики та успішно працевлаштуватись. Обговоримо яка специфіка співбесіди саме в ІТ сфері. Ти дізнаєшся з чого розпочинати розмову, що варто, а що не варто говорити та як переконати рекрутера, що ти його ідеальний кандидат.

Тренінг "Методологія управління проєктами SCRUM"

Тут ти дізнаєшся які є переваги цієї гнучкої методології та зможеш на практиці її застосувати. А також поговоримо:

• у чому специфіка ринку ІТ
• які є цінності у розробці ПЗ та готового продукту загалом
• які ще є підходи до розробки та у яких випадках вони використовуються
• як зробити продукт з точки зору безпеки як для клієнта, так і для кінцевого користувача

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

Тренінг "Як заробити на міжнародному фрілансі UpWork першу 1000$"

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

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

• Робота з експертами
• Портфоліо
• Зворотній зв'язок
• Ефективне навчання
• Диплом
• Повний стек технологій
• Закритий телеграм-чат
• Геймифікація
• Допомога з працевлаштуванням для успішних студентів

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

• Олександр Гуцуляк - Solution Architect at TeachMagic
• Добрянський Юрій - CTO at Empeek
• Тарас Кундик - Frontend Developer at CodeLions
• Олег Коваль - Intermediate QC Engineer at SoftServe
• Володимир Ярошинський - Python Developer at NDA Company
• Юрій Кіт - Senior Software Engineer at TalentFly
• Маріна Мокра - IT and Business English
• Петро Жук - Web Software Developer at UKEESS Software House
• Анна Кузій - Intermediate Software Engineer at SoftServe
• Іванна Бабчанік - Senior Software Engineer at EPAM
• Михайло Гладченко - CEO & Founder at Asign
• Андрій Ровенський - Lecturer of Computer Science at Logos IT-Academy
• Тарас Погорецький - Senior Full Stack Engineer at EPAM

Курс для вивчення основ HTML, CSS та Javascript. Після курсу кожен студент отримає повний набір навичок, які необхідні для працевлаштування, а також свій проєкт для портфоліо.

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

Модуль: Soft Skills

Блок 1. Основи HTML, CSS

• HTML – засіб логічної розмітки веб-сторінки
  • Використовуючи структуру розмітки, можливо вносити дані на сторінку. У процесі першого модуля студенти навчаться описувати цю структуру, використовуючи HTML-теги
• Основи CSS
  • Селектори CSS
  • Оформлення елементів
  • Управління розміром і положенням блоків на сторінці
  • Поля і відступи
  • Порядок верстки блоку
  • Тестування результатів верстки
  • Базова анімація
  • Стандарт CSS3
  • Основні інструменти розробника

Блок 2. Основи JavaScript

• Базові та об’єктні типи даних
• Перетворення типів
• Змінні та правила їх іменування
• Умови, оператори, масиви, цикли, функції
• Області видимості, замикання
• Контекст виклику
• Керуючі конструкції
• Обробка помилок
• Введення в браузерні події
• Порядок обробки подій (event loop)
• Взаємодія з браузером DOM
• Функціями зворотного виклику (callback)
• Знайомство з бібліотекою Jquery

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

Реалізація landing page на HTML, CSS та Javascript з використанням SVG графіки, паралакс ефекту, перемикання вкладок, анімованої каруселі та анімованих блоків, використовуючи бібліотеку jQuery та плагіни до неї, а також з використанням бібліотеки для роботи із зображеннями.

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

• Живі заняття у вечірній час (19:00-22:00)
• Система оцінки знань
• 15 практичних завдань
• Дипломний проєкт для портфоліо
• Допомога у працевлаштуванні

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

• Андрій Моргун - Middle front-end engineer, LULU Software
• Богдан Адмін - Senior Software Engineer, NDA
• Роман Марченко - Senior Frontend Developer, Freelance

Ви почнете з основ верстки HTML та CSS. Вивчите JavaScript та фреймворки, а до кінця курсу навчитеся робити веб-сторінки та корпоративні сервіси. Отримаєте досвід роботи в команді та почнете кар'єру веб-розробника.

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

Базовий семестр

• Технології АІ
• Технології АІ для вирішення універсальних задач
• Хмарні технології та бази даних
• Orientation in development: Low-Code та No-Code платформи, Front-End та Back-End

Введення у Web. Структура HTML

• Введення у предмет
• Введення в мову розмітки. Мова розмітки гіпертексту HTML
• Правила запису тегів та їх атрибутів у стандарті HTML5. Синтаксичні відмінності HTML4, XHTML, HTML5
• Основні помилки у записах тегів
• Структура документа HTML5
• Кодування сторінки та meta-теги
• Класифікація тегів: лінійні та блокові
• Модель форматування тексту: заголовки та абзаци. Елементи p, h1..h6. Вирівнювання тексту блокових елементів: атрибут align
• Класифікація тегів: логічне та фізичне форматування
• Практика: створення найпростішої web-сторінки

Форматування за допомогою CSS

• CSS - каскадні таблиці стилів
• Теги без форматування div - блоковий, span - лінійний
• Аналогія HTML та CSS на прикладі лінійних та блокових тегів
• Додаткові властивості CSS для форматування тексту: letter-spacing, line-height, text-intend, text-transform, white-space, word-spacing
• Використання атрибутів class та id для завдання стилів
• Використання зовнішніх CSS-файлів стилів
• Практика: форматування тексту за допомогою CSS
• Створення списків
• Створення вкладених списків
• Форматування списків за допомогою CSS
• Списки визначень: dl, dd, dt
• Управління відступами та полями
• Практика створення списків

JavaScript та бібліотека jQuery

• Введення в JavaScript
• Об'єкт. Масиви. Об'єкт Array. Терміни. Об'єкти String, Date, Math. Введення в об'єкт. Введення в об'єктно-орієнтоване програмування
• Опрацювання подій
• Browser Object Model. Document Object Model
• Форми
• Перевірка достовірності форм. Використання куків
• Малювання за допомогою canvas, підтримка медіа-можливостей
• JSON, AJAX
• ECMAScript 6, ECMAScript 11
• Модульне тестування
• Структурні патерни
• Патерни проєктування
• Патерн MVS
• Принципи проєктування класів Solid
• Введення у jQuery. Події jQuery. Стилі та анімація. Взаємодія із DOM. AJAX та jQuery
• Командна праця. Управління програмними проєктами

Використання фреймворку Angular, React

• NodeJS
• Складання проєктів за допомогою Webpack та інших інструментів
• Angular
• React

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

• Заняття 2 рази на тиждень по 2 пари
• Структурована подача знань
• Підтримка викладачем
• Готовий проєкт для портфоліо
• Підготовка до працевлаштування

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

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

Структура курсу

• HTML&CSS + git&github
• Інструменти для інтерфейсного дизайну (Figma, Sketch, Adobe XD): Дизайн та прототипи
• Просунутий конструктор сайтів Webflow
• JavaScript
• Фреймворки (Vue та React)
• Додаткові бібліотеки та інструменти
• Підготовка до працевлаштування

Додаткові теми

HTML & CSS + git & github

• Фреймворки CSS (Sass, Less): Гнучке та ефективне написання стилів
• CSS-методології (BEM, OOCSS, SMACSS): Управління стилями
• Інструменти автоматизації (Gulp)
• Робота з ШІ (Copilot, Supermaven, ChatGPT)

JavaScript

Робота з бандлерами Webpack та Rollup: Взаємодія з зовнішніми даними.

Фреймворки (Vue та React)

• Робота з REST API: Взаємодія з зовнішніми даними
• Управління стейтом (Redux(React) / Pinia(VUE))
• Роутинг: Vue Router (VUE),(React router DOM) (React)
• Просунута типізація (TypeScript)
• Бібліотеки для роботи з HTTP-запитами (Axios, Vue Query (VUE), React Query (React)): Управління асинхронними запитами
• UI-бібліотеки компонентів (Shadcn ui, Tailwind CSS Components): Компоненти для швидкої розробки UI

Додаткові бібліотеки та інструменти

• Оптимізація продуктивності (Performance Optimization): Техніки підвищення швидкості
• Тестування (Jest, Mocha, Cypress): Забезпечення надійності та якості коду
• Server-Side Rendering (SSR): Next.js для React, Nuxt.js для Vue
• Motion UI, Framer Motion: Плавні анімації
• SVG анімації та маніпуляції: Векторна графіка
• WebGL та Three.js: 3D-графіка
• websocket

Проміжні результати

• Перші уроки: Розуміння HTML та CSS, створення простої веб-сторінки
• Наступні 8 уроків: Знання JavaScript, створення інтерактивних елементів
• Наступні уроки: Освоєння фреймворків, створення простого додатку
• Далі: Глибше вивчення інструментів автоматизації, управління станом, роутинг

Що отримає студент

Практичні навички

• Створення структурованих веб-сторінок за допомогою HTML
• Стилізація та модульність стилів з використанням CSS і Sass
• Додавання інтерактивних елементів за допомогою JavaScript
• Робота з фреймворками React або Vue для побудови сучасних веб-додатків
• Управління станом додатка з Redux(React) тa Pinia(VUE)
• Налаштування навігації між сторінками (роутинг)
• Автоматизація задач з Gulp
• Використання Git для контролю версій і командної роботи

Портфоліо

Студенти створять власне портфоліо з розробленими веб-додатками, що стане чудовою основою для подальшої кар'єри.

Кар'єрні можливості

• Отримані знання дозволять претендувати на позиції фронтенд-розробника
• Можливість працювати над простими та середніми проєктами
• Високі шанси на працевлаштування з початковою зарплатою від $500 до $1000 на місяць

Де можна використати ці навички

• Кар'єра в ІТ: Можливість почати кар'єру у сфері веб-розробки та з часом стати провідним фахівцем
• Фриланс: Виконання замовлень на створення та підтримку веб-додатків для клієнтів з усього світу
• Особисті проєкти: Реалізація власних ідей та стартапів, створення персональних або комерційних веб-додатків

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

• Допомога ментора
• Практика
• Вік: від 13 до 17
• Інтенсивність - 2 заняття на тиждень
• Сертифікат про проходження курсу
• Проєкт в портфоліо

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

• Тарас - Front-end Developer
• Назар - React & Next.js Developer