Web Developer

Стань Web розробником. Отримай на курсі навички веб-розробки для старту роботи в ІТ, що охоплює HTML, CSS, JavaScript та основи ReactJS. Навчись створювати динамічні веб-сайти, використовуючи сучасні технології та отримані практичні навички.

ТРИВАЛІСТЬ КУРСУ

60 год

МІСЯЦІВ НАВЧАННЯ

Кількість лекцій

Вартість

Безкоштовно

Подати заявку Програма курсу Про проєкт

Проєкт “Future in IT” імплементується тренінг-центром QALight в межах програми «Професійна освіта в Україні/Skills4Recovery», яка реалізується Deutsche Gesellschaft für Internationale Zusammenarbeit (GIZ) GmbH, що діє за дорученням Федерального уряду Німеччини.

Початок навчання та графіки

2 групи

Група 1

Старт 29 січня

Пн

Вт

Ср

Чт

Пт

Сб

Нд

Пн

19:00 - 20:30

Ср

19:00 - 20:30

Пт

19:00 - 20:30

Група 2

Старт 29 січня

Пн

Вт

Ср

Чт

Пт

Сб

Нд

Пн

19:00 - 20:30

Ср

19:00 - 20:30

Пт

19:00 - 20:30

Про курс

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

Курс Web Developer призначений для тих, хто хоче долучитися до захоплюючого світу веб-розробки. Він розкриває основи створення веб-сайтів, від проєктування до програмування:

Основні поняття: Вивчення ключових інструментів розробника, прототипування веб-сторінок і інтегрованих середовищ розробки (IDE).

HTML: Вам буде представлено структуру документа, основи роботи з тегами, зображеннями, семантичною розміткою, таблицями, списками та формами.

CSS: Ви розглянете, як стилізувати веб-сайт, включаючи селектори, позиціонування, шрифти, флексбокс, сіткову верстку та адаптивний дизайн за допомогою медіа-запитів.

Bootstrap: Поглиблене вивчення популярного фреймворку для створення адаптивних веб-сайтів.

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

DOM: Освоєння маніпуляцій з документом в реальному часі за допомогою JavaScript.

Fetch/Ajax, NodeJS: Вивчення асинхронних запитів та серверної частини розробки за допомогою NodeJS.

Вступ до React: Ознайомлення з однією з найпопулярніших бібліотек для створення інтерактивних веб-застосунків.

GPT-Chat: Основи інтеграції розширених чат-ботів на основі GPT в веб-застосунки.

Хто такий Web Developer:

Веб-розробник — це фахівець, який створює веб-сайти та веб-додатки. Ця роль може включати різноманітні завдання, від дизайну інтерфейсу до написання коду для бекенду.

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

Спеціалізація: Є розробники, які спеціалізуються на фронтенді (зовнішній вигляд сайту), бекенді (серверна частина, бази даних) або як full-stack розробники (займаються обома напрямками).

Мови програмування: Веб-розробники використовують різні мови і технології, такі як HTML, CSS, JavaScript, PHP, Ruby, Python та інші.

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

Додаткова інформація про цю професію:

Командна робота: Часто веб-розробники співпрацюють з дизайнерами, менеджерами проєктів, маркетологами та іншими спеціалістами.

Творчість та логіка: Хоча розробка — це технічна діяльність, веб-розробники також проявляють творчість, особливо при дизайні інтерфейсу та користувацького досвіду.

Фреймворки та бібліотеки: Щоб прискорити процес розробки, використовуються фреймворки (наприклад, React, Angular, Vue для фронтенду або Express, Django, Rails для бекенду).

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

Ринок праці: Із зростанням інтернет-присутності компаній та організацій, попит на веб-розробників постійно зростає.

Вимоги до попередньої
підготовки студентів

технічна освіта

Викладачі та ментори курсу

Курс ведуть провідні експерти ринку, а практика максимально наближена до реальних робочих завдань.

Web Developer

Викладач

Іван Ніконов

