L11. План особистого сайту

Підготуємо текст і завдання для першої сторінки; орієнтовний час — 25 хвилин. Потрібні розмова з ШІ в браузері та файл Documents\AI-practice\about-me.txt. Якщо його немає, створіть файл із навчальними даними Олени за кроками уроку 4.

Олена любить книги, прогулянки й порядок удома. Вона хоче показати три навчальні роботи: особистий сайт, застосунок «Мій день» і майбутнє відео про порядок на столі. Для цього достатньо однієї сторінки. Меню зверху переводитиме читача до потрібного розділу тієї самої сторінки.

На занятті

Викладач порівняє нечітке прохання з брифом Олени. Разом виберемо відомості для публічної сторінки й сформулюємо чотири ознаки, за якими перевірятимемо готовий сайт.

Від задуму до завдання

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

[[VIS:b5_site_brief]]

• У Провіднику відкрийте Документи → AI-practice. Створіть папку personal-site. У ній зберігатимемо лише матеріали сайту, щоб не плутати їх із майбутнім застосунком.
• Відкрийте about-me.txt. Знайдіть ім’я та інтереси Олени: саме їх використаємо в навчальній сторінці. Адресу проживання й особисті документи не додавайте.
• У новій розмові ChatGPT, Claude або Gemini вставте наведений запит. Для основного навчального прикладу залиште ім’я та інтереси Олени: їх використовують і наступні уроки. Власний варіант підготуєте в окремій домашній копії. Натисніть кнопку надсилання.

> [PROMPT]

> Допоможи спланувати односторінковий особистий сайт українською. Авторка — Олена; інтереси — книги, прогулянки, порядок удома. Розділи: «Про мене», «Проєкти», «Контакт». Проєкти: особистий сайт, «Мій день» із трьома справами, відео на 30–45 секунд про порядок на столі. Не подавай заплановані роботи як завершені. Напиши вступ до 40 слів, по одному реченню про кожний проєкт і перелік із чотирьох перевірок. Поки що не пиши код. Не вигадуй досвіду, нагород або клієнтів.

• Прочитайте відповідь як майбутній відвідувач. Чи зрозуміло, хто авторка й що вона робить? Замість «реалізую інноваційні рішення» залиште конкретне «вчуся створювати сайт і список справ». Виправте неточності безпосередньо в тексті.
• Відкрийте Блокнот. Скопіюйте погоджений текст і збережіть як Documents\AI-practice\personal-site\brief.txt. Нижче допишіть: «Сторінка відкривається локально; містить три проєкти; меню переходить до розділів; на вузькому екрані немає горизонтального прокручування».

Очікуваний вступ: «Люблю книги, прогулянки й порядок удома. Вчуся перетворювати невеликі задуми на готові речі». Наступного уроку цей вступ стане частиною сторінки. Звірте запропонований ШІ текст із брифом.

Що ми будемо створювати

Сторінка матиме два файли в папці personal-site. У index.html розмітка HTML позначатиме заголовки, абзаци й посилання. У styles.css правила CSS визначатимуть їхні кольори, відступи й розміри літер.

У контактному розділі навчального прикладу буде [email protected]. Це умовна адреса для пояснення, а не поштова скринька Олени. Пізніше ви заміните її власною публічною адресою або приберете посилання. Форма надсилання повідомлень цьому сайту поки не потрібна.

> [FIX]

> ШІ пропонує магазин, реєстрацію й десять сторінок? Відповідайте: «Повернися до брифу: одна сторінка, три розділи, без облікових записів і продажів. Дай лише виправлений текст».

Практика вдома

• У Блокноті відкрийте brief.txt і через Зберегти як створіть поруч brief-home.txt. Основний бриф залиште для наступного уроку.
• У копії замініть один інтерес власним і перепишіть вступ до 40 слів самостійно або з ШІ. Не додавайте вигаданого досвіду.
• Збережіть копію. Під вступом запишіть одну перевірку змісту й одну перевірку роботи меню. Результат придатний, якщо інтерес змінився, три проєкти залишилися, а обидві перевірки можна виконати.

Самотест

• Який файл має залишитися після планування, якщо код ще не створювали?
• Чого бракує завданню «Зроби гарний сайт»?
• ШІ написав, що Олена вже має п’ять років досвіду, хоча цього немає в брифі. Що треба змінити перед збереженням?

Терміни

• Бриф — коротке завдання зі змістом і вимогами до результату.
• HTML — розмітка заголовків, абзаців, посилань та інших частин сторінки.
• CSS — правила вигляду сторінки.