Вайб-кодинг безкоштовно: три практичні проєкти

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

Як пройти практикум

1. Відкрийте демо, потім завантажте HTML-файл. Якщо браузер відкрив його замість завантаження, збережіть сторінку як HTML.
2. Збережіть незмінену копію. Робочу відкрийте подвійним кліком у браузері та окремо — в текстовому редакторі.
3. Передайте код обраному AI-помічнику разом із завданням нижче. Попросіть пояснити зміну.
4. Замініть код у робочій копії, збережіть і оновіть браузер. Перевірте результат на прикладах.

1. Калькулятор вартості роботи

Вводите години, ставку й додаткові витрати. Отримуєте арифметичну суму. Це навчальний кошторис, а не рекомендація ринкової ціни.

Відкрити калькулятор → · Завантажити HTML

Додай до цього калькулятора необов’язковий резерв у відсотках, від 0 до 100. Початкове значення — 0. Покажи базову суму, суму резерву й підсумок окремо. Не додавай бібліотеки й мережеві запити. Поясни змінені рядки та дай перевірки для порожнього, від’ємного й нульового значень.

Контроль: 4 години × 500 грн + 200 грн = 2200 грн. Після додавання резерву 10% підсумок має бути 2420 грн. Зміна ставки на 1000 без резерву дає 4200 грн. Порожнє поле та від’ємні числа не повинні давати вигаданий результат.

2. Портфоліо послуги

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

Відкрити портфоліо → · Завантажити HTML

Перероби цей навчальний шаблон під мою послугу: [опис]. Збережи одну сторінку без бібліотек. Не вигадуй клієнтів, відгуки чи результати. Замість відсутніх робіт залиш підпис «навчальний приклад». Контакт: [моє публічне посилання]. Перевір, щоб меню вело до потрібних блоків, а текст читався на вузькому екрані.

Контроль: перейдіть до робіт із меню, збільште текст у браузері, звузьте вікно. Після заміни контакту натисніть посилання та перевірте адресу. Не публікуйте особисті дані, які не хочете показувати всім.

3. Планувальник перейменування файлів

Вставте список назв, задайте префікс і отримайте нові назви зі збереженими розширеннями. Приклад лише складає план: він не читає диск і не перейменовує файли.

Відкрити планувальник → · Завантажити HTML

Додай до планувальника початковий номер від 1 до 9999. Збережи розширення, не змінюй файли на диску. Покажи помилку для порожнього списку й недозволеного префікса. Додай кнопку копіювання результату та зрозуміле повідомлення, якщо браузер заборонив копіювання.

Контроль: для cat.png і dog.jpg з префіксом project результат — project_001.png і project_002.jpg. Назва без розширення має залишитися без розширення. Два однакові вхідні імені отримують різні порядкові номери.

Ваші ручні відмітки: 0 із 3. Це самооцінка, не автоматична перевірка коду.

Що робити, коли зміна зламала приклад

Порівняйте з незміненою копією. Замість «нічого не працює» запишіть введені значення, очікуваний результат і те, що бачите. Наш помічник із помилок допоможе скласти такий запит.

Як перетворити вправу на доказ навички

Збережіть початковий код, свою версію та короткий опис: що змінили, як перевірили, які обмеження лишилися. Не видавайте навчальний шаблон за комерційний проєкт для клієнта. Про реальні вимоги читайте в матеріалі «Вайб-кодер: професія та навички».

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