Викладач курсу з Full-Stack розробки, досвідчений фахівець з понад 20-річним стажем у сфері IT. Має глибокі знання в роботі з основними інструментами та технологіями, включаючи JavaScript, HTML, CSS, PHP, SQL, VueJS, ReactJS та Laravel. Викладач ефективно керував технічними командами, брав участь у міжнародних проєктах та має вищу освіту з математики.

Web Developer

Викладач

Дмитро Верна

Професійний тренер з frontend-розробки, має багатий досвід у створенні шаблонів для CMS, таких як Wordpress, Joomla та Drupal. Працював у провідних студіях, таких як «inFocus», «WOWSite» та «Intend». Володіє професійними навичками у HTML5, CSS3, JS, React JS, BOOTSTRAP, LESS, GULP, GIT, PHP, MYSQL та Laravel.

Web Developer

Ментор

Микола Морозов

Спеціаліст із фронтенд-розробки. Має досвід викладання курсів із Front-end для початківців та володіє широким спектром навичок: HTML, CSS, JavaScript, Git, WordPress, Sass, Bootstrap, NPM, Figma.

Web Developer

Ментор

Роман Крушановський

Висококваліфікований фахівець з понад 7-річним досвідом у Java, JavaScript/Node.js/Typescript розробці. Має широкий практичний досвід у Mobile/Desktop/Web розробці програмних продуктів. З 2018 року є Blockchain фахівцем з досвідом інтеграції Web3 технологій до проєктів.

Web Developer

Ментор

Андрій Тарасенко

Фахівець з фронтенд-розробки, має великий досвід у створенні і підтримці великих односторінкових додатків (SPA) та розробці веб-застосунків з відповідним і адаптивним UI. Експерт володіє високим рівнем навичок у роботі з Angular, RxJS, TypeScript, JavaScript (ES6+), а також має досвід в імплементації бібліотек UI, таких як Material Design, PrimeNg та AgGrid.

Web Developer

Ментор

Влад Солонко

Висококваліфікований ментор і Full-stack розробник із 9-ти річним досвідом викладання. Спеціалізується на створенні високонавантажених Single Page Applications (SPA) на стеку React. Експерт в повному циклі розробки з фокусом на оптимізації та високій продуктивності. Сертифікований ментор, який передає знання та сприяє професійному росту. Впроваджує сучасні підходи в розробці, завжди в пошуку можливостей для удосконалення та розвитку.

Курс для вас, якщо Ви

Українка/українець

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

Хочете змінити професію

Якщо Ви хотіли б/потребуєте зміни професії. Прагнете стати Web розробником, розумієте специфіку професії, маєте хороше підґрунтя та базові знання зі спеціалізації.

Знаєте англійську та математику

Маєте з англійської рівень Intermediate і вище, щоб спілкуватися та читати англомовні матеріали, а математику знаєте, як мінімум, на хорошому шкільному рівні.

В активному пошуку роботи

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

Маєте можливість навчатися щодня 3-5 годин

Ви готові зануритися в інтенсивний навчальний процес, який забезпечить Вам міцну основу у стислі строки, відповідально ставитеся до виконання домашніх завдань та відвідувань онлайн-лекцій. Маєте час в рамках даного проєкту на проходження окрім основного курсу - додаткового навчання на курсі Soft Skills (детальніше на першій сторінці проєкту).

Маєте комп’ютер/ноутбук та інтернет-з’єднання

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

Українка/українець

В активному пошуку роботи

Хочете змінити професію

Маєте можливість навчатися щодня 3-5 годин

Знаєте англійську та математику

Маєте комп’ютер/ноутбук та інтернет-з’єднання

Маєте запитання? Пишіть foundation@qalight.ua

Як буде відбуватися навчання

Живі онлайн-лекції (тричі на тиждень в програмі для відеоконференцій Zoom), практичні заняття, доступ до відеозаписів занять

Зворотній зв’язок від викладачів та менторів (за допомогою телеграм-чатів)

