Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/9876| Назва: | Сайт онлайн — курсів з програмування, реалізований за допомогою фреймворку React |
| Автори: | Лавданська , Ольга В’ячеславівна Черненко, Даніл Олегович |
| Ключові слова: | web-платформа;Tailwind CSS;онлайн-курси;програмування;DevMaster;React;Vite;localStorage;frontend |
| Дата публікації: | 9-чер-2026 |
| Короткий огляд (реферат): | Кваліфікаційна робота присвячена розробці web-платформи онлайнкурсів з програмування DevMaster. Ресурс призначений для перегляду каталогу курсів, пошуку та фільтрації навчальних програм, ознайомлення з інформацією про курс, роботи з особистим кабінетом і відображення прогресу навчання. Актуальність роботи зумовлена розвитком цифрової освіти та потребою у зручних web-ресурсах для самостійного вивчення програмування. Метою роботи є розробка демонстраційної web-платформи DevMaster з використанням сучасних frontend-технологій і локального збереження даних у браузері. Об’єкт дослідження – процес створення web-орієнтованих інформаційних систем для онлайн-навчання. Предмет дослідження – структура, функціональність, інтерфейс і програмна реалізація webплатформи DevMaster. У роботі використано методи аналізу предметної області, порівняння аналогів, проєктування структури сайту, розробки інтерфейсу, роботи з localStorage та тестування web-ресурсу. Практичне значення полягає у створенні демонстраційної освітньої платформи, яка може бути основою для подальшого розвитку повноцінної системи онлайн-навчання з авторизацією, базою даних, тестами, сертифікатами та адміністративною панеллю. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/9876 |
| Розташовується у зібраннях: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| РЕП_БАК_Черненко _WEB-2211.pdf Restricted Access | 2.4 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра
на тему: «Сайт онлайн — курсів з програмування, реалізований за допомогою
фреймворку React»
Виконав: здобувач першого
(бакалаврського) рівня вищої освіти
4 курсу, групи WEB-2211
Спеціальності 126 «Інформаційні
системи та технології»
О П «Web-технології, Web-дизайн»
Черненко Даніл Олегович
Керівник: доцент кафедри
інформаційних технологій
проектування, к.т.н., доцент
Ольга ЛАВДАНСЬКА
Рецензент: доцент кафедри
інформаційної безпеки та
комп’ютерної інженерії, к.т.н., доцент
Тетяна МИРОНЮК
Черкаси – 2026 року
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
(повна назва)
Кафедра інформаційних технологій проектування
(повна назва)
Освітньо-кваліфікаційний рівень бакалаврський
(назва)
Спеціальність 126 «Інформаційні системи та технології»
(шифр і назва)
ЗАТВЕРДЖУЮ
Завідувач кафедри ІТП
Тетяна ПРОКОПЕНКО
« » 20 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА
Черненко Даніл Олегович
(прізвище, ім’я, по батькові)
1. Тема роботи Сайт онлайн — курсів з програмування, реалізований за допомогою
фреймворку React
Керівник роботи Лавданська Ольга В’ячеславівна, кандидат технічних наук, доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
Затверджено наказом Черкаського державного технологічного університету від
« » 20 року №
2. Строк подання здобувачем роботи _______
3. Вихідні дані до роботи Методичні рекомендації до кваліфікаційної роботи бакалавра
зі спеціальності 126 «Інформаційні системи та технології», ОП «Web-технології, Web-
дизайн»; матеріали з web-розробки, UX/UI-дизайну, адаптивної верстки й тестування web-
застосунків; офіційна документація React, Vite, Tailwind CSS, React Router, Vercel,
JavaScript, TypeScript і localStorage; аналіз освітніх web-платформ Codecademy,
freeCodeCamp, Stepik та Prometheus.
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно
розробити)
Постановка задачі, огляд предметної області web-платформ онлайн-навчання, аналіз
аналогів DevMaster, обґрунтування технічного завдання, проєктування структури, дизайну,
навігації та функціональних модулів web-платформи, обґрунтування вибору
інструментальних засобів розробки, реалізація головної сторінки, каталогу курсів, сторінки
курсу, особистого кабінету та сторінки входу, організація збереження даних у localStorage,
тестування адаптивності, працездатності, навігації, пошуку, фільтрації та порівняння
розробленої системи з аналогами, висновки, додатки.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень,
плакатів)
Навігаційна структура web-платформи DevMaster; модель наповнення web-платформи
DevMaster; схема організації даних web-платформи DevMaster у localStorage; схема
взаємодії сторінок web-платформи DevMaster; скріншоти основних сторінок сайту;
скріншоти головної сторінки, каталогу курсів, сторінки окремого курсу, особистого
кабінету користувача та сторінки входу; таблиця порівняння web-платформи DevMaster з
аналогами; таблиці тестування; ілюстрації результатів перевірки адаптивності,
продуктивності, працездатності та зручності використання web-платформи.
6. Консультанти розділів роботи
Розділ Прізвище, ініціали та Підпис, дата
посада
консультанта
завдання видав завдання прийняв
7. Дата видачі завдання 11 Лютого 2026 року
КАЛЕНДАРНИЙ ПЛАН
Строк
№ Назва етапів кваліфікаційної роботи
виконання
з/п бакалавра Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу бакалавра 11.02.2026 Виконано
Аналіз літературних джерел, об’єкта та предмета
2 16.02.2026 Виконано
дослідження
Написання теоретичного розділу кваліфікаційної роботи
3 03.03.2026 Виконано
бакалавра
Написання аналітичного розділу, аналіз існуючих
4 02.04.2026 Виконано
платформ онлайн-навчання програмуванню
5 Проєктування структури та функціоналу web-сайту 15.04.2026 Виконано
6 Практична реалізація web-сайту 02.05.2026 Виконано
7 Тестування web-сайту та підготовка висновків 04.05.2026 Виконано
Передзахист кваліфікаційної роботи бакалавра на
8 22.04.2026 Виконано
засіданні кафедри
9 Подання роботи завідувачу кафедри 26.05.2026 Виконано
10 Захист кваліфікаційної роботи бакалавра 09.06.2026 Виконано
Здобувач вищої освіти
(підпис) (прізвище та ініціали)
Керівник роботи
(підпис) (прізвище та ініціали)
АНОТАЦІЯ
Структура та обсяг роботи. Пояснювальна записка складається з трьох
розділів, викладена на 88 сторінках, містить 18 рисунків, 2 таблиці, 44 джерела
використаної літератури, 2 додатка.
Кваліфікаційна робота присвячена розробці web-платформи онлайн-
курсів з програмування DevMaster. Ресурс призначений для перегляду
каталогу курсів, пошуку та фільтрації навчальних програм, ознайомлення з
інформацією про курс, роботи з особистим кабінетом і відображення прогресу
навчання.
Актуальність роботи зумовлена розвитком цифрової освіти та потребою
у зручних web-ресурсах для самостійного вивчення програмування. Метою
роботи є розробка демонстраційної web-платформи DevMaster з
використанням сучасних frontend-технологій і локального збереження даних у
браузері.
Об’єкт дослідження – процес створення web-орієнтованих
інформаційних систем для онлайн-навчання. Предмет дослідження –
структура, функціональність, інтерфейс і програмна реалізація web-
платформи DevMaster.
У роботі використано методи аналізу предметної області, порівняння
аналогів, проєктування структури сайту, розробки інтерфейсу, роботи з
localStorage та тестування web-ресурсу.
Практичне значення полягає у створенні демонстраційної освітньої
платформи, яка може бути основою для подальшого розвитку повноцінної
системи онлайн-навчання з авторизацією, базою даних, тестами,
сертифікатами та адміністративною панеллю.
Ключові слова: web-платформа, онлайн-курси, програмування,
DevMaster, React, Vite, Tailwind CSS, localStorage, frontend.
SUMMARY
The structure and volume of the work. The explanatory note consists of three
chapters, set out on 88 pages, contains 18 figures, 2 tables, 44 references, and 2
appendices.
The bachelor’s qualification work is dedicated to the development of the
DevMaster web platform for online programming courses. The resource is designed
for browsing a course catalog, searching and filtering educational programs, viewing
course information, working with a personal account, and displaying learning
progress.
The relevance of the work is determined by the development of digital
education and the need for convenient web resources for independent programming
learning. The aim of the work is to develop the DevMaster demonstration web
platform using modern frontend technologies and local data storage in the browser.
The object of the study is the process of creating web-oriented information
systems for online learning. The subject of the study is the structure, functionality,
interface, and software implementation of the DevMaster web platform.
The work uses methods of subject area analysis, comparison of similar
systems, website structure design, interface development, working with
localStorage, and web resource testing.
The practical value lies in the creation of a demonstration educational
platform that can be used as a basis for further development of a full online learning
system with authorization, a database, tests, certificates, and an administrative panel.
Keywords: web platform, online courses, programming, DevMaster, React,
Vite, Tailwind CSS, localStorage, frontend.
ЗМІСТ
ВСТУП ................................................................................................................. 3
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ,
АНАЛОГІВ .......................................................................................................... 9
1.1 Опис предметної області .................................................................. 9
1.2 Доцільність розробки web-платформи онлайн-курсів з
програмування DevMaster ........................................................................ 13
1.3 Чинники, які впливають на розробку web-платформи онлайн-
курсів .......................................................................................................... 16
1.4 Аналітичний огляд існуючих web-платформ онлайн-навчання 19
Висновки до розділу 1 .......................................................................... 28
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ ...................... 30
2.1. Призначення web-платформи онлайн-курсів з програмування
DevMaster ................................................................................................... 30
2.2. Вимоги до дизайну web-платформи DevMaster .......................... 32
2.3. Структура сторінок web-платформи DevMaster ......................... 34
2.4. Навігація web-платформи DevMaster .......................................... 37
2.5. Наповнення сторінок web-платформи DevMaster ...................... 39
2.6. Вимоги до прототипу web-платформи DevMaster ..................... 41
2.7. Техніко-економічне обґрунтування доцільності розробки web-
платформи DevMaster ............................................................................... 43
Висновки до розділу 2 .......................................................................... 50
РОЗДІЛ 3. РОЗРОБКА WEB-РЕСУРСУ......................................................... 53
3.1. Обґрунтування вибору інструментальних засобів розробки .... 53
3.2. Опис програмної реалізації web-платформи DevMaster ............ 57
3.3. Організація даних і взаємодія з localStorage ............................... 62
3.4. Логіка маршрутів і обміну даними у web-платформі DevMaster
........................................................................................................... 65
3.5. Тестування web-платформи DevMaster ....................................... 68
3.6. Порівняння розробленої web-платформи з аналогами .............. 71
Висновки до розділу 3 .......................................................................... 73
ВИСНОВКИ ....................................................................................................... 75
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................... 77
ДОДАТОК А ...................................................................................................... 80
ДОДАТОК Б ...................................................................................................... 82
ЧДТУ 262223. 24 ПЗ
Змн. Арк. № докум. Підпис Дата
Розроб. Черненко Д. О. Літ. Арк. Аркушів
Перевір. Лавданська О. В. Сайт онлайн — курсів з 88
програмування, реалізований за
Рецензент
допомогою фреймворку React ФІТІС,
Н. контр. Лавданська О.В.
Пояснювальна записка кафедра ІТП, WEB-2211
Затверд. Прокопенко Т.О.
ВСТУП
У сучасних умовах web-технології відіграють важливу роль у розвитку
освітнього середовища, оскільки забезпечують швидкий доступ
користувачів до навчальних матеріалів, практичних завдань, інтерактивних
інструментів, результатів навчання та персоналізованих освітніх сервісів.
Особливо важливим використання web-орієнтованих ресурсів є у сфері
вивчення програмування, де процес навчання потребує не лише
опрацювання теоретичного матеріалу, а й регулярної практики, виконання
вправ, перегляду прикладів коду та поступового формування професійних
навичок.
Актуальність теми кваліфікаційної роботи зумовлена зростанням
потреби у доступних, зручних та функціональних web-платформах для
онлайн-навчання програмуванню. Сучасна освіта дедалі активніше
переходить у цифрове середовище, у якому користувач очікує отримати не
лише загальний опис курсу, а й зручний каталог навчальних програм,
можливість пошуку та фільтрації матеріалів, перегляд прогресу, роботу з
особистим кабінетом і зрозумілий інтерфейс для взаємодії з навчальним
контентом. У звіті UNESCO щодо використання технологій в освіті
зазначено, що цифрові інструменти мають розглядатися з погляду
доцільності, доступності, масштабованості та сталості їх застосування в
освітньому процесі [1].
Розвиток цифрової освіти також підтримується на рівні європейських
освітніх ініціатив. Digital Education Action Plan 2021–2027 визначає
цифрову освіту як важливий напрям формування якісного, інклюзивного та
доступного навчального середовища, здатного адаптуватися до потреб
цифрової епохи [2]. Це підтверджує доцільність створення web-платформ,
які можуть забезпечувати користувачів навчальними матеріалами,
інструментами для самостійного опрацювання курсів і засобами
відстеження результатів навчання.
Арк.
ЧДТУ 262223.24 ПЗ
3
Змн. Арк. № Документа Підпис Дата
Особливе значення такі платформи мають для навчання програмуванню,
оскільки ця сфера вимагає практикоорієнтованого підходу. На відміну від
багатьох теоретичних дисциплін, опанування програмування передбачає
постійне виконання прикладів, вивчення синтаксису мов, роботу з
алгоритмами, аналіз помилок, перевірку результатів і поступове
ускладнення навчальних завдань. Тому освітній web-ресурс має бути не
лише інформаційним сайтом, а й зручним цифровим середовищем, у якому
користувач може переглядати курси, обирати потрібний напрям,
продовжувати навчання, контролювати власний прогрес і зберігати основні
дані між сеансами роботи.
На сьогодні існує значна кількість платформ для онлайн-навчання
програмуванню, серед яких Codecademy, freeCodeCamp, Stepik, Prometheus
та інші освітні web-сервіси [3–6]. Вони надають користувачам доступ до
навчальних матеріалів, інтерактивних курсів, практичних завдань, тестів,
сертифікатів та інших інструментів дистанційного навчання. Водночас
частина таких платформ має складну структуру, різний рівень локалізації
українською мовою, обмежені можливості персоналізації або орієнтована
на окремий формат навчання. Для користувачів, які лише починають
вивчати програмування, важливими є простота навігації, зрозумілий
каталог курсів, швидкий доступ до навчального матеріалу, відображення
прогресу та мінімалістичний інтерфейс без зайвих елементів.
Саме тому доцільною є розробка демонстраційної web-платформи
онлайн-курсів з програмування DevMaster, яка поєднує основні функції
освітнього ресурсу в межах єдиної системи. Розроблюваний сайт
орієнтований на користувачів, які бажають ознайомитися з курсами з
програмування, переглядати інформацію про навчальні програми,
користуватися каталогом, відстежувати прогрес і працювати з
персональним кабінетом. Проєкт має демонстраційний характер, а
навчальні курси, представлені на сайті, взято з відкритого доступу. Дані в
межах реалізованого проєкту зберігаються засобами localStorage, що
Арк.
ЧДТУ 262223.24 ПЗ
4
Змн. Арк. № Документа Підпис Дата
дозволяє зберігати інформацію в браузері користувача між сеансами роботи
[10].
Розроблювана web-платформа DevMaster містить головну сторінку з
коротким описом ресурсу, блоком популярних курсів, перевагами
платформи та порівнянням з конкурентами. Каталог курсів передбачає
пошук, фільтрацію та відображення карток навчальних програм із
зазначенням категорії, рівня складності, тривалості, рейтингу, кількості
студентів, викладача та вартості. Сторінка окремого курсу містить опис
програми, інформацію про навчальні модулі, очікувані результати, вимоги
до користувача та елементи для продовження навчання. Особистий кабінет
користувача відображає інформацію про активні курси, прогрес, збережені
курси, досягнення, навчальну серію та тижневу ціль. Окремо реалізовано
сторінку входу в акаунт.
Для реалізації клієнтської частини web-платформи доцільним є
використання сучасних frontend-технологій. React забезпечує
компонентний підхід до побудови інтерфейсу, що дозволяє створювати
сторінки й елементи сайту як незалежні та повторно використовувані
частини [7]. Vite використовується як інструмент швидкого створення,
запуску та збирання сучасних web-додатків, що спрощує процес розробки
й тестування проєкту [8]. Tailwind CSS дає змогу формувати адаптивний,
візуально цілісний і мінімалістичний інтерфейс за допомогою утилітарних
CSS-класів [9]. Під час проєктування інтерфейсу також важливо
враховувати рекомендації WCAG щодо доступності web-контенту,
оскільки освітній ресурс має бути зрозумілим і зручним для широкого кола
користувачів [11].
Метою кваліфікаційної роботи є розробка web-платформи онлайн-курсів
з програмування DevMaster, призначеної для перегляду каталогу курсів,
ознайомлення з навчальними програмами, пошуку та фільтрації освітнього
контенту, відображення прогресу користувача, роботи з особистим
кабінетом і демонстрації основних можливостей освітнього web-ресурсу з
Арк.
ЧДТУ 262223.24 ПЗ
5
Змн. Арк. № Документа Підпис Дата
використанням сучасних frontend-технологій та локального збереження
даних у браузері.
Для досягнення поставленої мети необхідно вирішити такі задачі:
– проаналізувати предметну область web-платформ онлайн-навчання
та визначити особливості організації дистанційного навчання
програмуванню;
– дослідити існуючі аналоги освітніх платформ, зокрема Codecademy,
freeCodeCamp, Stepik і Prometheus, визначити їхні переваги, недоліки
та можливості використання окремих рішень у власній розробці;
– сформувати функціональні та нефункціональні вимоги до web-
платформи DevMaster;
– спроєктувати структуру web-сайту, логіку навігації, основні сторінки,
користувацькі сценарії та складові інтерфейсу;
– обґрунтувати вибір інструментальних засобів і технологій розробки,
зокрема React, Vite, Tailwind CSS та localStorage;
– реалізувати основні сторінки web-платформи, зокрема головну
сторінку, каталог курсів, сторінку окремого курсу, особистий кабінет
користувача та сторінку авторизації;
– реалізувати функціональні можливості пошуку, фільтрації курсів,
перегляду навчальної програми, відображення прогресу користувача,
збереження даних і роботи з демонстраційним акаунтом;
– виконати тестування працездатності, адаптивності, зручності
використання, коректності навігації та збереження даних у браузері;
– провести порівняння розробленої web-платформи з існуючими
аналогами та визначити її практичні переваги.
Об’єкт дослідження – процес створення web-орієнтованих
інформаційних систем для організації онлайн-навчання програмуванню.
Предмет дослідження – методи, засоби та технології проєктування і
розробки web-платформи онлайн-курсів з програмування, що забезпечує
Арк.
ЧДТУ 262223.24 ПЗ
6
Змн. Арк. № Документа Підпис Дата
перегляд навчальних курсів, взаємодію користувача з освітнім контентом,
відображення прогресу та локальне збереження даних.
Методи дослідження. У процесі виконання кваліфікаційної роботи
використано методи аналізу та узагальнення інформації для дослідження
предметної області онлайн-освіти; методи порівняльного аналізу для
визначення переваг і недоліків існуючих освітніх web-платформ; методи
структурного та функціонального проєктування для формування
архітектури сайту; методи моделювання користувацьких сценаріїв для
опису взаємодії користувача з платформою; методи компонентного
проєктування для побудови інтерфейсу засобами React; методи web-
програмування для реалізації клієнтської частини ресурсу; методи
локального збереження даних для організації роботи з localStorage; методи
тестування програмного забезпечення для перевірки працездатності,
адаптивності, коректності функціонування та зручності використання
розробленого сайту.
Практичне значення одержаних результатів полягає у створенні
демонстраційної web-платформи DevMaster, яка може бути використана як
приклад освітнього ресурсу для організації онлайн-курсів із
програмування. Розроблений сайт забезпечує централізоване подання
навчальних курсів, зручний перегляд інформації про програму навчання,
пошук і фільтрацію курсів, відображення прогресу користувача, роботу з
особистим кабінетом і локальне збереження окремих даних у браузері.
Такий підхід дозволяє продемонструвати основні принципи побудови
сучасної frontend-системи для дистанційного навчання без використання
складної серверної інфраструктури.
Розроблена система має практичну цінність завдяки поєднанню
інформаційного контенту, користувацьких функцій та сучасного
інтерфейсу. Темний мінімалістичний дизайн із фіолетово-синіми
акцентами забезпечує візуальну цілісність ресурсу, а карткова структура
каталогу спрощує сприйняття інформації про курси. Використання
Арк.
ЧДТУ 262223.24 ПЗ
7
Змн. Арк. № Документа Підпис Дата
localStorage є доцільним для демонстраційного проєкту, оскільки дозволяє
зберігати частину користувацьких даних без підключення повноцінної бази
даних. Надалі система може бути розширена шляхом інтеграції серверної
частини, бази даних, реальної системи авторизації, онлайн-редактора коду,
тестування знань, сертифікації та адміністративного керування навчальним
контентом.
Структура роботи. Кваліфікаційна робота складається зі вступу, трьох
розділів, висновків, списку використаних джерел та додатків. У першому
розділі розглянуто предметну область web-платформ онлайн-навчання,
проаналізовано сучасні аналоги, зокрема Codecademy, freeCodeCamp,
Stepik і Prometheus, визначено їхні переваги та недоліки, а також
сформульовано постановку задачі. У другому розділі обґрунтовано
технічне завдання, визначено функціональні та нефункціональні вимоги до
web-платформи, описано структуру сайту, користувацькі сценарії, вимоги
до дизайну, навігації, контенту та збереження даних. У третьому розділі
описано вибір засобів реалізації, процес розробки web-платформи
DevMaster, реалізацію основних сторінок і функціональних модулів,
тестування системи та порівняння отриманого результату з існуючими
аналогами.
Арк.
ЧДТУ 262223.24 ПЗ
8
Змн. Арк. № Документа Підпис Дата
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ,
АНАЛОГІВ
1.1 Опис предметної області
Web-платформи онлайн-навчання є важливою складовою сучасного
цифрового освітнього середовища, оскільки забезпечують користувачам
доступ до навчальних матеріалів, практичних завдань, тестів, персонального
прогресу та інших інструментів, необхідних для самостійного опанування
знань. Особливого значення такі ресурси набувають у сфері вивчення
програмування, де процес навчання потребує поєднання теоретичних
відомостей, прикладів коду, практичних вправ і поступового ускладнення
матеріалу
Онлайн-навчання програмуванню має низку особливостей, які
відрізняють його від традиційного подання освітнього контенту. Користувачеві
недостатньо лише прочитати теоретичний матеріал або переглянути
відеолекцію. Для ефективного засвоєння теми необхідно мати змогу
працювати з прикладами, порівнювати різні підходи до розв’язання задач,
виконувати практичні вправи, контролювати власний прогрес і повертатися до
раніше пройдених матеріалів. Саме тому web-платформи онлайн-курсів
повинні не лише виконувати роль інформаційного сайту, а й забезпечувати
зручну взаємодію користувача з навчальним контентом.
Предметна область web-платформ онлайн-курсів охоплює сукупність
процесів, пов’язаних із розміщенням, структуруванням, пошуком, переглядом
і проходженням навчальних матеріалів. До таких процесів належать
формування каталогу курсів, поділ курсів за категоріями та рівнями
складності, відображення опису навчальної програми, збереження прогресу
користувача, організація особистого кабінету, а також забезпечення зрозумілої
навігації між сторінками ресурсу. Для платформи, орієнтованої на
програмування, важливими є також наявність матеріалів із мов програмування,
Арк.
ЧДТУ 262223.24 ПЗ
9
Змн. Арк. № Документа Підпис Дата
web-розробки, frontend- і backend-технологій, баз даних, алгоритмів та інших
напрямів інформаційних технологій.
Сучасна онлайн-освіта активно розвивається під впливом цифровізації
суспільства. У звіті UNESCO щодо використання технологій в освіті
наголошується на важливості доцільного, доступного та ефективного
застосування цифрових інструментів у навчальному процесі [1]. Це означає,
що освітні web-ресурси мають не лише надавати доступ до матеріалів, а й бути
зручними, зрозумілими, адаптивними та придатними для різних категорій
користувачів. Зі свого боку, європейський план дій у сфері цифрової освіти
визначає цифрові технології як один із ключових чинників модернізації освіти,
підвищення її доступності та відповідності потребам сучасного суспільства
[2].
Для web-платформи онлайн-курсів важливим є правильне
структурування інформації. Користувач повинен швидко розуміти, які курси
доступні на сайті, до якої категорії вони належать, який мають рівень
складності, скільки часу потрібно для проходження та які навички можна
отримати після завершення навчання. Наявність пошуку й фільтрації значно
спрощує взаємодію з каталогом, особливо якщо кількість курсів збільшується.
Карткове подання курсів є зручним рішенням, оскільки дозволяє коротко
відобразити основні характеристики навчальної програми без перевантаження
сторінки зайвим текстом.
Важливим елементом освітньої web-платформи є сторінка окремого
курсу. Вона повинна містити детальний опис навчальної програми, перелік
модулів або тем, інформацію про викладача, рівень складності, тривалість,
очікувані результати навчання та умови проходження курсу. Така сторінка
допомагає користувачеві прийняти рішення щодо вибору курсу та зрозуміти,
чи відповідає він його поточному рівню підготовки. Для користувачів-
початківців особливо важливо, щоб інформація була подана чітко й
послідовно.
Арк.
ЧДТУ 262223.24 ПЗ
10
Змн. Арк. № Документа Підпис Дата
Окрему роль відіграє особистий кабінет користувача. Його наявність
дозволяє персоналізувати навчальний процес, відображати активні або
збережені курси, показувати прогрес, досягнення, навчальні цілі та інші дані.
Для освітнього ресурсу це є важливим чинником мотивації, оскільки
користувач бачить власний результат і може продовжити навчання з того місця,
на якому зупинився. Навіть у демонстраційному web-проєкті особистий
кабінет дозволяє показати принципи побудови персоналізованого інтерфейсу.
Сучасні web-платформи онлайн-навчання можуть мати різний рівень
складності. Частина з них є повноцінними системами керування навчанням із
серверною частиною, базою даних, системою оплати, сертифікацією,
відеолекціями, тестами та ролями користувачів. Інші можуть бути
демонстраційними або навчальними проєктами, які показують основні
принципи побудови освітнього web-ресурсу без складної серверної
інфраструктури. У межах кваліфікаційної роботи розглядається саме
демонстраційна web-платформа DevMaster, у якій основна увага приділена
frontend-реалізації, структурі інтерфейсу, каталогу курсів, сторінкам
навчальних програм, особистому кабінету та локальному збереженню даних.
З технічної точки зору, важливим аспектом предметної області є вибір
засобів реалізації. Для сучасних web-додатків доцільним є використання
компонентного підходу, який дозволяє розділяти інтерфейс на окремі
багаторазові елементи. React є одним із поширених інструментів для створення
користувацьких інтерфейсів і дає змогу будувати web-додатки на основі
компонентів [7]. Для швидкого створення та запуску frontend-проєктів може
використовуватися Vite, який спрощує процес розробки, локального
тестування та збирання застосунку [8]. Для оформлення інтерфейсу доцільним
є застосування Tailwind CSS, що дозволяє швидко створювати адаптивний
дизайн за допомогою утилітарних класів [9].
У демонстраційних web-проєктах важливим інструментом може бути
localStorage. Цей механізм дозволяє зберігати дані в браузері користувача між
сеансами роботи без підключення повноцінної серверної бази даних [10]. Для
Арк.
ЧДТУ 262223.24 ПЗ
11
Змн. Арк. № Документа Підпис Дата
платформи DevMaster це є доцільним рішенням, оскільки сайт виконує роль
прикладу готового проєкту, а курси взято з відкритого доступу. Використання
localStorage дозволяє реалізувати базові сценарії збереження даних, наприклад
інформацію про користувача, обрані курси або навчальний прогрес у межах
демонстраційної логіки.
Сучасна web-платформа онлайн-курсів може включати такі основні
компоненти:
– головну сторінку з коротким описом призначення ресурсу, перевагами
платформи та блоком популярних курсів;
– каталог курсів із картками, які містять назву, категорію, рівень
складності, тривалість, рейтинг, кількість студентів, викладача та
вартість;
– систему пошуку та фільтрації курсів за категоріями, рівнями складності
або іншими параметрами;
– сторінку детального перегляду курсу з описом програми, модулями,
очікуваними результатами та кнопками взаємодії;
– сторінку авторизації або входу в акаунт;
– особистий кабінет користувача з інформацією про курси, прогрес,
досягнення та навчальні цілі;
– механізм збереження окремих даних у браузері користувача;
– адаптивний інтерфейс для коректного відображення на різних
пристроях.
Перевагами web-платформ онлайн-курсів є доступність навчальних
матеріалів, можливість самостійного вибору темпу навчання, зручне
структурування освітнього контенту, підтримка персоналізованого досвіду
користувача та можливість швидкого оновлення інформації. Такі ресурси
дозволяють користувачам опановувати нові навички незалежно від місця
перебування та наявності традиційної аудиторної форми навчання.
Разом із перевагами існують і певні проблеми, характерні для освітніх
web-платформ. До них можна віднести перевантаженість інтерфейсу, складну
Арк.
ЧДТУ 262223.24 ПЗ
12
Змн. Арк. № Документа Підпис Дата
навігацію, недостатню адаптивність, відсутність зрозумілої структури курсів,
обмежену локалізацію українською мовою, слабку персоналізацію
навчального процесу та недостатньо зручне подання прогресу. Для
користувачів-початківців ці недоліки можуть ускладнювати процес вибору
курсу й знижувати мотивацію до навчання.
Отже, web-платформи онлайн-курсів із програмування є актуальним
напрямом розвитку web-орієнтованих інформаційних систем. Вони поєднують
інформаційне наповнення, структурований каталог курсів, персоналізовані
користувацькі функції, адаптивний інтерфейс і сучасні frontend-технології. Це
створює передумови для розробки демонстраційної web-платформи
DevMaster, яка буде орієнтована на зручне подання курсів із програмування та
демонстрацію основних принципів побудови освітнього web-ресурсу.
1.2 Доцільність розробки web-платформи онлайн-курсів з програмування
DevMaster
Розробка web-платформи DevMaster є доцільною у зв’язку з потребою
користувачів у зручному, структурованому та сучасному ресурсі для
ознайомлення з онлайн-курсами з програмування. У процесі вибору
навчальної програми користувачеві необхідно швидко отримати відомості про
тематику курсу, рівень складності, тривалість, викладача, рейтинг, кількість
студентів, програму навчання та очікувані результати. Якщо така інформація
подана розрізнено або перевантажена зайвими елементами, процес вибору
курсу ускладнюється.
Більшість існуючих освітніх платформ надають значний обсяг корисних
матеріалів, проте не завжди є однаково зручними для всіх категорій
користувачів. Частина сервісів орієнтована на міжнародну аудиторію, інші
мають складну структуру або поєднують велику кількість різних напрямів
навчання. Для користувача, який хоче швидко знайти курс саме з
програмування, важливими є простий каталог, зрозуміла система фільтрів,
Арк.
ЧДТУ 262223.24 ПЗ
13
Змн. Арк. № Документа Підпис Дата
лаконічні картки курсів, детальна сторінка навчальної програми та можливість
бачити власний прогрес.
Доцільність розробки DevMaster полягає у створенні демонстраційного
web-ресурсу, який поєднує основні функції сучасної освітньої платформи в
межах одного інтерфейсу. Сайт має головну сторінку, каталог курсів, сторінку
окремого курсу, особистий кабінет користувача та сторінку входу. Така
структура відповідає типовим сценаріям використання освітньої платформи:
користувач переходить на головну сторінку, знайомиться з перевагами ресурсу,
відкриває каталог, обирає курс, переглядає детальну інформацію та переходить
до особистого кабінету для контролю навчання.
До основних проблем, які можуть виникати під час використання
частини існуючих web-платформ онлайн-навчання, можна віднести:
– надмірну кількість розділів і складну структуру інтерфейсу;
– недостатньо зрозуміле подання інформації про курс;
– обмежені можливості швидкого пошуку потрібної навчальної
програми;
– перевантаженість сторінок рекламними або другорядними блоками;
– різний рівень локалізації та адаптації під українську аудиторію;
– недостатньо наочне відображення навчального прогресу;
– складність сприйняття інтерфейсу для користувачів-початківців.
Розробка web-платформи DevMaster дозволяє частково вирішити
зазначені проблеми шляхом створення зрозумілого, візуально цілісного та
структурованого інтерфейсу. Темний мінімалістичний дизайн із фіолетово-
синіми акцентами забезпечує сучасний вигляд ресурсу, а карткова структура
каталогу дозволяє швидко порівнювати курси між собою. Такий підхід є
зручним для користувачів, оскільки основні характеристики курсу подано
стисло й наочно.
Особливо важливим є використання localStorage для збереження даних у
браузері користувача. У межах демонстраційного проєкту це дозволяє
реалізувати базові сценарії роботи без складної серверної частини та бази
Арк.
ЧДТУ 262223.24 ПЗ
14
Змн. Арк. № Документа Підпис Дата
даних. Такий підхід є виправданим, оскільки DevMaster розглядається як
приклад готового frontend-проєкту. Зберігання даних у localStorage дає змогу
підтримувати окремі користувацькі сценарії між сеансами роботи, наприклад
збереження обраних курсів, прогресу або даних демонстраційного акаунта
[10].
Доцільність розробки також пояснюється необхідністю демонстрації
практичних навичок створення web-орієнтованих інформаційних систем. У
межах проєкту застосовуються сучасні frontend-технології, зокрема React, Vite
і Tailwind CSS. Їх використання дозволяє реалізувати компонентну структуру
інтерфейсу, адаптивний дизайн, повторне використання елементів і зручну
організацію сторінок. Це відповідає сучасним підходам до frontend-розробки
та вимогам до web-проєктів освітнього призначення.
Окремою перевагою DevMaster є можливість подальшого розширення.
У майбутньому проєкт може бути доповнений повноцінною серверною
частиною, базою даних, системою реальної авторизації, тестуванням знань,
онлайн-редактором коду, електронними сертифікатами та адміністративним
керуванням навчальним контентом. Отже, навіть за умови демонстраційної
реалізації система має потенціал для розвитку до повноцінної освітньої
платформи.
Таким чином, створення web-платформи онлайн-курсів з програмування
DevMaster є актуальним і практично доцільним рішенням. Розробка дозволяє
об’єднати каталог курсів, сторінки навчальних програм, особистий кабінет,
відображення прогресу та локальне збереження даних у межах однієї web-
орієнтованої системи. Це створює основу для подальшого проєктування,
реалізації та тестування освітнього web-ресурсу.
Арк.
ЧДТУ 262223.24 ПЗ
15
Змн. Арк. № Документа Підпис Дата
1.3 Чинники, які впливають на розробку web-платформи онлайн-курсів
Процес розробки web-платформи онлайн-курсів залежить від сукупності
технічних, функціональних, інформаційних, дизайнерських та організаційних
чинників. Їх урахування дозволяє створити систему, яка буде зручною для
користувача, стабільною в роботі, зрозумілою за структурою та придатною для
подальшого розвитку.
Одним із головних чинників є визначення цільової аудиторії. Web-
платформа DevMaster орієнтована на користувачів, які цікавляться вивченням
програмування та web-технологій. До потенційної аудиторії належать
студенти, користувачі-початківці, які прагнуть опанувати базові навички
програмування, а також особи, які бажають розширити знання у сфері frontend-
розробки, backend-розробки, алгоритмів, баз даних або суміжних напрямів
інформаційних технологій. Для такої аудиторії важливо, щоб інтерфейс був
простим, зрозумілим і не вимагав додаткового пояснення.
Важливим чинником є структура сайту. Вона повинна бути логічною та
відповідати основним сценаріям взаємодії користувача з платформою. Для
DevMaster доцільним є поділ на такі сторінки: головна, каталог курсів,
сторінка окремого курсу, особистий кабінет і сторінка входу. Головна сторінка
виконує презентаційну функцію, каталог дозволяє знайти потрібний курс,
сторінка курсу надає детальну інформацію про навчальну програму, а
особистий кабінет забезпечує перегляд прогресу та персональних навчальних
даних.
Наступним чинником є якість користувацького інтерфейсу. Освітній
web-ресурс повинен бути візуально привабливим, але не перевантаженим. Для
платформи DevMaster обрано темну мінімалістичну стилістику з фіолетово-
синіми акцентами. Така кольорова гама відповідає тематиці сучасних IT-
продуктів і дозволяє виділити важливі інтерактивні елементи: кнопки, картки
курсів, показники прогресу та навігаційні компоненти. Водночас дизайн має
залишатися функціональним, а не лише декоративним.
Арк.
ЧДТУ 262223.24 ПЗ
16
Змн. Арк. № Документа Підпис Дата
Окрему роль відіграє адаптивність. Користувачі можуть переглядати
навчальні матеріали не лише з комп’ютера, а й із ноутбука, планшета або
смартфона. Тому сторінки web-платформи повинні коректно відображатися на
різних типах екранів. Адаптивність впливає на загальну якість ресурсу,
оскільки незручне відображення на мобільних пристроях може ускладнити
пошук курсів, перегляд сторінок і роботу з особистим кабінетом. Для реалізації
адаптивного інтерфейсу доцільно використовувати можливості Tailwind CSS,
який підтримує створення гнучких макетів за допомогою спеціальних класів
[9].
Важливим технічним чинником є організація компонентної структури.
Оскільки web-платформа містить багато повторюваних елементів, таких як
картки курсів, кнопки, навігаційні блоки, секції переваг і елементи прогресу,
доцільним є використання компонентного підходу. React дозволяє реалізувати
інтерфейс у вигляді окремих компонентів, що спрощує розробку, підтримку й
подальше розширення проєкту [7]. Компонентна структура також дає змогу
уникнути дублювання коду та забезпечити єдність оформлення на різних
сторінках.
Ще одним важливим чинником є організація даних. Для повноцінної
освітньої платформи зазвичай використовується серверна частина та база
даних. Проте в межах демонстраційного проєкту DevMaster дані зберігаються
в localStorage. Це дозволяє реалізувати базову логіку роботи з
користувацькими даними без окремого backend-рішення. Такий підхід не є
заміною повноцінної бази даних, але є достатнім для демонстрації принципів
збереження стану, роботи з особистим кабінетом і підтримки окремих
сценаріїв взаємодії користувача із сайтом [10].
Безпека також є важливим чинником під час проєктування освітньої
платформи. Навіть якщо проєкт має демонстраційний характер, необхідно
враховувати базові принципи безпечної роботи з даними, зокрема
недопущення збереження критично важливої інформації у відкритому вигляді,
обмеження обсягу даних, що зберігаються локально, та коректну обробку
Арк.
ЧДТУ 262223.24 ПЗ
17
Змн. Арк. № Документа Підпис Дата
введених користувачем значень. У разі подальшого розвитку системи безпекові
вимоги повинні бути посилені шляхом впровадження серверної авторизації,
захисту API, ролей користувачів і централізованого зберігання даних.
Значний вплив на розробку має якість навчального контенту. Курси на
сайті повинні бути зрозуміло описані, мати логічну структуру, вказаний рівень
складності, тривалість і очікувані результати. Оскільки навчальні матеріали в
межах проєкту взято з відкритого доступу, важливо коректно подати їх у
демонстраційному форматі та не позиціонувати сайт як комерційний сервіс із
власними авторськими курсами. У тексті дипломної роботи доцільно
зазначати, що DevMaster є прикладом готового web-проєкту для демонстрації
функціоналу платформи онлайн-курсів.
Швидкодія web-сайту також є важливим чинником. Освітня платформа
містить багато візуальних елементів, карток, іконок, блоків опису та
інтерактивних компонентів. Надмірна кількість важких ресурсів може
негативно впливати на швидкість завантаження сторінок. Тому під час
розробки потрібно враховувати оптимізацію структури компонентів,
раціональне використання зображень, мінімізацію зайвого коду та ефективне
збирання проєкту. Vite може бути використаний для швидкого запуску й
оптимізованого збирання frontend-додатка [8].
Також необхідно враховувати доступність інтерфейсу. Освітній ресурс
повинен бути зрозумілим для якомога ширшого кола користувачів.
Рекомендації WCAG визначають підходи до забезпечення доступності web-
контенту, зокрема щодо сприйнятності, керованості, зрозумілості та надійності
інтерфейсу [11]. Для DevMaster це означає необхідність використання
читабельних шрифтів, достатнього контрасту, зрозумілих кнопок, логічної
структури сторінок і передбачуваної навігації.
Отже, успішна реалізація web-платформи DevMaster потребує
комплексного підходу, який враховує потреби цільової аудиторії, структуру
сайту, якість інтерфейсу, адаптивність, компонентну організацію, локальне
збереження даних, швидкодію, доступність і можливість подальшого
Арк.
ЧДТУ 262223.24 ПЗ
18
Змн. Арк. № Документа Підпис Дата
розширення. Урахування цих чинників дозволяє створити ресурс, який
відповідає вимогам сучасної web-розробки та може бути використаний як
демонстраційна освітня система.
1.4 Аналітичний огляд існуючих web-платформ онлайн-навчання
Проведення аналітичного огляду існуючих web-платформ онлайн-
навчання дозволяє визначити основні підходи до організації освітнього
контенту, виявити сильні та слабкі сторони аналогів, а також сформувати
вимоги до розроблюваної системи. Для аналізу було обрано ресурси, які
виконують подібні або частково подібні функції до web-платформи DevMaster:
Codecademy, freeCodeCamp, Stepik і Prometheus.
Обрані аналоги відрізняються за масштабом, функціональністю та
підходом до навчання. Codecademy орієнтована на інтерактивне вивчення
програмування та технологічних навичок. freeCodeCamp є безкоштовною
освітньою платформою з відкритим підходом до навчання та великою
кількістю практичних завдань. Stepik пропонує онлайн-курси різних напрямів,
зокрема з програмування, математики, комп’ютерних наук та суміжних
дисциплін. Prometheus є українською платформою онлайн-курсів, що містить
навчальні програми з IT, бізнесу, мов, професійного розвитку та інших
напрямів [3–6].
Під час аналізу web-платформ онлайн-навчання доцільно використати
такі об’єктивні критерії:
– наявність каталогу курсів;
– можливість пошуку навчальних матеріалів;
– наявність фільтрації за категоріями або рівнями складності;
– наявність карток курсів;
– детальна сторінка курсу;
– відображення тривалості або структури навчання;
– наявність особистого кабінету користувача;
Арк.
ЧДТУ 262223.24 ПЗ
19
Змн. Арк. № Документа Підпис Дата
– відображення прогресу навчання;
– наявність практичних завдань;
– наявність сертифікатів або підтвердження проходження;
– адаптивність інтерфейсу;
– локалізація українською мовою;
– простота структури для користувача-початківця;
– можливість використання окремих рішень у межах власної розробки.
Codecademy
Рисунок 1.1 – Головна сторінка платформи Codecademy
Codecademy є відомою web-платформою для вивчення програмування та
цифрових навичок. Ресурс пропонує користувачам інтерактивні уроки,
навчальні шляхи та матеріали для різних рівнів підготовки. На офіційному
сайті Codecademy зазначено, що платформа надає керовані навчальні
траєкторії та інтерактивні уроки для користувачів із різними цілями й рівнями
підготовки [3]. Окремі каталоги платформи містять курси з web-розробки,
зокрема HTML, CSS, JavaScript, React та інших технологій [12].
Арк.
ЧДТУ 262223.24 ПЗ
20
Змн. Арк. № Документа Підпис Дата
Перевагою Codecademy є практикоорієнтований підхід до навчання.
Користувач не лише читає матеріал, а й взаємодіє із завданнями, поступово
засвоюючи синтаксис мов програмування та основи розробки. Такий підхід є
корисним для початківців, оскільки дозволяє одразу закріплювати знання на
практиці. Також позитивною рисою є наявність навчальних шляхів, які
допомагають користувачеві рухатися від простих тем до складніших.
Водночас Codecademy має певні недоліки в контексті теми
кваліфікаційної роботи. Платформа орієнтована переважно на міжнародну
аудиторію, тому не всі матеріали можуть бути зручними для користувачів, які
очікують україномовний інтерфейс або локалізоване подання навчального
контенту. Крім того, частина можливостей може бути пов’язана з платними
тарифами. Для DevMaster доцільно врахувати сильну сторону Codecademy —
структуроване подання курсів і практичну спрямованість, але реалізувати
простіший і більш лаконічний інтерфейс.
freeCodeCamp
Рисунок 1.2 – Головна сторінка платформи freeCodeCamp
Арк.
ЧДТУ 262223.24 ПЗ
21
Змн. Арк. № Документа Підпис Дата
freeCodeCamp є безкоштовною освітньою платформою, яка орієнтована
на самостійне вивчення програмування, web-розробки, алгоритмів, структур
даних, машинного навчання та інших напрямів. На офіційних матеріалах
платформи зазначено, що її навчальна програма є безкоштовною, самостійною
за темпом проходження та містить велику кількість інтерактивних практичних
завдань [13]. Це робить freeCodeCamp одним із популярних ресурсів для
користувачів, які хочуть розпочати навчання без фінансових витрат.
Перевагою freeCodeCamp є відкритість і доступність навчання.
Користувач може проходити курси у власному темпі, виконувати завдання,
отримувати практичний досвід і поступово формувати портфоліо. Значна
кількість вправ робить платформу корисною для розвитку практичних
навичок, що є особливо важливим у програмуванні.
Недоліком freeCodeCamp є те, що платформа має власну специфічну
структуру, яка може бути не одразу зрозумілою для користувача-початківця.
Великий обсяг матеріалу є перевагою, але водночас може ускладнювати вибір
першого курсу або конкретного напряму навчання. Крім того, інтерфейс і
навчальна логіка платформи орієнтовані на самостійне проходження великої
навчальної програми, тоді як DevMaster має на меті продемонструвати більш
компактну структуру каталогу курсів, сторінки окремого курсу та особистого
кабінету.
Арк.
ЧДТУ 262223.24 ПЗ
22
Змн. Арк. № Документа Підпис Дата
Stepik
Рисунок 1.3 – Головна сторінка платформи Stepik
Stepik є платформою онлайн-курсів, яка містить навчальні матеріали з
різних дисциплін, зокрема програмування, комп’ютерних наук, математики,
штучного інтелекту та інших напрямів. На офіційній сторінці платформи
зазначено, що Stepik пропонує онлайн-курси від авторів-практиків, а
користувачі можуть навчатися, розв’язувати задачі та формувати портфоліо
[14]. Це свідчить про орієнтацію платформи на практичне засвоєння знань.
Перевагою Stepik є широка тематика курсів і можливість проходження
навчання в різних напрямах. Платформа поєднує відеоматеріали, текстові
пояснення, завдання та систему проходження курсів. Для користувачів, які
цікавляться програмуванням, корисною є наявність курсів із Python,
алгоритмів, структур даних, математики та інших технічних дисциплін.
Водночас Stepik не є вузькоспеціалізованою платформою лише для
програмування. Через велику кількість різних напрямів користувач може
витрачати додатковий час на пошук потрібного курсу. Крім того, інтерфейс
платформи містить багато функцій, які є корисними для масштабної освітньої
системи, але можуть бути надмірними для компактного демонстраційного
Арк.
ЧДТУ 262223.24 ПЗ
23
Змн. Арк. № Документа Підпис Дата
web-ресурсу. Для DevMaster доцільно врахувати сильні сторони Stepik,
зокрема каталог курсів, логіку проходження та практичну спрямованість, але
зосередити функціонал саме на курсах із програмування.
Prometheus
Рисунок 1.4 – Головна сторінка платформи Prometheus
Prometheus є українською платформою онлайн-курсів, яка надає доступ
до навчальних програм різних напрямів, зокрема IT, бізнесу, англійської мови,
професійного розвитку та інших сфер. На офіційній сторінці платформи
зазначено, що Prometheus є великою українською платформою професійного
розвитку, яка містить онлайн-курси від роботодавців, університетів і
партнерських організацій [6]. Це робить її важливим прикладом
україномовного освітнього web-ресурсу.
Перевагою Prometheus є локальна спрямованість на українську
аудиторію. Платформа має україномовний інтерфейс, пропонує курси для
професійного розвитку та містить навчальні програми, орієнтовані на потреби
українських користувачів. Для теми кваліфікаційної роботи це є важливим,
оскільки DevMaster також має бути зрозумілим для української аудиторії та
Арк.
ЧДТУ 262223.24 ПЗ
24
Змн. Арк. № Документа Підпис Дата
відповідати очікуванням користувачів, які шукають навчальні матеріали у
зручному форматі.
Разом із тим Prometheus є платформою широкого призначення. Вона не
обмежується програмуванням, а охоплює різні галузі знань. Тому користувач,
який шукає саме курси з програмування, може стикатися з необхідністю
додаткової фільтрації та перегляду різних категорій. Для DevMaster доцільно
врахувати переваги Prometheus, зокрема україномовну орієнтацію, зрозуміле
подання курсів і професійну спрямованість, але зробити платформу більш
тематично сфокусованою на програмуванні.
Web-платформа DevMaster
Рисунок 1.5 – Головна сторінка web-платформи DevMaster
Розроблювана web-платформа DevMaster орієнтована на інформаційну
підтримку користувачів, які вивчають програмування або цікавляться онлайн-
курсами у сфері інформаційних технологій. На відміну від універсальних
платформ, сайт має більш компактну структуру та демонструє основні функції
освітнього ресурсу: головну сторінку, каталог курсів, сторінку окремого курсу,
особистий кабінет користувача та сторінку входу.
Арк.
ЧДТУ 262223.24 ПЗ
25
Змн. Арк. № Документа Підпис Дата
Особливістю ресурсу є використання localStorage для збереження даних
у браузері користувача. Це дозволяє реалізувати демонстраційну логіку роботи
з даними без підключення повноцінної серверної бази даних. Такий підхід
відповідає характеру проєкту, оскільки DevMaster є прикладом готового
frontend-рішення для освітньої web-платформи.
Рисунок 1.5 — Порівняння аналогів web-платформ онлайн навчання
За результатами порівняння встановлено, що всі розглянуті аналоги
мають корисні функціональні можливості для сфери онлайн-навчання.
Codecademy вирізняється інтерактивним підходом до вивчення
програмування, наявністю навчальних шляхів і практичних завдань. Водночас
платформа орієнтована переважно на міжнародну аудиторію та не є
україномовним локальним рішенням.
freeCodeCamp має значну перевагу у вигляді безкоштовного доступу до
навчальних матеріалів і великої кількості практичних завдань. Платформа є
корисною для самостійного навчання, проте її масштаб і специфічна структура
Арк.
ЧДТУ 262223.24 ПЗ
26
Змн. Арк. № Документа Підпис Дата
можуть бути складними для користувачів, які хочуть швидко обрати окремий
курс і переглянути його характеристики.
Stepik забезпечує широкий вибір онлайн-курсів і підтримує практичне
навчання. Його перевагами є різноманітність тем, система проходження курсів
і наявність технічних дисциплін. Водночас платформа не спеціалізується
виключно на програмуванні, а тому для користувача може бути менш
сфокусованою порівняно з тематичним ресурсом DevMaster.
Prometheus є важливим прикладом української платформи онлайн-
освіти. Його перевагами є україномовна орієнтація, наявність курсів
професійного розвитку та довіра з боку користувачів. Проте Prometheus
охоплює багато різних напрямів, тому не є вузькоспеціалізованим ресурсом
саме для програмування.
Порівняно з розглянутими аналогами, web-платформа DevMaster має
перевагу у простій структурі, тематичній спрямованості на курси з
програмування, сучасному темному інтерфейсі та демонстрації базових
функцій освітнього web-ресурсу. Сайт містить каталог курсів, сторінки
навчальних програм, особистий кабінет, відображення прогресу та локальне
збереження даних. Водночас DevMaster має демонстраційний характер, тому
не замінює повноцінні освітні платформи з реальною серверною
інфраструктурою, системою оплати, сертифікацією та великими базами
навчального контенту.
Таким чином, аналіз аналогів показав, що розробка web-платформи
DevMaster є обґрунтованою. Власна система повинна поєднати сильні сторони
існуючих рішень: структурованість Codecademy, практичну спрямованість
freeCodeCamp, логіку проходження курсів Stepik і локальну орієнтацію
Prometheus. Водночас розроблюваний ресурс має усунути окремі недоліки
аналогів, зокрема складність структури, надмірну універсальність, недостатню
тематичну сфокусованість і перевантаженість інтерфейсу.
Арк.
ЧДТУ 262223.24 ПЗ
27
Змн. Арк. № Документа Підпис Дата
Висновки до розділу 1
У першому розділі кваліфікаційної роботи було розглянуто предметну
область web-платформ онлайн-навчання та визначено їх основне призначення.
Було встановлено, що такі системи забезпечують користувачам доступ до
навчальних матеріалів, каталогів курсів, практичних завдань, персонального
прогресу та інших інструментів, необхідних для організації дистанційного
навчання.
Також було обґрунтовано доцільність розробки web-платформи онлайн-
курсів з програмування DevMaster. Визначено, що потреба у такій системі
зумовлена актуальністю цифрової освіти, популярністю вивчення
програмування, необхідністю зручного подання навчальних курсів і потребою
в демонстрації готового frontend-рішення для освітнього web-ресурсу.
У процесі аналізу було визначено основні чинники, які впливають на
розробку web-платформи онлайн-курсів. До них належать цільова аудиторія,
структура сайту, якість користувацького інтерфейсу, адаптивність,
компонентна організація, локальне збереження даних, безпека, швидкодія,
доступність і можливість подальшого розвитку. Було встановлено, що
створення такого ресурсу потребує комплексного підходу, який охоплює
технічні, функціональні, дизайнерські та організаційні аспекти.
У межах аналітичного огляду було досліджено існуючі web-платформи
онлайн-навчання: Codecademy, freeCodeCamp, Stepik і Prometheus. Для
порівняння було використано об’єктивні критерії, зокрема наявність каталогу
курсів, пошуку, фільтрації, карток курсів, детальної сторінки курсу, особистого
кабінету, прогресу навчання, практичних завдань, сертифікатів, адаптивності,
україномовної локалізації та простоти структури для користувача-початківця.
За результатами порівняння встановлено, що кожен із розглянутих
аналогів має власні переваги. Codecademy вирізняється інтерактивним
підходом до навчання програмуванню, freeCodeCamp забезпечує
безкоштовний доступ до великої кількості практичних завдань, Stepik має
Арк.
ЧДТУ 262223.24 ПЗ
28
Змн. Арк. № Документа Підпис Дата
широкий каталог онлайн-курсів і практичну спрямованість, а Prometheus є
важливою українською платформою онлайн-освіти. Водночас аналіз показав,
що ці ресурси не повністю відповідають ідеї компактної демонстраційної web-
платформи з тематичною орієнтацією саме на програмування, простим
інтерфейсом, темним мінімалістичним дизайном і локальним збереженням
даних.
Отже, результати першого розділу дозволили сформувати основні
напрями подальшої розробки web-платформи DevMaster. Доцільно реалізувати
каталог курсів із пошуком і фільтрацією, картки навчальних програм, сторінку
детального перегляду курсу, особистий кабінет користувача, відображення
прогресу, сторінку входу та механізм локального збереження даних у браузері.
Отримані результати є основою для подальшого обґрунтування технічного
завдання та розробки структури web-платформи.
Арк.
ЧДТУ 262223.24 ПЗ
29
Змн. Арк. № Документа Підпис Дата
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ
2.1. Призначення web-платформи онлайн-курсів з програмування
DevMaster
Розробка web-платформи онлайн-курсів з програмування DevMaster
спрямована на створення сучасного освітнього web-ресурсу, який забезпечує
користувачам зручний доступ до навчальних курсів, перегляд інформації про
програми навчання, пошук і фільтрацію матеріалів, роботу з особистим
кабінетом та відображення навчального прогресу. Такий ресурс має
поєднувати інформаційну, навігаційну та демонстраційну функції, що
дозволяє показати основні можливості цифрової платформи для організації
онлайн-навчання програмуванню.
Основне призначення web-платформи DevMaster полягає у
систематизованому поданні курсів із програмування та суміжних напрямів
інформаційних технологій. Сайт орієнтований на користувачів, які хочуть
швидко знайти навчальну програму, переглянути її основні характеристики,
оцінити рівень складності, тривалість, рейтинг, кількість студентів, вартість і
перейти до детальної сторінки курсу. Завдяки цьому ресурс виконує роль
демонстраційної освітньої платформи, яка показує принципи побудови
frontend-системи для онлайн-навчання.
Актуальність створення такої web-платформи підтверджується
загальними тенденціями розвитку цифрової освіти. Сучасне навчання дедалі
частіше реалізується за допомогою web-сервісів, які забезпечують гнучкий
доступ до матеріалів, персоналізацію навчального процесу та можливість
самостійного вибору темпу опанування знань. У звіті UNESCO щодо
технологій в освіті зазначено, що цифрові інструменти повинні
застосовуватися з урахуванням доступності, доцільності та ефективності для
навчального процесу [1]. Крім того, Digital Education Action Plan 2021–2027
Арк.
ЧДТУ 262223.24 ПЗ
30
Змн. Арк. № Документа Підпис Дата
визначає цифрову освіту як один із важливих напрямів розвитку сучасного
освітнього середовища [2].
Особливістю web-платформи DevMaster є поєднання кількох
функціональних блоків у межах єдиного інтерфейсу. До них належать головна
сторінка, каталог курсів, сторінка окремого курсу, особистий кабінет
користувача та сторінка входу. Головна сторінка виконує презентаційну
функцію, каталог дозволяє переглядати й порівнювати курси, сторінка курсу
надає детальну інформацію про навчальну програму, а особистий кабінет
забезпечує персоналізоване відображення прогресу та навчальних
активностей.
Web-платформа DevMaster може бути корисною для користувачів, які
лише починають вивчати програмування, а також для тих, хто хоче
ознайомитися з різними напрямами IT-освіти. У межах сайту представлені
курси з React, TypeScript, Python, Node.js, JavaScript, DevOps, Vue.js, Flutter та
інших напрямів. Курси, використані в проєкті, взято з відкритого доступу, а
сам сайт розглядається як приклад готового frontend-проєкту для демонстрації
функціоналу освітньої web-платформи.
Важливою особливістю реалізації є використання localStorage для
збереження даних у браузері користувача. Такий підхід дозволяє організувати
базову роботу з даними без підключення повноцінної серверної частини та
бази даних. У межах демонстраційного проєкту localStorage може
використовуватися для збереження інформації про користувача, обрані курси,
прогрес проходження або інші дані, необхідні для імітації персоналізованої
взаємодії із сайтом [10].
Цінність web-платформи DevMaster полягає в таких можливостях:
– надання доступу до каталогу курсів із програмування;
– перегляд карток курсів із коротким описом, рівнем складності,
тривалістю, рейтингом, кількістю студентів і вартістю;
– пошук і фільтрація навчальних програм за визначеними параметрами;
– перегляд детальної сторінки окремого курсу;
Арк.
ЧДТУ 262223.24 ПЗ
31
Змн. Арк. № Документа Підпис Дата
– відображення програми курсу, навчальних модулів і очікуваних
результатів;
– робота з особистим кабінетом користувача;
– перегляд активних і збережених курсів;
– відображення навчального прогресу, досягнень і тижневої цілі;
– авторизація в демонстраційному акаунті;
– локальне збереження даних у браузері користувача;
– демонстрація сучасного адаптивного інтерфейсу для освітнього web-
ресурсу.
Отже, web-платформа DevMaster є інструментом для систематизованого
подання онлайн-курсів із програмування, демонстрації користувацького
кабінету, відображення прогресу навчання та реалізації основних принципів
побудови сучасного frontend-додатка освітнього призначення.
2.2. Вимоги до дизайну web-платформи DevMaster
Дизайн web-платформи онлайн-курсів має важливе значення, оскільки саме
інтерфейс формує перше враження користувача про ресурс і впливає на
зручність подальшої роботи із сайтом. Для освітньої платформи недостатньо
лише візуально привабливого оформлення. Інтерфейс повинен бути логічним,
адаптивним, читабельним, не перевантаженим і зрозумілим для користувачів
із різним рівнем досвіду.
Web-платформа DevMaster оформлена в темній мінімалістичній
стилістиці з фіолетово-синіми акцентами. Такий візуальний підхід відповідає
тематиці сучасних IT-продуктів, асоціюється з програмуванням, цифровим
середовищем і технологічністю. Темний фон дозволяє акцентувати увагу на
основних елементах сторінки: кнопках, картках курсів, показниках
статистики, блоках прогресу та активних елементах навігації. Фіолетово-сині
Арк.
ЧДТУ 262223.24 ПЗ
32
Змн. Арк. № Документа Підпис Дата
градієнти використовуються для виділення ключових дій і формування
єдиного стилю сайту.
Основними вимогами до дизайну web-платформи DevMaster є:
Зрозуміла структура інтерфейсу. Користувач повинен швидко
орієнтуватися в основних розділах сайту: головна сторінка, каталог курсів,
сторінка курсу, особистий кабінет і сторінка входу.
Єдиний візуальний стиль. Усі сторінки повинні мати узгоджене
оформлення, однакову логіку розміщення елементів, спільну кольорову гаму,
подібний стиль кнопок, карток, форм і навігаційних блоків.
Адаптивність. Сайт повинен коректно відображатися на комп’ютерах,
ноутбуках, планшетах і смартфонах, оскільки користувачі можуть переглядати
навчальні матеріали з різних пристроїв.
Читабельність тексту. Назви курсів, описи, характеристики, навігаційні
елементи та дані в особистому кабінеті повинні бути достатньо контрастними
й зручними для сприйняття.
Візуальне виділення ключових дій. Кнопки «Почати навчання»,
«Переглянути курси», «Детальніше», «Продовжити навчання», «Увійти»
мають бути помітними та розміщеними у логічних місцях.
Зручність роботи з картками курсів. Картки повинні містити коротку, але
достатню інформацію для швидкого порівняння навчальних програм.
Мінімізація зайвих елементів. Інтерфейс не повинен бути перевантаженим
декоративними або другорядними блоками, оскільки основним завданням є
зручний доступ до курсів.
Послідовність кольорових акцентів. Основні інтерактивні елементи
доцільно виділяти фіолетово-синім градієнтом, а допоміжні елементи —
нейтральними відтінками сірого.
Доступність інтерфейсу. Елементи керування повинні бути зрозумілими
для різних категорій користувачів, а контраст між текстом і фоном має
забезпечувати комфортне читання [11].
Арк.
ЧДТУ 262223.24 ПЗ
33
Змн. Арк. № Документа Підпис Дата
Логічне розміщення навігації. Основне меню має бути доступним із
ключових сторінок сайту та забезпечувати швидкий перехід до каталогу курсів
і кабінету користувача.
Дизайн DevMaster має не лише естетичне, а й функціональне значення.
Темна кольорова схема створює сучасний вигляд, а карткова структура
дозволяє впорядкувати велику кількість навчальної інформації. Візуальні
акценти допомагають користувачеві швидше знаходити інтерактивні
елементи, а мінімалістичний підхід зменшує навантаження на сприйняття.
Таким чином, дизайн web-платформи DevMaster повинен забезпечувати
зручну взаємодію користувача з каталогом курсів, сторінкою окремого курсу,
особистим кабінетом і формою входу. Основними принципами оформлення є
мінімалізм, адаптивність, читабельність, єдиний стиль і чітке виділення
ключових дій.
2.3. Структура сторінок web-платформи DevMaster
Структура web-сайту визначає логіку розміщення сторінок,
функціональних модулів і зв’язків між ними. Для платформи онлайн-курсів
важливо, щоб користувач міг швидко перейти від загального ознайомлення з
ресурсом до каталогу курсів, перегляду конкретної навчальної програми, входу
в акаунт або роботи з особистим кабінетом. Зручна структура скорочує
кількість зайвих дій і підвищує ефективність використання сайту.
Основна структура web-платформи DevMaster включає такі сторінки:
«Головна», «Курси», «Сторінка курсу», «Кабінет» і «Вхід». Також у верхній
частині сайту передбачено навігаційне меню з логотипом DevMaster, пунктами
переходу до основних розділів, позначенням користувача та кнопкою виходу.
Така структура відповідає типовій логіці освітньої платформи: користувач
знайомиться з ресурсом, переходить до каталогу, обирає курс, переглядає його
деталі та контролює навчання в особистому кабінеті.
Арк.
ЧДТУ 262223.24 ПЗ
34
Змн. Арк. № Документа Підпис Дата
Головна сторінка виконує ознайомчу та презентаційну функцію. Вона
містить назву платформи, короткий опис призначення сайту, кнопки швидкого
переходу до навчання або каталогу курсів, статистичні показники, блок
популярних курсів, переваги платформи та порівняння з конкурентами. Така
сторінка формує перше враження про ресурс і допомагає користувачеві
зрозуміти його основні можливості.
Сторінка «Курси» є одним із головних функціональних розділів
платформи. Вона містить каталог навчальних програм у вигляді карток. Кожна
картка відображає назву курсу, категорію, рівень складності, тривалість,
короткий опис, ім’я викладача, рейтинг, кількість студентів і вартість.
Наявність пошуку та фільтрації дозволяє швидко знайти потрібну програму за
тематикою або рівнем підготовки.
Сторінка детального перегляду курсу призначена для розширеного
ознайомлення з обраною навчальною програмою. На ній розміщується назва
курсу, категорія, рівень складності, опис, рейтинг, кількість студентів,
тривалість, викладач, вартість, програма курсу, перелік модулів, очікувані
результати навчання та вимоги до користувача. Також на сторінці передбачено
кнопки для продовження навчання, перегляду програми або завантаження
сертифіката в демонстраційному форматі.
Сторінка «Кабінет» призначена для персоналізованої взаємодії
користувача із сайтом. У кабінеті відображаються дані профілю, активні курси,
прогрес проходження, збережені курси, досягнення, навчальна серія та
тижнева ціль. Такий розділ підвищує зручність використання платформи,
оскільки користувач може бачити власні результати та продовжувати навчання
з потрібного місця.
Сторінка «Вхід» забезпечує доступ до демонстраційного акаунта
користувача. Вона містить поля для введення email і пароля, кнопку входу,
посилання для реєстрації та можливість продовження через Google у вигляді
інтерфейсного елемента. У межах дипломного проєкту така сторінка
Арк.
ЧДТУ 262223.24 ПЗ
35
Змн. Арк. № Документа Підпис Дата
демонструє принцип організації форми авторизації, навіть якщо повноцінна
серверна автентифікація не використовується.
Окремим структурним елементом можна вважати футер сайту. Він
містить логотип, короткий опис платформи, посилання на курси, інформацію
про компанію, підтримку, FAQ, допомогу та умови використання. Футер
забезпечує додаткову навігацію й надає сайту завершеного вигляду.
Узагальнено структура web-платформи DevMaster може бути
представлена такими сторінками та модулями:
– головна сторінка;
– каталог курсів;
– сторінка детального перегляду курсу;
– особистий кабінет користувача;
– сторінка входу;
– навігаційне меню;
– футер із додатковими посиланнями;
– модулі пошуку та фільтрації;
– модулі збереження даних у localStorage.
Рисунок 2.1 – Навігаційна структура web-платформи DevMaster
Арк.
ЧДТУ 262223.24 ПЗ
36
Змн. Арк. № Документа Підпис Дата
2.4. Навігація web-платформи DevMaster
Навігація є одним із ключових елементів web-платформи, оскільки вона
визначає, наскільки швидко і зручно користувач може знаходити потрібну
інформацію. Для освітнього сайту це особливо важливо, адже користувач може
шукати каталог курсів, сторінку конкретної навчальної програми, особистий
кабінет або сторінку входу. Якщо навігація побудована логічно, користувач
швидше переходить до потрібної дії та менше часу витрачає на пошук
інформації.
У web-платформі DevMaster основна навігація реалізується через верхнє
меню. Воно містить логотип платформи, пункт «Курси», пункт «Кабінет»,
позначення активного користувача та кнопку «Вийти». Таке меню є
компактним і не перевантажує сторінку зайвими елементами. Основні
переходи розміщені у верхній частині сайту, що відповідає звичним сценаріям
використання web-ресурсів.
Розділ «Курси» відкриває каталог навчальних програм. На цій сторінці
користувач може переглядати картки курсів, використовувати пошук,
застосовувати фільтри та переходити до детальної інформації про конкретний
курс. Це один із найважливіших навігаційних напрямів, оскільки саме каталог
є центральним функціональним блоком платформи.
Розділ «Кабінет» забезпечує перехід до персональної сторінки
користувача. Через нього користувач може переглянути активні курси, прогрес,
збережені програми, досягнення та навчальні цілі. Такий розділ дозволяє
персоналізувати взаємодію із сайтом і підтримувати мотивацію до навчання.
На сторінці окремого курсу передбачено додатковий навігаційний
елемент «Назад до каталогу». Він дозволяє користувачеві швидко повернутися
до списку курсів після перегляду детальної інформації. Це покращує зручність
роботи з каталогом і зменшує кількість зайвих дій.
На сторінці входу передбачено кнопку «Назад», яка дозволяє
повернутися до попереднього розділу сайту. Такий елемент є корисним,
Арк.
ЧДТУ 262223.24 ПЗ
37
Змн. Арк. № Документа Підпис Дата
оскільки користувач може випадково перейти на сторінку авторизації або
вирішити повернутися до перегляду курсів без входу в акаунт.
Окрім основного меню, на сайті використовуються й інші навігаційні
елементи:
– Пошук курсів. Дає можливість швидко знайти потрібну навчальну
програму за назвою або ключовими словами.
– Фільтри за параметрами. Дозволяють відібрати курси за
категорією, рівнем складності або іншими характеристиками.
– Кнопки дії. Наприклад, «Почати навчання», «Переглянути курси»,
«Детальніше», «Продовжити навчання», «Увійти», «Вийти».
– Посилання між сторінками. Забезпечують логічний перехід від
головної сторінки до каталогу, від каталогу до сторінки курсу, від
курсу до кабінету користувача.
– Навігація у футері. Надає додаткові переходи до курсів,
інформаційних сторінок, FAQ, допомоги та умов використання.
Для реалізації переходів між сторінками у frontend-додатках може
використовуватися маршрутизація. У React-проєктах для цього часто
застосовується React Router, який дозволяє організовувати переходи між
сторінками без повного перезавантаження web-додатка [19]. Такий підхід є
зручним для односторінкових застосунків, оскільки забезпечує швидку зміну
вмісту сторінок і підтримує логіку сучасних web-інтерфейсів.
Грамотно побудована навігація зменшує кількість зайвих дій, покращує
зручність користування ресурсом і дозволяє користувачеві швидко перейти до
вибору курсу, перегляду програми або контролю власного прогресу в
особистому кабінеті.
Арк.
ЧДТУ 262223.24 ПЗ
38
Змн. Арк. № Документа Підпис Дата
2.5. Наповнення сторінок web-платформи DevMaster
Контент web-платформи онлайн-курсів повинен бути інформативним,
структурованим, актуальним і корисним для користувача. Основне завдання
наповнення полягає в тому, щоб допомогти користувачеві зрозуміти
можливості сайту, обрати відповідний курс, переглянути навчальну програму
та продовжити роботу з особистим кабінетом.
На головній сторінці розміщується загальна інформація про платформу
DevMaster, її призначення та переваги. Ця сторінка має зацікавити користувача
та мотивувати його перейти до перегляду курсів. Доцільно розміщувати на ній
назву платформи, короткий опис, кнопки швидкої дії, статистичні показники,
блок популярних курсів, переваги навчання та порівняння з конкурентами.
На сторінці «Курси» подається каталог доступних навчальних програм.
Кожен курс представлений у вигляді картки, яка містить:
– зображення курсу;
– назву;
– категорію;
– рівень складності;
– тривалість;
– короткий опис;
– ім’я викладача;
– рейтинг;
– кількість студентів;
– вартість;
– кнопку переходу до детальної інформації;
– позначку збереження або обраного курсу.
Таке наповнення дозволяє користувачеві швидко оцінити курс і
прийняти рішення щодо його перегляду. Наявність пошуку та фільтрів робить
каталог більш зручним і функціональним, особливо за умови збільшення
кількості навчальних програм.
Арк.
ЧДТУ 262223.24 ПЗ
39
Змн. Арк. № Документа Підпис Дата
На сторінці детального перегляду курсу розміщується повна інформація
про навчальну програму. Вона включає назву курсу, категорію, рівень
складності, опис, рейтинг, кількість студентів, тривалість, викладача, ціну,
програму курсу, модулі, кількість уроків, очікувані результати навчання та
вимоги до користувача. Така сторінка є однією з найважливіших, оскільки саме
вона допомагає користувачеві зрозуміти зміст курсу та прийняти рішення щодо
подальшого навчання.
Сторінка «Кабінет» містить персональні дані користувача та інформацію
про його взаємодію із сайтом. У цьому розділі відображаються активні курси,
прогрес навчання, збережені курси, досягнення, навчальна серія та тижнева
ціль. Наявність такого наповнення робить платформу більш персоналізованою
та дозволяє користувачеві контролювати власне навчання.
Сторінка «Вхід» містить форму авторизації з полями email і пароля,
кнопку входу, посилання для реєстрації та додатковий елемент продовження
через Google. У межах демонстраційного проєкту ця сторінка виконує роль
інтерфейсного прикладу організації входу в акаунт.
У футері сайту розміщується допоміжний контент: логотип, короткий
опис платформи, посилання на основні курси, інформація про компанію та
блок підтримки. Такий елемент завершує структуру сторінок і забезпечує
додаткову навігацію.
Оскільки DevMaster є демонстраційним проєктом, важливо коректно
зазначати, що навчальні курси взято з відкритого доступу, а сайт не
позиціонується як повноцінна комерційна LMS із реальною базою даних.
Основна мета наповнення полягає в демонстрації структури освітньої
платформи, принципів подання курсів, роботи з картками, сторінками та
особистим кабінетом.
Арк.
ЧДТУ 262223.24 ПЗ
40
Змн. Арк. № Документа Підпис Дата
Рисунок 2.2 – Модель наповнення web-платформи DevMaster
Таким чином, наповнення web-платформи DevMaster охоплює
презентаційну частину, каталог курсів, детальні сторінки навчальних програм,
особистий кабінет, форму входу та допоміжні навігаційні блоки.
2.6. Вимоги до прототипу web-платформи DevMaster
Прототип web-платформи є важливим етапом проєктування, оскільки
дозволяє попередньо визначити структуру сторінок, розміщення основних
елементів інтерфейсу та логіку переходів між розділами сайту. Для web-
платформи DevMaster прототип було розроблено у вигляді схематичного
каркаса сторінок, який відображає загальну будову майбутнього ресурсу без
деталізації кольорового оформлення, графіки та кінцевих дизайнерських
рішень.
На прототипі показано основні сторінки web-платформи: головну
сторінку, каталог курсів, сторінку окремого курсу, особистий кабінет
користувача та сторінку входу. Такий підхід дозволяє оцінити загальну логіку
Арк.
ЧДТУ 262223.24 ПЗ
41
Змн. Арк. № Документа Підпис Дата
роботи сайту ще до етапу програмної реалізації. Схематичне подання сторінок
допомагає визначити, де саме розміщуються навігаційне меню, блоки з
курсами, картки навчальних програм, кнопки дії, форма авторизації, елементи
особистого кабінету та додаткові інформаційні блоки.
Рисунок 2.3 – Прототип сторінок web-платформи DevMaster
Головна сторінка прототипу містить верхнє навігаційне меню, головний
інформаційний блок, кнопки швидкої дії, статистичні показники, блок
популярних курсів, переваги платформи, порівняння з конкурентами та футер.
Така структура дозволяє користувачеві швидко зрозуміти призначення сайту й
перейти до перегляду каталогу курсів.
Сторінка каталогу курсів передбачає розміщення пошукового поля,
фільтрів за категоріями та рівнями складності, а також карток курсів. Картки
містять місце для зображення, назви курсу, короткого опису, рейтингу,
Арк.
ЧДТУ 262223.24 ПЗ
42
Змн. Арк. № Документа Підпис Дата
кількості студентів і вартості. Це дає змогу користувачеві швидко переглядати
доступні навчальні програми та обирати потрібний курс.
Сторінка окремого курсу містить блок із зображенням, назвою курсу,
короткими характеристиками, вартістю, кнопками взаємодії, описом курсу,
програмою навчання, очікуваними результатами, вимогами до користувача та
додатковими інформаційними блоками. Така структура забезпечує повне
ознайомлення користувача з навчальною програмою перед початком
проходження курсу.
Особистий кабінет користувача у прототипі передбачає відображення
профілю, активних курсів, прогресу навчання, збережених курсів, досягнень,
навчальної серії та тижневої цілі. Це дозволяє реалізувати персоналізовану
взаємодію користувача із платформою та надати йому інформацію про
результати навчання.
Сторінка входу містить форму авторизації з полями для email і пароля,
кнопку входу, додатковий варіант входу через Google та посилання на
реєстрацію. У межах дипломного проєкту ця сторінка демонструє принцип
побудови авторизаційного інтерфейсу без використання складної серверної
логіки.
Отже, розроблений прототип дозволяє наочно представити структуру
web-платформи DevMaster, визначити основні сторінки, розміщення
функціональних елементів і логіку переходів між ними. Він є основою для
подальшої програмної реалізації інтерфейсу, створення компонентів,
налаштування навігації та перевірки зручності користувацьких сценаріїв.
2.7. Техніко-економічне обґрунтування доцільності розробки web-
платформи DevMaster
Техніко-економічне обґрунтування є важливим етапом під час розробки
web-орієнтованої інформаційної системи, оскільки дозволяє оцінити
доцільність створення ресурсу з погляду технічної реалізації, трудомісткості,
Арк.
ЧДТУ 262223.24 ПЗ
43
Змн. Арк. № Документа Підпис Дата
очікуваної користі, витрат часу та перспектив подальшого розвитку. Для web-
платформи онлайн-курсів таке обґрунтування має особливе значення, оскільки
система поєднує освітній контент, користувацькі сервіси, персональний
кабінет, навігацію, каталог курсів і механізми збереження даних.
Розробка web-платформи DevMaster передбачає створення сучасного
освітнього ресурсу, який забезпечує користувачам доступ до каталогу курсів,
детальних сторінок навчальних програм, особистого кабінету, прогресу
навчання та демонстраційної форми входу. Саме тому під час оцінювання
доцільності розробки необхідно враховувати не лише створення інтерфейсу, а
й реалізацію окремих функціональних модулів, організацію даних, тестування,
наповнення курсами та подальшу підтримку ресурсу.
З технічної точки зору доцільність створення web-платформи полягає в
можливості реалізації зручного, адаптивного й швидкого frontend-додатка
засобами сучасних web-технологій. Використання React забезпечує
компонентну структуру інтерфейсу, Vite спрощує запуск і збирання frontend-
проєкту, а Tailwind CSS дозволяє швидко формувати адаптивний дизайн.
Завдяки цьому розробка може бути організована послідовно, а окремі елементи
інтерфейсу — повторно використовуватися на різних сторінках.
З економічної точки зору web-платформа має практичну цінність завдяки
можливості багаторазового використання, оновлення контенту, поступового
розширення функціоналу та демонстрації готового освітнього ресурсу без
значних витрат на серверну інфраструктуру. Оскільки дані в межах проєкту
зберігаються в localStorage, для базової демонстрації функціоналу не потрібно
розгортати окрему базу даних або сервер. Це зменшує складність реалізації та
дозволяє зосередитися на frontend-частині, структурі сторінок і
користувацькому інтерфейсі.
Розробка web-платформи DevMaster виконується послідовно та охоплює
кілька взаємопов’язаних етапів. На першому етапі здійснюється аналіз
предметної області, під час якого визначаються особливості web-платформ
онлайн-навчання, потреби потенційних користувачів, основні функції
Арк.
ЧДТУ 262223.24 ПЗ
44
Змн. Арк. № Документа Підпис Дата
майбутнього сайту та проблеми, які повинна вирішувати система. Такий аналіз
дає змогу сформувати загальне бачення ресурсу та визначити його місце серед
аналогічних рішень.
Наступним етапом є формування функціональних і нефункціональних
вимог до системи. До функціональних вимог належать перегляд курсів, робота
з картками курсів, пошук і фільтрація, перегляд детальної сторінки курсу,
робота з особистим кабінетом, відображення прогресу, збереження даних і
авторизація в демонстраційному форматі. До нефункціональних вимог
належать адаптивність, зручність інтерфейсу, швидкодія, стабільність роботи,
читабельність, доступність і можливість подальшого розширення.
Після визначення вимог виконується проєктування структури сайту. На
цьому етапі визначаються основні сторінки ресурсу, логіка навігації та
взаємозв’язки між окремими модулями. Для web-платформи DevMaster
передбачено такі основні розділи: головна сторінка, каталог курсів, сторінка
окремого курсу, особистий кабінет і сторінка входу. Така структура дозволяє
логічно розподілити інформацію та забезпечити зручний доступ до основних
функцій сайту.
Окремим етапом є розробка дизайну інтерфейсу. Для освітнього ресурсу
у сфері програмування важливо створити сучасний вигляд, який відповідає
тематиці IT і не відволікає користувача від навчального контенту. Під час
розробки дизайну враховуються кольорова гама, типографіка, розміщення
карток курсів, вигляд кнопок, форм, навігаційних елементів і блоків прогресу.
Важливо, щоб інтерфейс був не лише естетично привабливим, а й
функціонально зручним.
Після підготовки структури та дизайну виконується реалізація
користувацької частини сайту. У межах цього етапу створюються основні
сторінки web-платформи, зокрема головна сторінка, каталог курсів, сторінка
окремого курсу, кабінет користувача та сторінка входу. Особлива увага
приділяється каталогу курсів, оскільки саме він є одним із ключових
функціональних розділів системи. Картки курсів містять стислий опис,
Арк.
ЧДТУ 262223.24 ПЗ
45
Змн. Арк. № Документа Підпис Дата
зображення, рівень складності, тривалість, рейтинг, кількість студентів і
вартість.
Важливим етапом є реалізація особистого кабінету. Цей розділ
забезпечує персоналізовану взаємодію із сайтом, оскільки користувач може
переглядати активні курси, прогрес навчання, збережені курси, досягнення та
тижневу ціль. Наявність кабінету підвищує зручність використання ресурсу та
дозволяє користувачеві повертатися до навчання.
Окреме значення має організація localStorage. Цей механізм
використовується для збереження даних у браузері користувача, що дозволяє
підтримувати окремі сценарії роботи між сеансами. У межах DevMaster
localStorage може застосовуватися для збереження даних демонстраційного
акаунта, активних курсів, обраних курсів або прогресу навчання. Такий підхід
є технічно простим і доцільним для дипломного проєкту демонстраційного
характеру.
Після реалізації основних модулів проводиться тестування web-
платформи. Перевіряється коректність роботи сторінок, кнопок, форм, пошуку,
фільтрації, навігації, адаптивності та збереження даних у браузері. Для
оцінювання якості web-сторінок можна використовувати інструменти аудиту,
зокрема Lighthouse, який дозволяє отримувати рекомендації щодо
продуктивності, доступності, SEO та найкращих практик web-розробки.
Для більш повного обґрунтування доцільності розробки web-платформи
DevMaster було виконано орієнтовну оцінку трудомісткості та витрат на
створення проєкту. Оскільки система має демонстраційний характер і
реалізована як frontend-проєкт, основними витратами є час на аналіз
предметної області, проєктування структури сайту, розробку інтерфейсу,
реалізацію основних сторінок, налаштування локального збереження даних,
тестування та розгортання ресурсу.
Арк.
ЧДТУ 262223.24 ПЗ
46
Змн. Арк. № Документа Підпис Дата
Таблиця 2.1 – Орієнтовна трудомісткість розробки web-платформи
DevMaster
Орієнтовна
№ Етап виконання роботи тривалість, год
1 Аналіз предметної області та аналогів 8
2 Формування вимог до web-платформи 10
3 Проєктування структури сайту та прототипу 12
4 Розробка дизайну інтерфейсу 18
5 Реалізація основних сторінок і компонентів 45
6 Організація роботи з localStorage 8
7 Тестування, виправлення помилок і розгортання 14
Разом 115
Загальна орієнтовна трудомісткість розробки web-платформи DevMaster
становить 115 годин. Найбільше часу припадає на реалізацію основних
сторінок і компонентів, оскільки саме цей етап охоплює створення головної
сторінки, каталогу курсів, сторінки окремого курсу, особистого кабінету,
сторінки входу, карток курсів, фільтрів, кнопок і блоків прогресу.
Для визначення приблизної вартості розробки було прийнято умовну
вартість однієї години роботи розробника — 100 грн. Також враховано
додаткові витрати, пов’язані з використанням комп’ютерної техніки,
електроенергії, доступом до мережі Інтернет та непередбаченими витратами.
Таблиця 2.2 – Орієнтовний розрахунок витрат на розробку web-
платформи DevMaster
№ Стаття витрат Сума, грн
1 Оплата праці розробника за 115 годин роботи 0
2 Додаткові витрати на організацію розробки 0
3 Амортизація комп’ютерної техніки 0
4 Витрати на електроенергію 0
5 Витрати на доступ до мережі Інтернет 0
6 Розгортання web-проєкту на Vercel 0
Загальна орієнтовна вартість 0
Отже, орієнтовна вартість розробки web-платформи DevMaster
становить 0 грн. Це значення є приблизним, оскільки фактичні витрати
Арк.
ЧДТУ 262223.24 ПЗ
47
Змн. Арк. № Документа Підпис Дата
можуть змінюватися залежно від тривалості розробки, вартості робочого часу,
технічного забезпечення, складності реалізованого функціоналу та умов
подальшого розгортання.
Важливим елементом технічного обґрунтування є визначення маршрутів
web-сайту та логіки обробки даних. У межах користувацької частини web-
платформи передбачено такі основні сторінкові маршрути: головна сторінка
«/», сторінка каталогу курсів «/courses», сторінка детального перегляду курсу
«/courses/», сторінка особистого кабінету «/dashboard» або «/cabinet», сторінка
входу «/login». Такий підхід забезпечує зрозумілу структуру переходів і
дозволяє користувачам швидко знаходити потрібні розділи.
У разі подальшого розвитку системи можна передбачити окремі API-
маршрути або серверні запити для роботи з курсами, користувачами,
прогресом і сертифікатами. Наприклад, маршрут «/api/courses» може
відповідати за отримання списку курсів, «/api/courses/» — за отримання
детальної інформації про курс, «/api/users» — за роботу з користувачами,
«/api/progress» — за збереження прогресу, «/api/certificates» — за формування
сертифікатів. У поточній демонстраційній реалізації такі дії можуть бути
замінені локальною логікою та збереженням даних у браузері.
Наявність чіткої системи маршрутів і логіки роботи з даними підвищує
структурованість розробки та спрощує подальше масштабування web-
платформи. У майбутньому до системи можна додати реальну серверну
частину, базу даних, адміністративну панель, онлайн-редактор коду, тести,
сертифікати, оплату курсів, email-сповіщення та інтеграцію зі сторонніми
сервісами. Для розгортання frontend-додатків може використовуватися Vercel,
який підтримує різні сучасні frontend-фреймворки й забезпечує зручне
розміщення web-проєктів.
Економічна доцільність розробки полягає в тому, що для створення web-
платформи використано безкоштовні та відкриті інструменти: React, Vite,
Tailwind CSS, localStorage і Vercel. Завдяки цьому не потрібно витрачати кошти
на ліцензійне програмне забезпечення, окрему серверну інфраструктуру або
Арк.
ЧДТУ 262223.24 ПЗ
48
Змн. Арк. № Документа Підпис Дата
базу даних на етапі демонстраційної реалізації. Використання localStorage
дозволяє реалізувати базове збереження даних у браузері користувача без
додаткових витрат на backend-частину.
Порівняно з розробкою повноцінної освітньої платформи із серверною
частиною, базою даних, системою авторизації, оплатою, сертифікацією та
адміністративною панеллю, демонстраційна frontend-реалізація потребує
менших витрат часу й ресурсів. Водночас вона дозволяє показати основні
принципи роботи освітнього web-ресурсу: каталог курсів, сторінку окремого
курсу, особистий кабінет, прогрес навчання, пошук, фільтрацію та локальне
збереження даних.
Окремою перевагою розробленої web-платформи є можливість
подальшого розвитку. У майбутньому сайт DevMaster можна доповнити
інтерактивним редактором коду, тестуванням знань, реальними сертифікатами,
ролями користувачів, системою адміністративного керування, платіжним
модулем, статистикою навчання та базою даних. Це дозволяє розглядати
проєкт не лише як дипломну розробку, а й як основу для повноцінної освітньої
системи.
До можливих напрямів подальшого розвитку web-платформи належать
додавання нових курсів, розширення системи фільтрації, впровадження тестів
після уроків, підключення онлайн-редактора коду, реалізація системи
сертифікації, створення адміністративної панелі, інтеграція бази даних,
впровадження email-сповіщень, покращення статистики користувача та
адаптація платформи до різних форматів навчання.
З технічної точки зору web-платформа є придатною до масштабування,
оскільки її структура передбачає окремі функціональні модулі: головна
сторінка, каталог курсів, сторінка курсу, кабінет користувача, сторінка входу,
пошук, фільтри, прогрес і локальне збереження даних. Такий модульний підхід
дозволяє доповнювати систему новими можливостями без повної зміни її
архітектури.
Арк.
ЧДТУ 262223.24 ПЗ
49
Змн. Арк. № Документа Підпис Дата
З практичної точки зору розроблений ресурс може використовуватися як
демонстраційна освітня платформа, приклад frontend-додатка для онлайн-
курсів або основа для подальшого розширення до повноцінної навчальної
системи. Його використання дозволяє систематизувати інформацію про курси,
надати користувачам зручний інтерфейс для вибору навчальної програми та
продемонструвати принципи організації персонального кабінету.
Отже, розробка web-платформи онлайн-курсів з програмування
DevMaster є технічно можливою, економічно обґрунтованою та практично
доцільною. Створений ресурс може використовуватися для демонстрації
структури освітньої платформи, перегляду курсів, роботи з особистим
кабінетом, відображення прогресу та локального збереження даних. Наявність
каталогу курсів, сторінок навчальних програм, кабінету користувача й
адаптивного інтерфейсу забезпечує функціональну завершеність системи, а
можливість подальшого розширення підвищує її цінність і перспективність.
Висновки до розділу 2
У другому розділі кваліфікаційної роботи було розглянуто призначення
web-платформи онлайн-курсів з програмування DevMaster, визначено її
основні функції та роль у демонстрації цифрового освітнього середовища.
Було встановлено, що розроблюваний ресурс має не лише надавати
користувачам доступ до каталогу курсів, а й створювати зручне середовище
для перегляду навчальних програм, пошуку, фільтрації, роботи з особистим
кабінетом і контролю прогресу.
У процесі аналізу було сформовано вимоги до дизайну, структури
сторінок, навігації, наповнення, адміністрування та прототипу web-
платформи. Особливу увагу було приділено зручності користувацького
інтерфейсу, оскільки для освітнього сайту важливо забезпечити швидкий
доступ до курсів, сторінок навчальних програм, кабінету користувача та форми
Арк.
ЧДТУ 262223.24 ПЗ
50
Змн. Арк. № Документа Підпис Дата
входу. Визначено, що дизайн ресурсу має бути сучасним, адаптивним,
візуально цілісним і не перевантаженим зайвими елементами.
Під час розробки структури сайту було враховано фактичну реалізацію
web-платформи DevMaster, яка включає головну сторінку, каталог курсів,
сторінку окремого курсу, особистий кабінет користувача та сторінку входу.
Кожен із цих розділів виконує окрему функцію в межах освітньої web-системи.
Головна сторінка знайомить користувача з ресурсом, каталог забезпечує
доступ до навчальних програм, сторінка курсу надає детальну інформацію,
кабінет відображає персональні навчальні дані, а сторінка входу демонструє
принцип організації авторизації.
Також було описано каталог курсів, який містить картки навчальних
програм, пошук і фільтрацію. Наявність таких елементів значно покращує
зручність користування сайтом, оскільки користувач може швидко знайти курс
відповідно до власних інтересів, рівня підготовки та напряму навчання.
Окремо було розглянуто сторінку детального перегляду курсу, де розміщується
опис, характеристики, програма, модулі, результати навчання та кнопки
взаємодії.
Важливою складовою web-платформи є використання localStorage для
локального збереження даних у браузері користувача. Завдяки цьому система
може підтримувати окремі демонстраційні сценарії роботи з даними без
використання повноцінної серверної частини. Такий підхід є доцільним для
дипломного проєкту, оскільки дозволяє показати принципи збереження стану,
роботи з кабінетом користувача та взаємодії з курсами.
Окрему увагу у другому розділі було приділено адміністративній частині
як перспективному напряму розвитку web-платформи. Для повноцінної
освітньої системи доцільно передбачити можливість керування курсами,
користувачами, сертифікатами, прогресом і налаштуваннями платформи. У
межах поточної демонстраційної реалізації ці можливості можуть бути описані
як напрям подальшого вдосконалення системи.
Арк.
ЧДТУ 262223.24 ПЗ
51
Змн. Арк. № Документа Підпис Дата
Також було обґрунтовано доцільність створення такого сайту з технічної
та економічної точок зору. З технічної точки зору, реалізація web-платформи
DevMaster є доцільною, оскільки сучасні frontend-технології дозволяють
створити адаптивний, швидкий і зручний ресурс із можливістю подальшого
розширення. З економічної точки зору, розроблений сайт може
використовуватися багаторазово, доповнюватися новими курсами та
масштабуватися відповідно до потреб користувачів.
Проведений аналіз дозволив сформувати основу для подальшої
реалізації web-платформи DevMaster та визначити ключові напрями її
розвитку. У межах другого розділу було уточнено призначення ресурсу, його
основні функції, вимоги до дизайну, структури сторінок, навігації, наповнення
та прототипу. Це дало змогу визначити логіку побудови майбутньої системи та
встановити, які саме елементи необхідно реалізувати для забезпечення зручної
взаємодії користувача з каталогом курсів, сторінкою окремого курсу,
особистим кабінетом і формою входу.
У майбутньому ресурс може бути доповнений серверною частиною,
базою даних, адміністративною панеллю, онлайн-редактором коду,
тестуванням знань, сертифікатами, системою реальної авторизації та
статистикою навчання. Таке розширення дозволить перетворити
демонстраційний frontend-проєкт на повноцінну освітню web-платформу,
придатну для зберігання даних користувачів, керування навчальним
контентом, контролю результатів проходження курсів і подальшого
масштабування. Отже, результати другого розділу створюють необхідне
підґрунтя для програмної реалізації, тестування та подальшого вдосконалення
web-платформи онлайн-курсів з програмування.
Арк.
ЧДТУ 262223.24 ПЗ
52
Змн. Арк. № Документа Підпис Дата
РОЗДІЛ 3. РОЗРОБКА WEB-РЕСУРСУ
3.1. Обґрунтування вибору інструментальних засобів розробки
Розробка web-платформи онлайн-курсів з програмування DevMaster
потребувала вибору таких інструментальних засобів, які забезпечують зручну
реалізацію користувацького інтерфейсу, швидку розробку окремих сторінок,
адаптивність, стабільну роботу в браузері та можливість подальшого
розширення функціональності. Оскільки сайт має демонстраційний характер і
призначений для відображення структури освітньої платформи, особливу
увагу було приділено frontend-технологіям, організації компонентів, роботі з
локальним збереженням даних і зручності розгортання ресурсу в мережі
Інтернет.
Під час вибору технологій враховувалися такі критерії: підтримка
компонентного підходу до побудови інтерфейсу, швидкість створення
сторінок, зручність підтримки коду, можливість повторного використання
елементів, підтримка адаптивного дизайну, простота тестування, стабільність
роботи в сучасних браузерах і можливість публікації готового проєкту на
хостинговій платформі. Також важливим було використання таких засобів, які
дозволяють реалізувати сайт без складної серверної інфраструктури, оскільки
дані в межах проєкту зберігаються засобами localStorage.
Основним середовищем розробки було обрано Visual Studio Code. Це
середовище є зручним для створення web-додатків, оскільки підтримує роботу
з HTML, CSS, JavaScript, TypeScript, JSX, сучасними frontend-бібліотеками та
системами керування версіями. Завдяки розширенням Visual Studio Code
спрощується форматування коду, підсвічування синтаксису, пошук помилок,
робота з терміналом, організація структури проєкту та швидке переміщення
між файлами. Для дипломного web-проєкту це є важливим, оскільки розробка
Арк.
ЧДТУ 262223.24 ПЗ
53
Змн. Арк. № Документа Підпис Дата
містить багато окремих компонентів, сторінок, стилів і допоміжних файлів
[26].
Для реалізації інтерфейсу використано бібліотеку React. Її перевагою є
компонентний підхід, за якого сторінки web-платформи формуються з окремих
незалежних елементів. У межах DevMaster такими компонентами є
навігаційне меню, картки курсів, блоки переваг, форма входу, елементи
особистого кабінету, секції прогресу, кнопки дії, фільтри, футер і блоки
сторінки окремого курсу. Компонентна структура дозволяє повторно
використовувати однакові елементи на різних сторінках і спрощує подальше
розширення системи [7].
Для локальної розробки та збирання проєкту використано Vite. Цей
інструмент забезпечує швидкий запуск frontend-додатка, оперативне
оновлення змін під час редагування коду та оптимізоване формування
фінальної версії сайту. Використання Vite дозволяє прискорити процес
розробки, оскільки зміни в інтерфейсі відображаються без тривалого
очікування. Це є зручним під час створення сторінок, перевірки адаптивності
та налаштування стилів [8].
Для стилізації інтерфейсу використано Tailwind CSS. Його перевагою є
можливість швидко створювати адаптивний дизайн за допомогою утилітарних
CSS-класів. У web-платформі DevMaster Tailwind CSS використовується для
оформлення темного фону, фіолетово-синіх акцентів, карток курсів, кнопок,
форм, контейнерів, блоків прогресу та сіток сторінок. Такий підхід дозволяє
підтримувати єдиний стиль сайту та швидко змінювати зовнішній вигляд
окремих елементів без створення великої кількості окремих CSS-файлів [9].
Для реалізації логіки роботи інтерфейсу використано JavaScript і
TypeScript. JavaScript є основною мовою програмування для створення
інтерактивних web-сторінок, а TypeScript дає змогу доповнити код системою
типів, що полегшує підтримку проєкту та зменшує ймовірність частини
помилок під час розробки [27; 28]. У межах DevMaster ці засоби можуть
застосовуватися для роботи з масивами курсів, фільтрацією, пошуком,
Арк.
ЧДТУ 262223.24 ПЗ
54
Змн. Арк. № Документа Підпис Дата
збереженням даних у localStorage, обробкою подій користувача та
відображенням відповідних елементів інтерфейсу.
Для збереження даних у межах демонстраційного проєкту
використовується localStorage. Цей механізм дозволяє зберігати дані в браузері
користувача між сеансами роботи без використання повноцінної серверної
бази даних [10]. У DevMaster localStorage може застосовуватися для
збереження інформації про поточного користувача, активні курси, збережені
курси, прогрес навчання або інші дані, необхідні для імітації персоналізованої
взаємодії із сайтом. Такий підхід є доцільним для дипломного проєкту,
оскільки дозволяє продемонструвати принципи збереження стану web-додатка
без ускладнення архітектури.
Для маршрутизації між сторінками може використовуватися React
Router. Він дозволяє організувати переходи між головною сторінкою,
каталогом курсів, сторінкою окремого курсу, особистим кабінетом і сторінкою
входу без повного перезавантаження web-додатка [19]. Такий підхід відповідає
логіці сучасних односторінкових застосунків, де зміна сторінки відбувається
швидко, а користувач не відчуває затримок під час навігації.
Для перевірки роботи сайту використовувалися браузерні інструменти
розробника, зокрема Chrome DevTools. Вони дозволяють переглядати
структуру HTML-елементів, перевіряти стилі, тестувати адаптивність,
аналізувати повідомлення в консолі, контролювати localStorage та оцінювати
поведінку сторінок під час взаємодії користувача із сайтом [29]. Для додаткової
оцінки якості сторінок може використовуватися Lighthouse, який допомагає
перевіряти продуктивність, доступність і відповідність web-сторінок кращим
практикам [21].
Для розміщення готового сайту в мережі Інтернет використано
платформу Vercel. Вона підтримує розгортання сучасних frontend-проєктів і
дозволяє швидко отримати публічне посилання на web-додаток [22]. Це є
зручним для дипломного проєкту, оскільки дає змогу перевіряти роботу сайту
не лише локально, а й у реальному браузерному середовищі з різних пристроїв.
Арк.
ЧДТУ 262223.24 ПЗ
55
Змн. Арк. № Документа Підпис Дата
Отже, обраний стек технологій є доцільним для реалізації web-
платформи DevMaster. Поєднання Visual Studio Code, React, Vite, Tailwind CSS,
JavaScript, TypeScript, React Router, localStorage, Chrome DevTools і Vercel
дозволяє створити адаптивний, сучасний і функціонально завершений
frontend-проєкт, який демонструє основні можливості освітньої платформи
онлайн-курсів із програмування.
Рисунок 3.1 – Структура проєкту DevMaster у середовищі Visual Studio Code
Арк.
ЧДТУ 262223.24 ПЗ
56
Змн. Арк. № Документа Підпис Дата
3.2. Опис програмної реалізації web-платформи DevMaster
Web-платформу DevMaster реалізовано як демонстраційний освітній
web-ресурс, призначений для перегляду онлайн-курсів із програмування,
ознайомлення з навчальними програмами, роботи з особистим кабінетом
користувача та відображення прогресу навчання. Основна ідея програмної
реалізації полягає у створенні зручного frontend-додатка, який об’єднує
каталог курсів, сторінку окремого курсу, кабінет користувача, сторінку входу
та механізм локального збереження даних у браузері.
Користувацький інтерфейс web-платформи побудований за принципом
простої та зрозумілої навігації. У верхній частині сайту розміщено логотип
DevMaster, посилання на каталог курсів, перехід до кабінету користувача,
інформацію про активного користувача та кнопку виходу. Така структура
дозволяє швидко переходити між основними сторінками сайту й не
перевантажує інтерфейс зайвими елементами. Для освітнього ресурсу це є
важливим, оскільки користувач повинен швидко знаходити потрібні курси,
переглядати навчальні програми та контролювати власний прогрес.
Головна сторінка виконує презентаційну функцію. На ній розміщено
головний інформаційний блок із назвою платформи, коротким описом її
призначення, кнопками швидкої дії «Почати навчання» та «Переглянути
курси», статистичними показниками, блоком популярних курсів, перевагами
платформи та порівнянням із конкурентами. Завдяки такій структурі
користувач одразу отримує загальне уявлення про можливості ресурсу та може
перейти до перегляду каталогу курсів.
Арк.
ЧДТУ 262223.24 ПЗ
57
Змн. Арк. № Документа Підпис Дата
Рисунок 3.2 – Головна сторінка web-платформи DevMaster
Сторінка «Курси» є одним із центральних функціональних модулів web-
платформи. Вона містить каталог навчальних програм, поданих у вигляді
карток. Кожна картка курсу має зображення, категорію, рівень складності,
тривалість, назву, короткий опис, ім’я викладача, рейтинг, кількість студентів і
вартість. Такий формат подання інформації є зручним, оскільки користувач
може швидко переглянути декілька курсів і обрати той, який відповідає його
інтересам, рівню підготовки та напряму навчання.
Для покращення роботи з каталогом реалізовано пошук і фільтрацію.
Пошук дозволяє знаходити курс за назвою або ключовими словами, а фільтри
дають змогу відбирати навчальні програми за категорією та рівнем складності.
Це спрощує користувацький сценарій і зменшує кількість зайвих дій під час
вибору курсу. Особливо важливими ці можливості є за наявності кількох
напрямів навчання, зокрема React, Python, Node.js, JavaScript, DevOps, Vue.js,
Flutter та інших технологій.
Арк.
ЧДТУ 262223.24 ПЗ
58
Змн. Арк. № Документа Підпис Дата
Рисунок 3.3 – Каталог курсів web-платформи DevMaster
Сторінка окремого курсу призначена для детального ознайомлення з
навчальною програмою. На ній відображається назва курсу, категорія, рівень
складності, короткий опис, рейтинг, кількість студентів, тривалість, викладач і
вартість. Також на сторінці розміщено блок «Що ви отримаєте», програму
курсу, кількість модулів і уроків, інформацію про тести, сертифікат після
завершення, очікувані результати навчання та вимоги до користувача. Така
структура допомагає користувачеві оцінити зміст курсу до початку навчання.
Важливим елементом сторінки курсу є блок взаємодії з користувачем. До
нього належать кнопки «Продовжити навчання», «Завантажити сертифікат»,
«Поділитися» та «Програма». У межах демонстраційного проєкту ці елементи
показують можливі сценарії роботи користувача з освітньою платформою.
Надалі їх можна розширити шляхом додавання реального проходження уроків,
тестування знань, формування сертифікатів і збереження результатів у базі
даних.
Арк.
ЧДТУ 262223.24 ПЗ
59
Змн. Арк. № Документа Підпис Дата
Рисунок 3.4 – Сторінка окремого курсу web-платформи DevMaster
Сторінка «Кабінет» створена для персоналізованої взаємодії користувача
із сайтом. У цьому розділі відображається інформація про користувача,
електронна пошта, меню профілю, статистичні показники, активні курси,
прогрес навчання, збережені курси, навчальна серія, досягнення та тижнева
ціль. Такий підхід дозволяє продемонструвати, як освітня web-платформа
може підтримувати мотивацію користувача й надавати йому інформацію про
власні результати.
Особистий кабінет є важливою частиною web-платформи, оскільки саме
він забезпечує зв’язок між користувачем і навчальним процесом. Користувач
може бачити активний курс, поточний прогрес, наступний модуль, кількість
годин навчання, завершені курси й отримані досягнення. У межах DevMaster
ці дані мають демонстраційний характер, однак вони показують логіку
побудови персоналізованого освітнього середовища.
Арк.
ЧДТУ 262223.24 ПЗ
60
Змн. Арк. № Документа Підпис Дата
Рисунок 3.5 – Особистий кабінет користувача web-платформи DevMaster
Сторінка входу призначена для демонстрації інтерфейсу авторизації
користувача та організації доступу до особистого кабінету web-платформи
DevMaster. Вона містить поля для введення email і пароля, кнопку «Увійти»,
посилання «Забули пароль?», кнопку продовження через Google та посилання
на реєстрацію нового користувача. Така структура відповідає типовому
вигляду сторінок авторизації сучасних web-сервісів і є зрозумілою для
користувача.
У межах дипломного проєкту ця сторінка демонструє принцип
організації форми входу, навіть якщо повноцінна серверна автентифікація не
використовується. Основна увага приділена побудові зручного інтерфейсу,
правильному розміщенню полів введення, кнопок і допоміжних посилань. У
подальшому сторінка входу може бути розширена шляхом підключення
реальної автентифікації, бази даних користувачів, перевірки введених даних,
відновлення пароля та розмежування ролей користувачів.
Арк.
ЧДТУ 262223.24 ПЗ
61
Змн. Арк. № Документа Підпис Дата
Рисунок 3.6 – Сторінка входу web-платформи DevMaster
Футер сайту виконує допоміжну навігаційну функцію. Він містить
логотип DevMaster, короткий опис платформи, посилання на основні напрями
курсів, інформацію про компанію, контакти, блог, FAQ, допомогу та умови
використання. Наявність футера надає сайту завершеного вигляду й забезпечує
доступ до додаткових розділів, які можуть бути реалізовані в майбутньому.
Таким чином, розроблена web-платформа має кілька основних частин:
презентаційну, навчальну та персоналізовану. Презентаційна частина
представлена головною сторінкою, навчальна — каталогом і сторінками
курсів, а персоналізована — особистим кабінетом і сторінкою входу. Така
структура відповідає типовим сценаріям використання освітніх web-платформ
і дозволяє продемонструвати основні принципи організації онлайн-навчання.
3.3. Організація даних і взаємодія з localStorage
У web-платформі DevMaster дані організовано у демонстраційному форматі
без використання повноцінної серверної бази даних. Такий підхід відповідає
Арк.
ЧДТУ 262223.24 ПЗ
62
Змн. Арк. № Документа Підпис Дата
характеру дипломного проєкту, оскільки сайт є прикладом готової frontend-
реалізації освітньої web-платформи. Курси, представлені на сайті, взято з
відкритого доступу, а основна увага приділяється інтерфейсу, структурі
сторінок, логіці взаємодії та локальному збереженню частини користувацьких
даних.
Для збереження окремих даних використовується localStorage. Це
вбудований механізм браузера, який дозволяє зберігати пари «ключ–значення»
між сеансами роботи користувача [10]. На відміну від тимчасового стану
компонентів, дані в localStorage не зникають після оновлення сторінки або
закриття браузера. Завдяки цьому можна імітувати збереження
користувацького прогресу, активних курсів або налаштувань без підключення
серверної частини.
У межах DevMaster localStorage може використовуватися для таких
задач:
– збереження інформації про поточного користувача;
– збереження стану входу в демонстраційний акаунт;
– збереження активних курсів користувача;
– збереження обраних або збережених курсів;
– збереження прогресу проходження курсу;
– збереження навчальної серії або тижневої цілі;
– збереження окремих налаштувань інтерфейсу.
Основними інформаційними сутностями web-платформи є курс,
користувач, прогрес, збережений курс і досягнення. Сутність «Курс» містить
назву, опис, категорію, рівень складності, тривалість, рейтинг, кількість
студентів, викладача, вартість, зображення й програму навчання. Сутність
«Користувач» може містити ім’я, email, роль, активні курси та персональні
показники. Сутність «Прогрес» описує відсоток проходження курсу, кількість
завершених уроків або навчальних годин. Сутність «Досягнення» може
містити назву, умову отримання та дату виконання.
Арк.
ЧДТУ 262223.24 ПЗ
63
Змн. Арк. № Документа Підпис Дата
Під час відкриття каталогу курсів система відображає список доступних
навчальних програм із локального набору даних або підготовленого масиву
об’єктів. Користувач може застосовувати пошук і фільтри, після чого
інтерфейс оновлює відображення карток відповідно до вибраних параметрів.
Якщо користувач переходить на сторінку окремого курсу, система знаходить
відповідний курс за ідентифікатором і відображає повну інформацію про
нього.
Під час взаємодії з особистим кабінетом дані можуть зчитуватися з
localStorage. Наприклад, якщо користувач продовжує навчання, система може
оновити значення прогресу та зберегти його в браузері. Якщо курс додається
до збережених, у localStorage може записуватися його ідентифікатор. Під час
наступного відкриття кабінету система зчитує ці дані та відображає
актуальний стан для користувача.
Важливо зазначити, що localStorage не є повноцінною заміною бази
даних. Дані зберігаються лише в браузері конкретного користувача й не
синхронізуються між різними пристроями. Також localStorage не варто
використовувати для збереження критично важливої або конфіденційної
інформації. У межах DevMaster цей механізм використовується саме як
демонстраційний інструмент для показу принципів локального збереження
даних.
У разі подальшого розвитку web-платформи localStorage може бути
замінено або доповнено серверною частиною та базою даних. Це дозволить
централізовано зберігати курси, користувачів, прогрес, сертифікати,
результати тестів і статистику навчання. Такий підхід зробить систему
придатною для реального використання кількома користувачами та
забезпечить синхронізацію даних між різними пристроями.
Арк.
ЧДТУ 262223.24 ПЗ
64
Змн. Арк. № Документа Підпис Дата
Рисунок 3.7 – Схема організації даних web-платформи DevMaster у
localStorage
Отже, використання localStorage у web-платформі DevMaster є
доцільним для демонстраційного дипломного проєкту. Воно дозволяє
реалізувати базові сценарії збереження даних, показати принцип роботи
персоналізованого кабінету та уникнути надмірного ускладнення архітектури
системи.
3.4. Логіка маршрутів і обміну даними у web-платформі DevMaster
У web-платформі DevMaster взаємодія користувача із сайтом може бути
описана через логіку сторінкових маршрутів і локального обміну даними між
компонентами. Оскільки проєкт є frontend-орієнтованим і не використовує
повноцінну серверну базу даних, основна логіка роботи реалізується на
стороні клієнта. Це означає, що переходи між сторінками, відображення
Арк.
ЧДТУ 262223.24 ПЗ
65
Змн. Арк. № Документа Підпис Дата
курсів, фільтрація, робота з кабінетом і збереження окремих даних
виконуються без звернення до окремого backend-сервера.
У межах користувацької частини web-платформи доцільно виділити такі
основні сторінкові маршрути:
– «/» — головна сторінка платформи;
– «/courses» — каталог курсів;
– «/courses/» — сторінка детального перегляду конкретного курсу;
– «/cabinet» або «/dashboard» — особистий кабінет користувача;
– «/login» — сторінка входу;
– «/profile» — профіль користувача, якщо він виділяється окремо від
кабінету.
Головна сторінка є стартовою точкою взаємодії користувача із сайтом. З
неї користувач може перейти до каталогу курсів за допомогою кнопки «Почати
навчання» або «Переглянути курси». Також з головної сторінки можна
відкрити популярні курси або скористатися навігаційним меню для переходу
до кабінету.
Маршрут «/courses» відповідає за відображення каталогу курсів. На цій
сторінці користувач може переглядати навчальні програми, використовувати
пошук, застосовувати фільтри за категорією та рівнем складності. Після
вибору конкретної картки курсу система переводить користувача на сторінку
«/courses/», де відображається розгорнута інформація про вибрану навчальну
програму.
Маршрут «/courses/» використовується для сторінки окремого курсу.
Значення «id» дозволяє визначити, яку саме навчальну програму потрібно
показати. На цій сторінці користувач може переглянути опис курсу, програму,
модулі, очікувані результати, вимоги, вартість і кнопки взаємодії. За потреби
користувач може повернутися до каталогу або перейти до особистого кабінету.
Маршрут «/cabinet» або «/dashboard» відповідає за особистий кабінет
користувача. Тут відображаються активні курси, прогрес навчання, збережені
курси, досягнення та тижнева ціль. Дані для цієї сторінки можуть формуватися
на основі локального стану застосунку та записів у localStorage. Якщо
Арк.
ЧДТУ 262223.24 ПЗ
66
Змн. Арк. № Документа Підпис Дата
користувач виконує дію, наприклад продовжує навчання або додає курс до
збережених, відповідні зміни можуть фіксуватися локально.
Маршрут «/login» використовується для сторінки входу. У межах
демонстраційного проєкту ця сторінка імітує процес авторизації користувача.
Після введення даних і натискання кнопки «Увійти» система може записати
стан входу до localStorage і перенаправити користувача до особистого кабінету.
Така логіка демонструє базовий принцип роботи з користувацьким станом без
серверної автентифікації.
Узагальнено логіку обміну даними можна описати так: користувач
виконує дію в інтерфейсі, компонент обробляє цю дію, за потреби оновлює
локальний стан застосунку та записує відповідні дані до localStorage. Після
цього інтерфейс оновлюється відповідно до нового стану. Наприклад, під час
додавання курсу до збережених система записує ідентифікатор курсу в
localStorage, а під час відкриття кабінету зчитує цей запис і показує
відповідний курс у розділі збережених.
Рисунок 3.8 – Схема взаємодії сторінок web-платформи DevMaster
Арк.
ЧДТУ 262223.24 ПЗ
67
Змн. Арк. № Документа Підпис Дата
Описана логіка маршрутів робить архітектуру web-платформи
зрозумілою та підготовленою до подальшого масштабування. У майбутньому
локальні операції можна замінити API-запитами до серверної частини.
Наприклад, замість читання курсів із локального масиву можна отримувати їх
через маршрут «/api/courses», а прогрес користувача зберігати через
«/api/progress». Це дозволить поступово перетворити демонстраційний
frontend-проєкт на повноцінну освітню систему.
3.5. Тестування web-платформи DevMaster
Тестування web-платформи є необхідним етапом розробки, оскільки
воно дозволяє перевірити відповідність реалізованої системи поставленим
вимогам. Для DevMaster тестування було спрямоване на перевірку коректності
роботи сторінок, зручності навігації, відображення карток курсів, роботи
пошуку та фільтрів, відкриття сторінки окремого курсу, функціонування
особистого кабінету, форми входу та збереження даних у localStorage.
Під час перевірки враховувалися такі напрями: тестування верстки,
функціональне тестування, UX-тестування, адаптивне тестування, перевірка
localStorage, безпекова оцінка демонстраційної логіки та тестування
продуктивності. Такий підхід дозволяє оцінити не лише технічну
працездатність сайту, а й зручність його використання з погляду звичайного
користувача.
Тестування верстки передбачало перевірку правильності відображення
основних елементів інтерфейсу. Було перевірено наявність логотипу,
верхнього меню, кнопок, карток курсів, фільтрів, блоків переваг, таблиці
порівняння з конкурентами, сторінки курсу, особистого кабінету, форми входу
та футера. Також оцінювалося коректне розміщення блоків, читабельність
тексту, відповідність кольорів загальному стилю й відсутність візуальних
помилок.
Функціональне тестування було спрямоване на перевірку основних
можливостей сайту. Зокрема, перевірялася робота переходів між сторінками,
Арк.
ЧДТУ 262223.24 ПЗ
68
Змн. Арк. № Документа Підпис Дата
відкриття каталогу курсів, пошук навчальних програм, фільтрація за
категорією та рівнем складності, відкриття сторінки окремого курсу,
повернення до каталогу, перехід до кабінету, вихід з акаунта та відкриття
сторінки входу. Окремо перевірялася коректність відображення інформації про
курси: назви, опису, рейтингу, кількості студентів, тривалості, викладача й
вартості.
UX-тестування дозволило оцінити зручність використання сайту. Було
перевірено зрозумілість назв пунктів меню, логічність структури сторінок,
помітність кнопок, зручність карток курсів, простоту використання фільтрів і
зрозумілість форми входу. Для освітньої платформи це є важливим, оскільки
користувач повинен швидко знайти потрібний курс і не витрачати зайвий час
на розуміння структури сайту.
Адаптивне тестування передбачало перевірку відображення сайту на
різних пристроях і розмірах екрана. Було оцінено роботу головної сторінки,
каталогу курсів, сторінки курсу, кабінету та сторінки входу на екранах
комп’ютера, планшета та смартфона. Особлива увага приділялася коректному
відображенню карток курсів, меню навігації, кнопок, форм і блоків прогресу.
Відсутність горизонтального прокручування та зручність натискання
елементів на мобільному пристрої є важливими показниками якості
адаптивного інтерфейсу.
Окремо було виконано перевірку роботи localStorage. Для цього
тестувалося збереження стану користувача, активних або збережених курсів,
прогресу навчання та інших демонстраційних даних. Після оновлення
сторінки або повторного відкриття сайту перевірялося, чи зберігаються
потрібні значення в браузері. Такий тест дозволяє підтвердити, що локальне
збереження працює відповідно до логіки проєкту.
Безпекова оцінка була спрямована на перевірку того, що в localStorage не
зберігаються критично важливі персональні або конфіденційні дані. Оскільки
проєкт має демонстраційний характер і не використовує реальну серверну
авторизацію, важливо не позиціонувати таку логіку як повноцінний захист
Арк.
ЧДТУ 262223.24 ПЗ
69
Змн. Арк. № Документа Підпис Дата
користувацького акаунта. Для реального впровадження системи необхідно
було б реалізувати серверну автентифікацію, захист API, ролі користувачів і
централізоване зберігання даних.
Тестування продуктивності передбачало перевірку швидкості
завантаження основних сторінок, стабільності роботи фільтрів, реакції
інтерфейсу на дії користувача та відсутності критичних помилок у консолі
браузера. Для цього можуть використовуватися Chrome DevTools і Lighthouse.
Такі інструменти дозволяють оцінити продуктивність сторінки, доступність,
найкращі практики та загальну якість реалізації web-ресурсу [21; 29].
Тестування web-платформи DevMaster було виконано шляхом ручної
перевірки основних сценаріїв користувача. Було перевірено відкриття головної
сторінки, перехід до каталогу курсів, роботу пошуку, застосування фільтрів,
відкриття сторінки курсу, перехід до особистого кабінету, перегляд прогресу,
відображення збережених курсів, роботу сторінки входу та кнопку виходу.
Також було перевірено відображення сайту в браузері після розгортання на
Vercel.
Рисунок 3.9 – Результати тестування web-платформи DevMaster
Арк.
ЧДТУ 262223.24 ПЗ
70
Змн. Арк. № Документа Підпис Дата
За результатами тестування встановлено, що web-платформа DevMaster
відповідає основним вимогам до демонстраційного освітнього web-ресурсу.
Основні сторінки відображаються коректно, навігація є зрозумілою, каталог
курсів працює відповідно до призначення, пошук і фільтри спрощують вибір
навчальної програми, сторінка курсу містить необхідну інформацію, а
особистий кабінет демонструє базову логіку персоналізованої взаємодії
користувача із сайтом.
3.6. Порівняння розробленої web-платформи з аналогами
Порівняння розробленої web-платформи з аналогічними рішеннями
дозволяє визначити її переваги та оцінити практичну значущість створеної
системи. У межах дипломної роботи доцільно порівняти DevMaster з такими
платформами онлайн-навчання, як Codecademy, freeCodeCamp, Stepik і
Prometheus. Ці ресурси виконують подібні або частково подібні функції,
оскільки надають доступ до навчальних матеріалів, курсів, практичних
завдань, особистого кабінету або прогресу навчання.
Codecademy має перевагу у вигляді інтерактивного підходу до вивчення
програмування. Платформа орієнтована на практичні вправи, навчальні шляхи
та поступове засвоєння матеріалу. Водночас Codecademy орієнтована
переважно на міжнародну аудиторію, а частина можливостей може бути
пов’язана з платними тарифами. DevMaster не дублює повністю
функціональність Codecademy, але використовує подібну ідею
структурованого подання курсів і зрозумілого переходу від каталогу до
конкретної навчальної програми.
freeCodeCamp має значну перевагу у вигляді безкоштовного доступу до
великої кількості навчальних матеріалів і практичних завдань. Цей ресурс
добре підходить для самостійного навчання програмуванню. Водночас його
структура може бути складною для користувача, який хоче швидко
Арк.
ЧДТУ 262223.24 ПЗ
71
Змн. Арк. № Документа Підпис Дата
переглянути окремий курс, його характеристики, вартість, викладача та рівень
складності. DevMaster, на відміну від freeCodeCamp, має більш компактну
карткову структуру каталогу та простішу навігацію.
Stepik є платформою онлайн-курсів різних напрямів, зокрема
програмування, математики, комп’ютерних наук та інших дисциплін. Його
перевагою є широка тематика, система проходження курсів і можливість
практичного навчання. Проте Stepik не є вузькоспеціалізованим ресурсом саме
для програмування. DevMaster, навпаки, сфокусований на курсах із
програмування та суміжних IT-напрямах, що робить його більш тематично
зосередженим у межах дипломного проєкту.
Prometheus є важливим прикладом української платформи онлайн-
освіти. Його перевагою є україномовна орієнтація, довіра користувачів і
наявність курсів професійного розвитку. Водночас Prometheus охоплює багато
різних галузей знань, а не лише програмування. DevMaster має більш вузьку
спеціалізацію та демонструє освітню платформу саме для IT-напрямів.
Перевагою web-платформи DevMaster є поєднання кількох
функціональних напрямів у межах одного компактного сайту. Користувач
може перейти з головної сторінки до каталогу курсів, виконати пошук,
застосувати фільтри, переглянути детальну сторінку курсу, відкрити
особистий кабінет і побачити власний прогрес. Темний мінімалістичний
дизайн із фіолетово-синіми акцентами робить інтерфейс сучасним і візуально
цілісним.
Водночас необхідно враховувати, що DevMaster має демонстраційний
характер. На відміну від великих освітніх платформ, він не використовує
повноцінну серверну базу даних, систему оплати, реальні сертифікати,
повноцінну автентифікацію та масштабну бібліотеку навчальних матеріалів.
Дані зберігаються в localStorage, що є достатнім для демонстрації логіки
frontend-проєкту, але не є повноцінною заміною серверної архітектури.
Отже, розроблена web-платформа не дублює повністю функціональність
великих освітніх сервісів, а створює компактне, зрозуміле й тематично
Арк.
ЧДТУ 262223.24 ПЗ
72
Змн. Арк. № Документа Підпис Дата
спрямоване середовище для демонстрації онлайн-курсів із програмування.
Основними перевагами системи є проста структура, адаптивний інтерфейс,
каталог курсів, пошук і фільтрація, детальна сторінка курсу, особистий кабінет,
відображення прогресу та локальне збереження даних у браузері.
Висновки до розділу 3
У третьому розділі було розглянуто програмну реалізацію web-
платформи онлайн-курсів з програмування DevMaster. Було обґрунтовано
вибір інструментальних засобів розробки, зокрема Visual Studio Code, React,
Vite, Tailwind CSS, JavaScript, TypeScript, React Router, localStorage, Chrome
DevTools і Vercel. Обрані технології дозволили реалізувати адаптивний
інтерфейс, організувати компонентну структуру проєкту, забезпечити локальне
збереження даних і розгорнути сайт у мережі Інтернет.
Було описано реалізацію основних сторінок web-платформи: головної
сторінки, каталогу курсів, сторінки окремого курсу, особистого кабінету
користувача та сторінки входу. Кожен розділ виконує окрему функцію та
забезпечує логічну взаємодію користувача із сайтом. Особливу увагу
приділено каталогу курсів, пошуку, фільтрації, карткам навчальних програм,
відображенню прогресу та роботі з персоналізованими даними користувача.
Окремо розглянуто організацію даних у localStorage. Було визначено
основні інформаційні сутності, необхідні для роботи системи: курс,
користувач, прогрес, збережений курс і досягнення. Така структура дозволяє
реалізувати базові демонстраційні сценарії без використання повноцінної
серверної бази даних. Водночас зазначено, що localStorage є доцільним саме
для демонстраційного проєкту, а для реального впровадження системи
потрібно передбачити серверну частину та централізоване зберігання даних.
Також було описано логіку сторінкових маршрутів і локального обміну
даними. Було показано, як користувацькі дії можуть бути пов’язані з
Арк.
ЧДТУ 262223.24 ПЗ
73
Змн. Арк. № Документа Підпис Дата
переходами між сторінками, оновленням локального стану й записом даних у
localStorage. Це дає змогу краще зрозуміти архітектуру системи та визначити
напрями її подальшого масштабування.
У межах розділу було розглянуто тестування web-платформи за кількома
напрямами: перевірка верстки, функціональне тестування, UX-тестування,
адаптивність, перевірка localStorage, безпекова оцінка демонстраційної логіки
та тестування продуктивності. За результатами тестування встановлено, що
сайт має логічну структуру, коректно відображає основні сторінки, забезпечує
роботу пошуку, фільтрів, кабінету користувача, сторінки курсу та локального
збереження даних.
Порівняння з аналогами показало, що web-платформа DevMaster має
практичну цінність завдяки тематичній орієнтації на програмування, простому
інтерфейсу, каталогу курсів, сторінці окремого курсу, особистому кабінету,
відображенню прогресу та сучасному темному дизайну. Таким чином,
розроблений сайт можна вважати функціонально завершеним
демонстраційним web-ресурсом, який відповідає поставленій меті
кваліфікаційної роботи та може бути основою для подальшого розвитку
повноцінної освітньої платформи.
Арк.
ЧДТУ 262223.24 ПЗ
74
Змн. Арк. № Документа Підпис Дата
ВИСНОВКИ
У кваліфікаційній роботі було розроблено демонстраційну web-
платформу онлайн-курсів з програмування DevMaster. Ресурс призначений для
перегляду каталогу курсів, пошуку та фільтрації навчальних програм,
ознайомлення з детальною інформацією про курси, роботи з особистим
кабінетом, відображення прогресу навчання та локального збереження даних
у браузері.
У процесі виконання роботи було проаналізовано предметну область
web-платформ онлайн-навчання, розглянуто аналоги Codecademy,
freeCodeCamp, Stepik і Prometheus, визначено їхні переваги та недоліки. На
основі аналізу було обґрунтовано доцільність створення власної web-
платформи, орієнтованої на зручне подання курсів із програмування, просту
навігацію, сучасний інтерфейс і персоналізовану взаємодію користувача із
сайтом.
Було сформовано технічне завдання, визначено структуру сайту, вимоги
до дизайну, навігації, наповнення, прототипу та функціональних можливостей.
Для реалізації проєкту використано Visual Studio Code, React, Vite, Tailwind
CSS, JavaScript, TypeScript, React Router, localStorage, Chrome DevTools і Vercel.
У результаті створено головну сторінку, каталог курсів, сторінку окремого
курсу, особистий кабінет користувача та сторінку входу.
Окрему увагу приділено організації даних у localStorage, що дозволило
реалізувати демонстраційні сценарії збереження стану користувача, активних
і збережених курсів, прогресу навчання та інших даних без використання
повноцінної серверної бази даних. Такий підхід є доцільним для дипломного
frontend-проєкту та водночас залишає можливість подальшого розширення
системи.
Проведене тестування підтвердило працездатність основних сторінок,
коректність навігації, роботу пошуку, фільтрації, особистого кабінету, сторінки
курсу, форми входу та локального збереження даних. Розроблена web-
Арк.
ЧДТУ 262223.24 ПЗ
75
Змн. Арк. № Документа Підпис Дата
платформа відповідає поставленій меті, має практичну цінність як приклад
освітнього web-ресурсу та може бути використана як основа для подальшого
розвитку.
У перспективі DevMaster можна доповнити серверною частиною, базою
даних, реальною авторизацією, адміністративною панеллю, онлайн-
редактором коду, тестами, сертифікатами, статистикою навчання та
інтеграцією зі сторонніми освітніми сервісами. Це дозволить перетворити
демонстраційний frontend-проєкт на повноцінну web-платформу для онлайн-
навчання програмуванню.
Подальше розширення системи також дасть змогу забезпечити
централізоване збереження даних користувачів, синхронізацію прогресу між
різними пристроями, керування навчальним контентом і формування
індивідуальних освітніх траєкторій. Завдяки цьому платформа зможе
підтримувати не лише перегляд курсів, а й повноцінний процес навчання з
практичними завданнями, перевіркою знань і відстеженням результатів
користувача.
Арк.
ЧДТУ 262223.24 ПЗ
76
Змн. Арк. № Документа Підпис Дата
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. UNESCO. Global Education Monitoring Report 2023: Technology in
education: A tool on whose terms? Paris : UNESCO, 2023. URL:
https://www.unesco.org/en/articles/2023-global-education-monitoring-
report-technology-education-tool-whose-terms (дата звернення:
16.02.2026).
2. European Commission. Digital Education Action Plan 2021–2027. URL:
https://education.ec.europa.eu/focus-topics/digital-education/actions (дата
звернення: 16.02.2026).
3. Codecademy. Learn to Code. URL: https://www.codecademy.com/ (дата
звернення: 03.03.2026).
4. freeCodeCamp. Learn to Code — For Free. URL:
https://www.freecodecamp.org/ (дата звернення: 03.03.2026).
5. Stepik. Online courses and lessons. URL: https://stepik.org/ (дата звернення:
03.03.2026).
6. Prometheus. Найкращі онлайн-курси України та світу. URL:
https://prometheus.org.ua/ (дата звернення: 03.03.2026).
7. React. Quick Start. React Documentation. URL: https://react.dev/learn (дата
звернення: 15.04.2026).
8. Vite. Next Generation Frontend Tooling. URL: https://vite.dev/ (дата
звернення: 15.04.2026).
9. Tailwind CSS. Documentation. URL: https://tailwindcss.com/ (дата
звернення: 15.04.2026).
10. MDN Web Docs. Window: localStorage property. URL:
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
(дата звернення: 15.04.2026).
11. W3C. Web Content Accessibility Guidelines (WCAG) 2.2. URL:
https://www.w3.org/TR/WCAG22/ (дата звернення: 15.04.2026).
12. Codecademy. Web Development Courses. URL:
https://www.codecademy.com/catalog/subject/web-development (дата
звернення: 03.03.2026).
13. freeCodeCamp. freeCodeCamp.org’s open-source codebase and curriculum.
URL: https://github.com/freeCodeCamp/freeCodeCamp (дата звернення:
03.03.2026).
14. Stepik. Онлайн-курсы от практиков. URL: https://welcome.stepik.org/ru
(дата звернення: 03.03.2026).
15. Google for Developers. Web.dev: Learn web development. URL:
https://web.dev/learn (дата звернення: 15.04.2026).
16. Nielsen J. 10 Usability Heuristics for User Interface Design. Nielsen Norman
Group. URL: https://www.nngroup.com/articles/ten-usability-heuristics/
(дата звернення: 15.04.2026).
Арк.
ЧДТУ 262223.24 ПЗ
77
Змн. Арк. № Документа Підпис Дата
17. Mozilla Developer Network. Responsive design. MDN Web Docs. URL:
https://developer.mozilla.org/en-
US/docs/Learn/CSS/CSS_layout/Responsive_Design (дата звернення:
15.04.2026).
18. OWASP Foundation. OWASP Top 10: Web Application Security Risks. URL:
https://owasp.org/www-project-top-ten/ (дата звернення: 15.04.2026).
19. React Router. Official Documentation. URL: https://reactrouter.com/ (дата
звернення: 15.04.2026).
20. Figma. Guide to prototyping in Figma. URL: https://help.figma.com/hc/en-
us/articles/360040314193-Guide-to-prototyping-in-Figma (дата звернення:
15.04.2026).
21. GoogleChrome. Lighthouse: Automated auditing, performance metrics, and
best practices. URL: https://github.com/GoogleChrome/lighthouse (дата
звернення: 02.05.2026).
22. Vercel. Frontends on Vercel. URL:
https://vercel.com/docs/frameworks/frontend (дата звернення: 02.05.2026).
23. Google Developers. PageSpeed Insights. URL: https://pagespeed.web.dev/
(дата звернення: 02.05.2026).
24. MDN Web Docs. Single-page applications. URL:
https://developer.mozilla.org/en-US/docs/Glossary/SPA (дата звернення:
15.04.2026).
25. W3C. HTML Standard. URL: https://html.spec.whatwg.org/ (дата
звернення: 15.04.2026).
26. Visual Studio Code. Documentation for Visual Studio Code. URL:
https://code.visualstudio.com/docs (дата звернення: 15.04.2026).
27. TypeScript. The TypeScript Handbook. URL:
https://www.typescriptlang.org/docs/handbook/intro.html (дата звернення:
15.04.2026).
28. MDN Web Docs. JavaScript Guide. URL: https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Guide (дата звернення: 15.04.2026).
29. Chrome for Developers. Chrome DevTools. URL:
https://developer.chrome.com/docs/devtools (дата звернення: 02.05.2026).
30. MDN Web Docs. Client-side storage. URL: https://developer.mozilla.org/en-
US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-
side_storage (дата звернення: 02.05.2026).
31. React. Passing Props to a Component. React Documentation. URL:
https://react.dev/learn/passing-props-to-a-component (дата звернення:
15.04.2026).
32. Testing Library. React Testing Library. URL: https://testing-
library.com/docs/react-testing-library/intro/ (дата звернення: 04.05.2026).
33. Testing Library. Introduction. URL: https://testing-library.com/docs/ (дата
звернення: 04.05.2026).
34. MDN Web Docs. Web Storage API. URL: https://developer.mozilla.org/en-
US/docs/Web/API/Web_Storage_API (дата звернення: 02.05.2026).
Арк.
ЧДТУ 262223.24 ПЗ
78
Змн. Арк. № Документа Підпис Дата
35. web.dev. Learn Core Web Vitals. URL: https://web.dev/explore/learn-core-
web-vitals (дата звернення: 04.05.2026).
36. Google Search Central. Understanding Core Web Vitals and Google search
results. URL: https://developers.google.com/search/docs/appearance/core-
web-vitals (дата звернення: 04.05.2026).
37. Курінний С. Розробка веб-сайтів для початківців: HTML – CSS –
JavaScript : посібник. 2022. URL:
https://chtyvo.org.ua/authors/Kurinnyi_Serhii/Rozrobka_veb-
saitiv_dlia_pochatkivtsiv_HTML_CSS_JavaScript/ (дата звернення:
22.04.2026).
38. Каплун В. А. Основи web-програмування : навчальний посібник.
Вінниця : ВНТУ, 2023. 128 с. URL:
https://pdf.lib.vntu.edu.ua/books/2023/Kaplun_2023_128.pdf (дата
звернення: 22.04.2026).
39. Босько В. В. Web-програмування : навчальний посібник. Кропивницький
: ЦНТУ. URL: https://dspace.kntu.kr.ua/server/api/core/bitstreams/2bfb5a3c-
54d9-4283-89c1-5e190e8aa151/content (дата звернення: 22.04.2026).
40. Баран С. В. Основи web-програмування : навчальний посібник. URL:
https://www.kgemt.org.ua/pdf/about_colege/library_fund/osnovy_webprohra
muvannya_navch_posib__s_v_baran_lk3xezdvds.pdf (дата звернення:
22.04.2026).
41. Пасічник В. В., Пасічник О. В., Угрин Д. І. Веб-технології : підручник.
Львів : Магнолія, 2013. 335 с.
42. Романюк О. Н., Катєльніков Д. І., Косовець О. П. Веб-дизайн і
комп’ютерна графіка : навчальний посібник. Вінниця : ВНТУ, 2007. 142
с.
43. Самсонов В. В., Єрохін А. Л. Методи та засоби Інтернет-технологій :
навчальний посібник. Харків : СМІТ, 2008. 264 с.
44. Мосіюк О. О. Web-технології : навчально-методичний посібник.
Житомир : Вид-во ЖДУ ім. І. Франка, 2020. URL:
https://eprints.zu.edu.ua/32361/1/Web_ost.pdf (дата звернення:
22.04.2026).
Арк.
ЧДТУ 262223.24 ПЗ
79
Змн. Арк. № Документа Підпис Дата
ДОДАТОК А
ЗАТВЕРДЖУЮ
Зав. кафедри ІТП
_________________ Прокопенко Т.О.
«____» ________________ 2026 р.
«САЙТ ОНЛАЙН — КУРСІВ З ПРОГРАМУВАННЯ, РЕАЛІЗОВАНИЙ ЗА
ДОПОМОГОЮ ФРЕЙМВОРКУ REACT»
Специфікація
482 ЧДТУ 262223 – 01
Аркушів 2
Н
Розробник ________________ Даніл ЧЕРНЕНКО
Керівник ________________ Ольга ЛАВДАНСЬКА
Н. контроль ________________ Ольга ЛАВДАНСЬКА
2026
Позначення Найменування Примітка
Документація
482 ЧДТУ 262223-01 12 01 Код сайту
ДОДАТОК Б
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ
«САЙТ ОНЛАЙН — КУРСІВ З ПРОГРАМУВАННЯ, РЕАЛІЗОВАНИЙ ЗА
ДОПОМОГОЮ ФРЕЙМВОРКУ REACT»
ТЕКСТ ПРОГРАМИ
482 ЧДТУ 262223 – 01 12 01
Аркушів 7
Розробник ________________ Даніл ЧЕРНЕНКО
Н
Черкаси, 2026
2
482 ЧДТУ 262223 – 01 12 01
import { Link } from 'react-router';
import { ArrowRight, Zap, Users, Trophy, Star, CheckCircle2 } from 'lucide-react';
import { Button } from '../components/ui/button';
import { Card, CardContent } from '../components/ui/card';
import { useAdmin } from '../../context/AdminContext';
export default function HomePage() {
const { courses } = useAdmin();
const popularCourses = courses.slice(0, 3);
return (
<div className="min-h-screen">
{/* Hero Section */}
<section className="relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-transparent to-
blue-900/20" />
<div className="absolute inset-0 bg-
[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJo
dHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQ
iIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZ
SI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0i
cmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPj
wvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2d
yaWQpIi8+PC9zdmc+')] opacity-40" />
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
<div className="text-center max-w-3xl mx-auto">
<div className="inline-flex items-center gap-2 bg-purple-500/10 border border-purple-
500/20 rounded-full px-4 py-2 mb-8">
<Zap className="w-4 h-4 text-purple-400" />
<span className="text-sm text-purple-300">Найкраща платформа 2026 року</span>
</div>
<h1 className="text-5xl sm:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-
purple-200 to-blue-200 bg-clip-text text-transparent">
Навчайся програмуванню з DevMaster
</h1>
<p className="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
Сучасні курси від практиків. Від основ до professional рівня.
Почни свою карʼєру в IT вже сьогодні.
</p>
<div className="flex gap-4 justify-center flex-wrap">
<Link to="/courses">
<Button size="lg" className="bg-gradient-to-r from-purple-600 to-blue-600
hover:from-purple-700 hover:to-blue-700 text-lg px-8">
Почати навчання
<ArrowRight className="ml-2 w-5 h-5" />
3
482 ЧДТУ 262223 – 01 12 01
</Button>
</Link>
<Button size="lg" variant="outline" className="border-gray-700 hover:bg-gray-800
text-lg px-8">
Переглянути курси
</Button>
</div>
<div className="flex justify-center gap-12 mt-16 text-sm">
<div className="text-center">
<div className="text-3xl font-bold text-purple-400">10K+</div>
<div className="text-gray-400 mt-1">Студентів</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-blue-400">50+</div>
<div className="text-gray-400 mt-1">Курсів</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-green-400">4.8★</div>
<div className="text-gray-400 mt-1">Рейтинг</div>
</div>
</div>
</div>
</div>
</section>
{/* Popular Courses */}
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
<div className="flex justify-between items-end mb-12">
<div>
<h2 className="text-3xl font-bold mb-2">Популярні курси</h2>
<p className="text-gray-400">Найбільш затребувані програми навчання</p>
</div>
<Link to="/courses">
<Button variant="ghost" className="text-purple-400 hover:text-purple-300">
Усі курси
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</Link>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{popularCourses.map((course) => (
<Link key={course.id} to={`/courses/${course.id}`}>
<Card className="bg-[#14141a] border-gray-800 hover:border-purple-500/50
transition-all group overflow-hidden">
<div className="relative h-48 overflow-hidden">
<img
src={course.image}
4
482 ЧДТУ 262223 – 01 12 01
alt={course.title}
className="w-full h-full object-cover group-hover:scale-110 transition-transform
duration-300"
/>
<div className="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-
full text-sm">
{course.level}
</div>
</div>
<CardContent className="p-6">
<div className="flex items-center gap-2 text-sm text-gray-400 mb-2">
<span className="bg-blue-500/10 text-blue-400 px-2 py-1 rounded">
{course.technology}
</span>
<span>•</span>
<span>{course.duration}</span>
</div>
<h3 className="font-semibold mb-2 group-hover:text-purple-400 transition-
colors">
{course.title}
</h3>
<p className="text-sm text-gray-400 line-clamp-2 mb-4">
{course.description}
</p>
<div className="flex justify-between items-center">
<div className="flex items-center gap-4 text-sm text-gray-400">
<div className="flex items-center gap-1">
<Star className="w-4 h-4 text-yellow-500 fill-yellow-500" />
<span>{course.rating}</span>
</div>
<div className="flex items-center gap-1">
<Users className="w-4 h-4" />
<span>{course.students}</span>
</div>
</div>
<div className="text-lg font-semibold text-purple-400">
{course.price} ₴
</div>
</div>
</CardContent>
</Card>
</Link>
))}
</div>
</section>
{/* Benefits */}
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
<div className="text-center mb-12">
5
482 ЧДТУ 262223 – 01 12 01
<h2 className="text-3xl font-bold mb-2">Чому DevMaster?</h2>
<p className="text-gray-400">Переваги нашої платформи</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<Card className="bg-gradient-to-br from-purple-500/10 to-transparent border-purple-
500/20">
<CardContent className="p-8 text-center">
<div className="w-16 h-16 bg-purple-500/20 rounded-2xl flex items-center justify-
center mx-auto mb-4">
<Zap className="w-8 h-8 text-purple-400" />
</div>
<h3 className="text-xl font-semibold mb-2">Швидке навчання</h3>
<p className="text-gray-400">
Сконцентровані курси без зайвої теорії. Тільки практика і реальні проєкти.
</p>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-blue-500/10 to-transparent border-blue-
500/20">
<CardContent className="p-8 text-center">
<div className="w-16 h-16 bg-blue-500/20 rounded-2xl flex items-center justify-
center mx-auto mb-4">
<Users className="w-8 h-8 text-blue-400" />
</div>
<h3 className="text-xl font-semibold mb-2">Спільнота</h3>
<p className="text-gray-400">
10000+ активних студентів. Обговорення, допомога, нетворкінг.
</p>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-green-500/10 to-transparent border-green-
500/20">
<CardContent className="p-8 text-center">
<div className="w-16 h-16 bg-green-500/20 rounded-2xl flex items-center justify-
center mx-auto mb-4">
<Trophy className="w-8 h-8 text-green-400" />
</div>
<h3 className="text-xl font-semibold mb-2">Сертифікат</h3>
<p className="text-gray-400">
Офіційний сертифікат після завершення. Визнається роботодавцями.
</p>
</CardContent>
</Card>
</div>
</section>
6
482 ЧДТУ 262223 – 01 12 01
{/* Competitors Comparison */}
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
<div className="text-center mb-12">
<h2 className="text-3xl font-bold mb-2">Порівняння з конкурентами</h2>
<p className="text-gray-400">Чому ми кращі за інші платформи</p>
</div>
<div className="bg-[#14141a] border border-gray-800 rounded-xl overflow-hidden">
<table className="w-full">
<thead>
<tr className="border-b border-gray-800">
<th className="text-left p-6 font-semibold">Функція</th>
<th className="text-center p-6 font-semibold bg-purple-500/5">
<div className="flex items-center justify-center gap-2">
DevMaster
<CheckCircle2 className="w-5 h-5 text-green-400" />
</div>
</th>
<th className="text-center p-6 text-gray-400">Udemy</th>
<th className="text-center p-6 text-gray-400">Coursera</th>
<th className="text-center p-6 text-gray-400">Stepik</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-gray-800">
<td className="p-6 text-gray-300">Українська мова</td>
<td className="p-6 text-center bg-purple-500/5">
<CheckCircle2 className="w-5 h-5 text-green-400 mx-auto" />
</td>
<td className="p-6 text-center text-gray-500">—</td>
<td className="p-6 text-center text-gray-500">—</td>
<td className="p-6 text-center">
<CheckCircle2 className="w-5 h-5 text-green-400 mx-auto" />
</td>
</tr>
<tr className="border-b border-gray-800">
<td className="p-6 text-gray-300">Практичні проєкти</td>
<td className="p-6 text-center bg-purple-500/5">
<CheckCircle2 className="w-5 h-5 text-green-400 mx-auto" />
</td>
<td className="p-6 text-center">
<CheckCircle2 className="w-5 h-5 text-green-400 mx-auto" />
</td>
<td className="p-6 text-center">
<CheckCircle2 className="w-5 h-5 text-green-400 mx-auto" />
</td>
<td className="p-6 text-center text-gray-500">—</td>
</tr>
<tr className="border-b border-gray-800">
7
482 ЧДТУ 262223 – 01 12 01
<td className="p-6 text-gray-300">Мінімалістичний UI</td>
<td className="p-6 text-center bg-purple-500/5">
<CheckCircle2 className="w-5 h-5 text-green-400 mx-auto" />
</td>
<td className="p-6 text-center text-gray-500">—</td>
<td className="p-6 text-center text-gray-500">—</td>
<td className="p-6 text-center text-gray-500">—</td>
</tr>
<tr className="border-b border-gray-800">
<td className="p-6 text-gray-300">Швидкість платформи</td>
<td className="p-6 text-center bg-purple-500/5 text-green-400 font-
semibold">Відмінно</td>
<td className="p-6 text-center text-gray-400">Добре</td>
<td className="p-6 text-center text-gray-400">Середньо</td>
<td className="p-6 text-center text-gray-400">Добре</td>
</tr>
<tr>
<td className="p-6 text-gray-300">Ціна</td>
<td className="p-6 text-center bg-purple-500/5 text-green-400 font-
semibold">1499₴</td>
<td className="p-6 text-center text-gray-400">$89</td>
<td className="p-6 text-center text-gray-400">$49/міс</td>
<td className="p-6 text-center text-gray-400">Безкоштовно</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
);
}