Взагалі не рекомендую цю школу! Жахливий сервіс, де вас не попередять про зростання цін, клієнтоорієнтованість взагалі жах! На усі зауваження відповідь дають «зафіксував», коли провина саме лежить на школі та надані послуг.
Роблять усі умови, щоб ви сплатили пакетом, кажуть що якщо щось дитині не сподобається то повернуть кошти , але повертають вони 30% з того , що повинні. Звичайно, що це прописано у оферті на 9 сторінок, але при продажу кажуть зовсім інше і в тебе не виникає навіть сумнівів, що таке може бути!! Я проходила навчання раніше і в інших школах і усе було прозоро, відповідально і тд, а тут просто пробили дно.
Ще важливе зауваження- при підписані договору заявляли, що ціна закріплюється на весь період навчання, але потім раптом все змінилось і навчання подорожчало на 15%. Ось такий сервіс, тємкі муткі
Курси Frontend Developer: HTML та CSS
Порівняння усіх курсів
- 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
- Python
- Frontend
- Web & Mobile Design / UI/UX
Курс присвячений основам web-дизайну та програмування. Заняття проходять в режимі онлайн-трансляції, а після закінчення курсу студенти отримають сертифікат.
Програма курсу
Web-дизайн
- Figma, розбір вектора, створення простих іконок та ілюстрації, підбір ілюстрації на стоках
- Робота з сітками та шрифтами - установка шрифтів. Основи створення простого лендингу
- Робота з кнопками, іконками (категоризація), основи кольору
- Оформлення Дизайн системи (UI kit) зі всіма елементами, створення лого на основі існуючого шрифту
- Оформлення сайту - шапка, тіло, футер, створення малої карточки продукту, тексти для сайту
- Оформлення кейсу з сайтом для портфоліо або розбір існуючих портфоліо
Front-end
- Абсолютні та відносні шляхи, файлова структура, структура HTML
- HTML теги, посилання, списки, таблиці
- СSS, підключення, селектори та комбінування
- Псевдокласи, псевдоелементи, шрифти, інструменти розробника
- Зображення, графіка, фон
- Позиціювання, Overflow, Float
- Flex
- HTML 5
- Трансформації, Transition
Python
- Вступ до Python та основний синтаксиc
- Потік керування та функції
- Малювання з модулем turtle
- Списки та кортежі
- Словники
- Створення телеграм-бота
Особливості курсу
- Базовий курс для дітей 12-17 років
- Викладачі - практикуючі фахівці з великим досвідом роботи
- Навчання зосереджене на практиці
- Можливість брати участь в програмі Hillel EVO
- До шостого заняття ви можете повернути 100% внесених за навчання коштів
Викладачі курсу
- Єлизавета Чепугова - Graphic Designer в Nasha Idea
- Єгор Ліфіренко - Python Developer
- Владислав Дикий - Front-end Developer в Web Generator
- Роман Поплєтухин - Front-end Developer at Meduzzen
- Frontend
Ти отримаєш не лише фундаментальні знання, але й навчишся використовувати найновіші технології та інструментами. Ти швидко навчишся оформляти сторінки так, щоб вони виглядали стильно та професійно. А головне ти закладеш міцний фундамент для подальшого розвитку в Front-end.
Програма курсу
МОДУЛЬ 1: Фундамент веброзробки: HTML, CSS, BEM
- Вступ
- Що таке HTML, CSS та JavaScript
- Правила оформлення коду
- Перший кодінг
- Блокові та рядкові елементи
- Інструменти розробника(dev tools)
- Блокова модель
- Методи підключення CSS
- Основи CSS: перші кроки у стилізацію
- Робота з FTP, створення робочого простору, робота з файлами
- Формування URL для підключення файлів
- Практична верстка
- Властивість box-sizing
- Властивість display: inline-block
- Класнеймінг та простір імен
- Поняття кросбраузерності
- Reset.css
- Підключення шрифтів
- Знайомство з сервісом Google Fonts
- Безпечні та варіативні шрифти
- Формування відносних шляхів для підключення файлів проєкту
- Імпорт стилів
- Розширення структури проєкту
- Знайомство зі штучним інтелектом: Grok, ChatGPT, DeepSeek. Роль AI та його використання у розробці
- HTML-таблиці та їх верстка
- Створення навігації
- Одиниці виміру: px, em, rem, vh, vw
- Перехід проєкту на використання em та rem
- Колір в CSS
- Специфічність стилів
- Використання CSS-селекторів
- Flexbox layout
- Основи гнучкої верстки
- CSS псевдокласи :first-child, :last-child, :nth-child
- CSS властивість z-index
- Властивість position та його значення static, relative, absolute, fixed, sticky
- Псевдоелементи ::before і ::after
- Верстка блоку "хронологія подій"
- Відпрацювання нестандартних бордерів у блоках
- Верстка блоку "Цитата"
- Методологія BEM: блок, елемент, модифікатор, мікси
- Функція calc()
- CSS-змінні
- Конструктор іконок
- Конструктор кнопок
- CSS псевдокласи :hover, :active, :focus
- Використання змінних css
- Робота з формами: <input>, <textarea> та <select>
- Конструктор форм
- Стилізація чекбоксів, радіокнопок та інпутів для завантаження файлів
- Старт проєкту
- Знайомство з Node.js, npm, Vite.js, SCSS та Handlebars
- Робота з Vite.js, вивчення SCSS та Handlebars
- Закріплення пройденого матеріалу методології BEM. Верстка проєкту
МОДУЛЬ 2: Динамічний веб та адаптивна верстка
- CSS-анімації: властивість transform, правило @keyframes та CSS animation
- Анімація блоків
- Використання AI для анімації (Grok, ChatGPT, DeepSeek)
- Розробка покадрової анімації за допомогою властивості steps()
- Вивчення структури SVG-розмітки: базові та складні елементи, атрибути та оптимізація
- Сучасні інструменти вебанімації: бібліотеки AOS.js, GSAP, та інтеграція JSON-анімацій через Lottie
- Динамічні SVG-елементи та анімація з використанням anime.js
- Адаптивна верстка та медіазапити: Mobile First і Desktop First
- Робота з макетами в Figma. Практична робота з адаптивною версткою
МОДУЛЬ 3: Фронтенд у дії: від макету до проєкту
- Vite.js
- Знайомство з фреймворком Tailwind CSS та його основними принципами
- Робота з Tailwind CSS
- Tailwind CSS у проєкті
- Закріплення навичок на практиці
- Vite.js
- Знайомство з Git
- Створення проєкту на Git
- Старт проєкту
- Робота над проєктом
- Git та публікація проєктів на GitHub Pages
- SVG-спрайти
- Старт роботи з JavaScript
- Змінні: let, const, var, використання console.log
- Git–робота з гілками: створення та перемикання
- Плагін NiceSelect2
- Типи даних у JavaScript: string, number, boolean, null, undefined, object, array
- Оператор typeof
- Git–merge гілок та робота з ними
- Бібліотека Tasty CSS-animated Hamburgers для бургер-меню
- Оператори порівняння та умовні конструкції в JavaScript: if/else, switch
- Робота над проєктом
- Пошук роботи та підготовка до працевлаштування
Навички які ти отримаєш після курсу
- Навички верстки сайтів будь-якої складності за макетами Figma
- Дотримання всіх сучасних вимог і стандартів
- Досвід використання найпопулярніших інструментів анімації
- Розробка інтерактивних елементів за допомогою JavaScript
Викладачі курсу
Ростислав Суслов - Senior HTML/Markup Developer
Подати заявку- Frontend
В рамках курсу Web-розробка для школярів студенти без досвіду в розробці вивчають HTML і CSS та JavaScript. Після успішного закінчення курсу студенти отримують достатньо знань і навичок для верстки сайту будь-якої складності.
Програма курсу
Основи HTML
- Знайомство з редактором коду
- Починаємо ознайомлення з HTML
- Основні теги, їх будова та властивості
Основи CSS
- Cascading Style Sheets (CSS)
- Застосування стилів у контексті HTML5
- Cелектори
- Колір CSS
- Прозорість
- Стилізація шрифтів
CSS Block Model
- Основні елементи CSS
- Знайомство з block model
Block Layout. Властивість display
- Створення макету сторінки за допомогою блокової верстки
- Властивість display
- Вирівнювання плаваючих елементів
Робота з формами
- Форми у HTML
- Елементи форм
- Атрибути value та name
- Кнопки, текстові поля, напрямок тексту, поле пошуку
- Поле введення пароля. Мітки та автофокус
- Елементи для введення чисел
- Повзунок. Прапорці та перемикачі
- Елементи для введення кольорів, url, email, телефону
- Валідація форм
FlexBox
- Що таке FlexBox. Flex Countainer
- Напрямок flex-direction. Flex-Wrap
- Порядок елементів Flex-Flow
- Властивість order. Вирівнювання елементів
- justify-content. Вирівнювання елементів
- align-items і align-self. Вирівнювання рядків та стовпців
- align-content
- Управління елементами. flex-basis, flex-shrink та flex-grow
- Властивість flex
Створення макету FlexBox. Media Queries
Bootstrap
Animation
Трансформації, переходи та анімації.
CSS: Grid
Введення в JavaScript
- Що таке JavaScript
- Основи синтаксису
- Коментарі
- Підключення зовнішнього файлу JavaScript
- Консоль браузера та console.log
- Змінні та константи
- Типи даних
JavaScript
- Оператори порівняння
- Логічні операції
- Операції присвоєння
- Умовні конструкції
JavaScript. JSON
- Робота зі String
- Масиви
- Конвертування у JSON
- Оператор for, forEach
- Оператор while
JavaScript. Робота з DOM
- Функції
- Об’єкти DOM
jQuery
- Selectors
- Events
- DOM
jQuery Effects and Animation AJAX JSON
Cookie and localStorage
Робота з localStorage. setTimeout, setInterval, Promise
- localStorage. setTimeout, setInterval
- Promise: async/await
Асинхронність
Сайт з даними
Canvas
- Малювання фігур
- Методи moveTo і lineTo
- Метод rect
- Fill, clip, arc, arcTo
Canvas Animation
- Комплексні фігури
- Малювання мишкою
- Canvas Animation
Slider
Canvas Animation. Control object
Creating a game
В кінці курсу виконується дипломний проєкт
Особливості курсу
- Невеликі групи
- Система особистих кабінетів
- Доступ до відеозаписів занять
- Викладачі практики
- Оперативна служба підтримки студентів
- Практичні заняття
Викладачі курсу
- Павло Зубак - Frontend Developer at Halo Lab
- Руслан Воропай - Інженер-електронік
- Олег Шевченко - Frontend Developer
- Вадим Ольховик - Python Full-Stack Web Developer
- Владислав Лещенко - React Developer at NIX
- Frontend
Пориньте в професію крок за кроком - від нуля до вашої першої пропозиції про роботу
План навчання
Базовий рівень
На курсі Frontend Fundamentals ти навчишся:
- Створювати сучасні адаптовані для мобільних пристроїв та десктопів вебсайти з високим рівнем SEO-оптимізації, використовуючи HTML, CSS і JavaScript
- Використовувати сучасні інструменти розробника на основі Visual Studio Code та Git/GitHub для публікації коду й розгортання проєкту
Після JavaScript/TypeScript ти вивчиш:
- Дві мови програмування - JavaScript та TypeScript, необхідні для створення Frontend, мобільних та Full Stack рішень
- Навчишся використовувати всі їхні ключові особливості, зокрема типи даних, синтаксичні конструкції та асинхронність
- Створювати інтерактивні елементи (валідацію, паролі, динамічні кнопки, елементи гри тощо) і розробляти серверні застосунки, створюючи код, що працює на Backend
Після Data Base Fundamentals ти зможеш:
- Розробляти й адмініструвати бази даних, необхідні для будь-яких повноцінних IT-рішень (як реляційні, так і нереляційні)
- Проєктувати та створювати таблиці і будувати запити до них з використанням мови SQL
Після DevOps для розробників ти навчишся:
- Розгортати, підтримувати та тестувати середовища і інфраструктури для виконання проєктів
- Автоматизувати процеси збірки і розгортання (CI/CD) у тому числі з використанням контейнерів
Поглиблений рівень
Після Практичного React ти навчишся:
- Створювати вебзастосунки з React, Node.js, Next.js та мовами програмування JavaScript/TypeScript, а також тестувати їх
- Принципів SOLID та знатимеш, як їх застосовувати
- Працювати в команді за методологією SCRUM та прокачаєш soft skills
- Створювати повністю функціональний вебпроєкт
Проєктний рівень
Після проєктного навчання ти вмітимеш:
- Працювати за методологією Agilе (SCRUM)
- Писати якісний код, покривати його Unit-тестами
- Розробляти застосунки з використанням JavaScript та сучасних фреймворків (React/Node.js)
- Ефективно працювати в проєктній команді: оцінювати задачі, розставляти пріоритети та працювати з дедлайнами
- Рев'ювити код своїх тіммейтів
- Працювати з проєктною документацією та інструментами розробки, системами керування завданнями та обліку дефектів (GitHub Project)
Особливості курсу
- Графік 2-3 рази на тиждень переважно у вечірній час
- Живі онлайн-заняття з менторами, записи всіх занять і чат в Discord
- Сертифікат про проходження курсу
- 70% програми - практичні завдання з перевіркою
- Підтримка ментора
- Можливість навчатися в будь-який час по записах і брати паузу між курсами
- Навчаємо використовувати сучасні ШІ-помічники та інструменти
- Спільнота однодумців у Discord
- Доступ до додаткових e-курсів
- Безкоштовний розмовний клуб з англійської
- Закриті події з експертами компанії
Викладачі курсу
- В'ячеслав Колдовський - Full Stack Developer
- Владислав Хричов - Full Stack Developer
- Володимир Паньків - Full Stack Developer
- Михайло Плеша - System Administrator
- Дмитро Міночкін - Cloud Architect
- Олег Іванюк - Full Stack Developer
- Владислав Тимощук - Full Stack Developer
- Ігор Капацила - Full Stack Developer
- Frontend
План курсу
Вступ до курсу
Розуміння взаємодії веб-браузерів та веб-серверів. Представляємо інструменти: Інструменти розробника веб-браузера, засоби прототипування веб-сторінок, IDE, робота з GitHub.
HTML
Структура документа HTML, пари тегів, елемент, посилання, вкладеність, перевірка HTML, нові та застарілі теги в HTML, основи зображень, відео та аудіо, додавання карти, створення форми з відправкою на email. Командна робота над проєктом в GitHub.
Основи CSS
Додавання CSS на веб-сторінку, селектори та їх специфічність, приєднання шрифтів, вбудований та блок-потік, позиціонування CSS, стилі браузера за замовчуванням та їх очищення.
Практикум з верстки в CSS
Модель FlexBox та Grid. Медіа-запити. Створення типової сторінки з адаптивною версткою.
CSS-фреймворки. Bootstrap and Tailwind
Введення до CSS-фреймворків, приєднання їх до сторінки та створення типових елементів веб-сторінки.
Поглиблений CSS
Поглиблені теми в CSS, анімація, трансформація. Створення анімованого бургер-меню.
Вступ до JavaScript
Додавання JavaScript на веб-сторінку, коментарі, типи даних, оголошення змінних, перетворення типів, функції, умови, тернарний оператор.
Цикли та масиви в JavaScript
Цикли, масиви та їх методи, анонімні та стрілкові функції.
Робота з об'єктами в JavaScript
Об'єкти, різні способи їх створення, JSON, прототипне наслідування, класи.
Робота з DOM та BOM в JavaScript
Вступ до BOM/DOM, пошук елементів на DOM, модифікація DOM, встановлення обробників подій, створення динамічних елементів (карусель елементів та ін.).
Взаємодія з сервером та основи NodeJS
Основи асинхронного програмування в JavaScript. Використання Fetch для відправки та отримання даних з сервера. Використання NodeJS для створення простого сервера. Доступ до API, у тому числі Open AI для штучного інтелекту.
Інтернет-магазин
Створення простого, але повнофункціонального інтернет-магазину (завантаження списку товарів з бекенду, збереження товарів в корзині, виведення інформації про товар в модальному вікні, відправка замовлення на email).
Бонусний модуль. Вступ до React та NextJS
Перші кроки до створення додатків з React/NextJS.
Після закінчення курсу ти вмієш:
- Створювати коректну розмітку HTML-сторінки і перевіряти її за допомогою валідатора
- Писати селектори в CSS
- Створювати CSS-стилі, зокрема для верстки сторінки з використанням FlexBox та CSS Grid Layout та підтримкою responsive і візуальних ефектів
- Створювати JavaScript-код для вирішення типових задач клієнтського веб-програмування
- Структурувати і проектувати JavaScript-код з використанням функцій та об'єктів, обирати та створювати коректні колекції даних, а також оформлювати код відповідно до Google JavaScript Style Guide
- Інтегрувати JavaScript і HTML, зокрема знати різні варіанти включення JavaScript до HTML, а також задання обробників подій, створення HTML-форм, побудова і використання регулярних виразів у JavaScript і HTML
- Здійснювати пошук помилок за допомогою вбудованого відладчика у браузері, моніторити використання ресурсів, користуватися консоллю для виводу інформації
- Використовувати бібліотеку jQuery для маніпуляції елементами DOM, створення базових ефектів та виконання Ajax-запитів
- Створювати і виконувати Ajax/Fetch-запити, використовувати формати XML і JSON для передачі даних
- Використовувати Git для збереження версій проєкту і публікації сайту на GitHub
Особливості курсу
- Не потрібно розтягувати навчання на роки: опанувати основи HTML, CSS i JavaScript можна за лічені тижні
- Це базовий курс, проходження якого дозволить прискоритись у вивченні інших мов програмування, що використовуються у Web, зокрема C#, Python чи Java
- Доступний кожному: вивчення HTML5, CSS3 i JS не потребує надзусиль чи додаткових знань з комп'ютерних наук
- Знаючи HTML5, CSS3 i JS, ти легко налагодиш взаємодію з веб-дизайнерами чи девелоперам
- HTML/CSS/JS - це комплект із трьох мов, які розуміють усі веб-браузери (Safari, Firefox, and Google Chrome та ін.)
- HTML, CSS і JS дозволять тобі створювати сучасні, адаптовані для мобільних пристроїв та десктопів веб-сайти з високим рівнем SEO-оптимізації
- Підтримка ментора впродовж навчального процесу
- Підсилення твого CV
- Доступ до додаткових е-курсів для навчання у власному темпі
- Онлайн-курси за рівнем англійської та Speaking Club
Викладачі курсу
Vyacheslav Koldovskyy - 20 років професійного досвіду в ІТ
Подати заявку- 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) для створення і розробки проєкту
Особливості курсу
- Допомога ментора
- Практика
- Проєкт в портфоліо
- Сертифікат про проходження курсу
- React
- Frontend
Приєднуйся та розвивай свої навички з кодування: навчайся у власному темпі з допомогою необхідних матеріалів та підтримкою ментора, щоб підготуватись до стажування. Максимум уваги – на практику.
Програма курсу
Теми:
- 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 Академії
- 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
Подати заявку- Frontend
Курс надає знання та навички розробки 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-ти місяців після закінчення курсу
Сторінки
Читайте нас в Telegram, щоб не пропустити анонси нових курсів.
Відгуки про курси
У школі сподобалося, що ніхто не тягне кота за хвіст. Все чітко, по темі і з купою практичних задач. Брала курс Front-end. Вперше написала сайт, який відкривається не тільки в мене на ноуті. Вдячна викладачу за терпіння.
Як учасник стажування хочу підтримати компанію після відгуку нижче. Як колись написав один з учасників - "це вже не курси, а симуляція реальної роботи і ніхто не буде водити вас за ручку". Зі своєї сторони хочу підтвердити, що стажування проходить на дуже хорошому рівні для тих, хто прийшов туди за досвідом. Прикольний доволі складний проєкт, на момент моєї участі був доволі активний чат учасників, які допомагали один одному.
Після 10 років важкої фізичної праці на меблевій фабриці я й не сподівався, що в моєму житті щось може кардинально змінитись. Але бажання навчитися чомусь новому, спробувати себе в чомусь іншому й нарешті відчути повагу до своєї праці підштовхнуло мене до програмування.
Чесно кажучи, все це «айтішні» розповіді про басейни, більярди, фітнес-зали, гнучкий графік і круте ставлення на роботі здавалося мені вигадкою. Але вирішив ризикнути. Вступив на курс. І знаєте що? Вже через кілька тижнів зрозумів - це моє.
Було важко. Деякі речі давались із боєм. Але цікавість і підтримка менторів тримали на плаву. Найбільшим шоком стало те, що вже через два місяці після старту навчання мені запропонували пройти співбесіду на позицію верстальника в одній компанії. Пройшов. З першого разу. Після 10 років, де максимум що змінювалося — це розміри меблів.
Зараз я вже на третьому місяці випробувального терміну. Працюю з HTML, CSS і JavaScript. Робота не легка, але я кайфую. Радію, що наважився. І хочу сказати всім, хто сумнівається: у вас усе вийде, якщо не здаватись.
Дякуємо за ваш надзвичайно щирий і надихаючий відгук!
Ваша історія - це найкраще підтвердження того, що зміни можливі в будь-якому віці й з будь-якого старту. Ви - приклад сили волі, наполегливості та віри в себе. Дуже радіємо, що навчання стало для вас тим самим кроком, який відкрив нові можливості та новий етап життя.
Пишаємося, що ви змогли знайти своє місце в ІТ і вже працюєте за спеціальністю! Нехай далі буде ще більше професійних перемог, задоволення від роботи та впевненості у власних силах. Дякуємо, що обрали GoIT і поділилися своєю історією!