Особистий кабінет (зручний простір для студентів)

Додаткові ресурси (дозволять вивчати матеріал глибше та зрозуміліше)

Домашні завдання (закріплення отриманих знань, розвиток навичок)

Залік наприкінці курсу (можливість підсумувати всі набуті знання та навички)

Свідоцтво про закінчення курсу

Для отримання свідоцтва про проходження навчання необхідно: виконати не менше 80% домашніх завдань та успішно скласти іспит або захистити фінальний випускний проєкт

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

Блок HTML та CSS

Лекція 1

Інтегроване середовище розробки (IDE)

Редактор вихідного коду. Emmet. NodeJS встановлення та запуск. Пакетний менеджер NPM. Ініціалізація проєкту. Файл package.json. Система контролю версії Git. Реєстрація на GitHub. Персональний сайт на GitHub. Структура веб-проєкту. Початкова розмітка. Допустимі типи документів. Мобільний значок сайту

Лекція 2

HTML теги

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

Лекція 3

Каскадні стилі сторінок (CSS)

Синтаксис CSS. Універсальні атрибути. Класи та ідентифікатори. Глобальний стиль документа. Практика стилізації. Нормалізація. Простір імен. Правила побудови CSS. Правила @

Лекція 4

CSS Селектори

CSS-селектори, псевдокласи та псевдоелементи. Одиниці вимірювання CSS: абсолютні, відносні, для управління кольором. CSS кольори. Селектор нащадка. Спадкування, каскадність та пріоритети у CSS

Лекція 5

Стилізація шрифтів та тексту

Властивість font. Правило @font-face. Embed Font. Font Awesome. Зовнішні шрифти. Текстові параметри елементів. Вирівнювання тексту. Великі та малі літери. Підкреслення, закреслення тексту. Тінь для тексту. Міжсимвольний, міжрядковий інтервал

Лекція 6

Селектори псевдокласів

Псевдокласи посилань. Динамічні псевдокласи. Псевдокласи дії користувача. Псевдокласи стану інтерфейсу. Псевдокласи структури та положення. Псевдоелементи.

Лекція 7

Графічні формати

Растрова графіка – PNG, JPEG, GIF. Векторна графіка – SVG. Елемент img. Робота з фоном. Колір фону. Фоновий малюнок. Масштабування фону. Декілька фонових картинок. Лінійний градієнт. Радіальний градієнт

Лекція 8

Блокова модель документа

Блокові елементи. Рядкові елементи. Ширина та висота. Внутрішні відступи, властивість padding. Зовнішні відступи, властивість margin. Рамки. Стандартна блокова модель. Колапс зовнішніх відступів. Властивість box-sizing. Керування типом елемента, властивість display

Лекція 9

Управління потоком

Властивість float. float та ширина. float та випадання з потоку. Властивість clear. Вкладені селектори. Обтікання елементів. Псевдоелементи :: before та :: after. Властивість overflow. Керування відображенням вмісту блокового елемента. Позиціювання. Відносне позиціонування. Абсолютне позиціонування: координати, зміна точки початку координат, відносні координати та розміри, координати за умовчанням. Фіксоване позиціонування. Управління порядком шарів

Лекція 10

Модуль flex

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

Лекція 11

Модуль CSS Grid Layout

Grid контейнер, grid tracks, grid лінії, grid-комірки, grid-області, жолоби (gap), розташування елемента, управління вирівнюванням, координати елементів, іменовані області.

Лекція 12

Чуйний дизайн

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

Лекція 13

Форми та Таблиці

Рядки та комірки таблиці, заголовок таблиці, угруповання верхніх рядів та осередків, угруповання нижніх рядів та осередків, стовпчик таблиці, угруповання колонок таблиці, рядкова таблиця, горизонтальне та вертикальне вирівнювання таблиці, межі таблиці, елемент form. інтерактивні елементи, атрибути тега input, управління фокусом, взаємодія з клавіатурою, кнопки, мітки елементів, опис елементів, перемикачі, властивість cursor

Лекція 14

CSS-анімація

CSS-трансформації. Властивості трансформації. Функції трансформації. CSS-переходи Властивості. Тривалість анімації. Затримка анімації. Функція часу та затримка. Ключові кадри анімації. Правило @keyframes. Управління анімацією та плавними переходами

Лекція 15

Бібліотека шаблонів CSS Bootstrap

Глобальні стилі і налаштування, точки зупину, медіа запити, контейнери, система сіток, адаптивні класи, управління відступами, bootstrap компоненти.

Блок JavaScript

Лекція 16

Основи JavaScript

Використання коду, структура програми, коментарі. Strict Mode. Змінні. Найпростіші операції. Типи даних. Числа. Приведення типів. Оператори

Лекція 17

Розгалуження. Логічний тип

Керуючі конструкції if – else if – else та switch. Тернарний оператор

Лекція 18

Функції у JavaScript

Оголошення функцій. Аргументи, область видимості та hoisting у JavaScript. Анонімні функції та лямбди. Функції-стрілки. Математичні функції

Лекція 19

Рядки у JavaScript

Робота з рядками. Методи рядків. Регулярні вирази JavaScript. Використання регулярних виразів

Лекція 20

Об'єкти у JavaScript

Структура даних. Властивості об'єкта. Методи об'єкту

Лекція 21

Масиви у JavaScript

Робота із масивами. Методи масивів. Цикли. Переривання та продовження циклу

Лекція 22

DOM

Маніпуляція з DOM. Пошук елементів. Зміна властивостей та атрибутів елементів

Лекція 23

Події

Порядок обробки подій (Event Loop). Сплив і перехоплення. Делегування подій

Лекція 24

Замикання у JavaScript

Контекст виклику та замикання. Використання прототипів та успадкування. Callback-функції. Контекст this

Лекція 25

Формування DOM

Створення елемента. Створення вузлів. Видалення вузлів. Робота зі стилями. Шаблони в HTML Елемент template. Активація шаблонів. Клонування вузлів та шаблонів

Лекція 26

Функції вищого порядку

Перебір властивостей об'єкта. Властивість Array.prototype. Spread-оператори

Лекція 27

DOM-сховище

Способи зберігання даних у браузері DOM-сховище. Сховище Cookies. Сховище LocalStorage. Сховище sessionStorage

Лекція 28

Робота з html-формами

Події та обробники форм. Модальне вікно. Динамічна типізація

Лекція 29

Обробка помилок

Порядок виконання коду. Обробка помилок та налагодження. Консоль та dev tools. Об'єкт error. Конструкція Try Catch

Лекція 30

Технологія AJAX

Асинхронні події. Робота з SetTimeout та SetInterval. Властивості та методи об'єкта XMLHttpRequest. Асинхронний запит

Лекція 31

Доступ до даних

Формат JSON. Об'єкт JSON. Методи JSON. Проміси у JavaScript

Лекція 32

Метод fetch

Блок Основи ReactJS

Лекція 33

Основи JSX

Основи JSX. Розуміння SPA. Створення першої програми React. Структура проекту. JSX. Прості компоненти за допомогою JSX.

Лекція 34

Створення компонента React

Функціональний компонент. Створення компонента. Передача даних до компонентів. Метод render()

Лекція 35

Клас компоненту

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

Лекція 36

Життєвий цикл компонента

Життєвий цикл компонента. Загальні методи життєвого циклу React. Встановлення, оновлення і видалення.

Лекція 37

Hooks

Hooks. Вбудовані хуки React. Принципи роботи хуків. Кастомний хук.

Лекція 38

Стилізація компонентів

Стилізація компонентів. Додавання стилів до компонентів у React, використання модуля CSS

Лекція 39

Маршрутизація

Бібліотека react-router, маршрутизація у додатку

Лекція 40

GPT-Chat

Основи інтеграції розширених чат-ботів на основі GPT

Подати заявку