AI Developer · Урок 5 · Первый сайт · Codex
⚡ 0 XP
💻 AI Developer · Урок 5

Первый
сайт

Создаём живую страницу с нуля
через Codex + Skill AI TREND

🛠 Codex · OpenAI
✦ Skill AI Trend
🌐 HTML · CSS · JS
No Code
stage-light.html
Запись открыта
Театральный клуб
Приходи на первое занятие — бесплатно.
Новый набор уже открыт.
Записаться →
О клубеНаша история
Выступление15 марта
Контакты+7 777...
↓
📅 1990 год

Первый сайт в истории

Его создал учёный Тим Бернерс-Ли в Европейском центре ядерных исследований

📄

1990 год

Никаких картинок. Никакого дизайна. Просто ссылки и текст — как текстовый документ. Но именно с этого всё и началось.

🌐

Сегодня

Около 2 миллиардов сайтов. От корпораций до маленьких кафе. И каждый когда-то тоже был первой версией.

🎯 Твой сайт сегодня — это твоя первая версия в этой длинной истории.
Не через конструктор с шаблонами, а через ИИ как соавтор.

↓
⚡ Теория · 3 мин

Из чего состоит сайт

Все сайты без исключения состоят из трёх слоёв. Codex пишет все три за тебя.

HTML — структура и скелет страницы
<h1>Заголовок</h1> <p>Текст</p> <button>Кнопка</button>
↳ Без него страница не существует
CSS — внешность: цвета, шрифты, размеры
color: #E8A838; font-size: 2rem; padding: 1rem;
↳ Без него сайт выглядит как блокнот
JavaScript — жизнь и движение
button.addEventListener('click', () => {'{'} ... {'}'})
↳ Без него сайт — просто красивая картинка

💡 JS — один из самых популярных языков в мире. Его используют в Google, Netflix, Airbnb. С сегодняшнего дня ты тоже работаешь с ним.

↓
🔍 Один HTML-файл

Три слоя в одном файле

Codex часто сохраняет всё в один .html файл. Найти слои внутри очень просто — по тегам.

<!-- Структура HTML -->
<h1>Stage Light</h1>
<p>Театральный клуб</p>

<style>
h1 {'{'} color: #E8A838; font-size: 3rem; {'}'}
</style>

<script>
document.querySelector('button').onclick = () => alert('!');
</script>

HTML

<h1><p><div>

Основной текст страницы

CSS

<style>...</style>

Стили и оформление

JS

<script>...</script>

Логика и действия

↓
🧠 Квиз · +200 XP

Проверь понимание

Кнопка на сайте меняет цвет при наведении — за что это отвечает?

A
HTML — он отвечает за все действия на странице
B
CSS — он задаёт стили, включая состояние :hover
C
JavaScript — только он может менять внешний вид
D
Это делает браузер автоматически без кода
↓
💡 Шаг 1 · Идея

Сначала проблема

Настоящие создатели продуктов думают: сначала проблема — потом решение. Так думаем и мы.

📚

Школьный проект

Исследование, отчёт, выступление

💼

Портфолио

Твои проекты и навыки

⚽

Спортивная команда

Состав, расписание, матчи

🎭

Клуб / хобби

Театр, музыка, рисование

🎭

Пример из урока: Stage Light

Брат не мог набрать учеников в театральный клуб — люди просто не знали что он существует. Проблема → сайт как решение.

↓
🛠 Инструмент

Что такое Codex

Профессиональный инструмент от OpenAI. Используют разработчики по всему миру — от стартапов до компаний Кремниевой долины

💬

Чат с ИИ

Описываешь что хочешь — получаешь готовый код

✦

Skills (навыки)

Специально настроенные помощники. Для нас — AI TREND LESSON 5

📁

Папки проектов

Все файлы хранятся в проекте — ничего не теряется

📌 Перед стартом: посмотри дополнительное видео под уроком — там инструкция как установить Codex и подключить параметр Skills

↓
🖥 Интерфейс

Разбираем Codex

◀

Левая панель

Зона навигации: новая беседа, проекты, разделы

⬛

Центр — рабочая область

Здесь открывается чат, видишь ответы, здесь работаешь

📁

Создай папку проекта

Иконка папки + плюсик → Add new project → «Проект Сайта»

C
Codex
✦ AI TREND LESSON 5
✦ Skill AI TREND LESSON 5 активирован
Привет! Я помогу тебе создать сайт по правильной структуре. Опиши свою идею — с чего начнём?
Поле ввода светится фиолетовым — skill активен
↓
✦ Шаг 2 · Skill

Что такое Skill?

Специально настроенный помощник — знает структуру урока и ведёт тебя шаг за шагом

1

Открой «Навыки и приложения»

Вкладка в верхней части боковой панели

2

Найди AI TREND LESSON 5

Прокрути список вниз до нужного skill

3

Нажми «Попробовать»

Поле ввода начнёт светиться фиолетовым — skill активирован

⚠️

Важно: сильный запрос — сильный результат

Skill — это не волшебник, который читает мысли. Чем точнее ты описываешь идею, тем лучше результат. У тебя есть настоящее влияние на итог.

↓
📝 Шаг 3 · Промпт

Первый запрос

Нужно написать короткое но точное техническое задание. Не «Сделай мне сайт» — а конкретно.

❌ Плохой запрос

«Сделай мне сайт»

ИИ не знает о чём, для кого, какие блоки, какой стиль → случайный результат

Хочу создать сайт для школьного театрального клуба.
Нужны блоки: главный экран, о клубе, ближайшее выступление, кнопка записи нажми чтобы скопировать
🎯

Тема

О чём сайт

📋

Структура

Какие блоки нужны

🎨

Стиль

Настроение и цвета

↓
🎬 Codex собирает сайт

Смотрим как ИИ
строит страницу

Ты видишь весь процесс изнутри — как работает профессиональный разработчик в реальном времени

❓ Шаг 4 · Вопросы

Skill задаёт вопросы

Это не ошибка — инструмент хочет понять тебя точнее прежде чем начать

C
AI TREND LESSON 5
Отлично! Чтобы собрать хороший вариант, ответь кратко:

1. Как называется клуб?
2. Для кого сайт (школьники / родители / все)?
3. Нужны ли контакты или фото?
4. Настроение: тёплое, творческое, торжественное?
5. Цвета?
6. Нужна версия для телефона?
7. Одностраничный сайт с блоками сверху вниз?
1 — Stage Light. 2 — для всех. 3 — да, контакты. 4 — творческое. 5 — тёплые. 6 — да. 7 — да.
👔

Аналогия: заказ костюма

Если мастеру просто сказать «сшей одежду» — получишь что угодно. Если уточнить размер, цвет, стиль, повод — костюм сядет идеально. Так же с Codex.

↓
📋 Шаг 5 · План

Skill предлагает план

Внимательно прочти. Все ли ключевые пункты учтены? Ты — автор проекта, ты принимаешь решения.

C
AI TREND LESSON 5 · Plan
📋 Вот план твоего сайта Stage Light:
Структура:
• Главный экран со слоганом и кнопкой записи
• Блок «О клубе»
• Блок «Ближайшее выступление»
• Контакты
• Кнопка записи внизу

Стиль: тёплая палитра · кремовый · золотистый · терракотовый
Адаптивный: работает на телефоне
Да, всё отлично! Строй.

💡 Не соглашайся автоматически. Проверь: все ли твои пункты учтены? Нет ли лишнего? Если что-то не так — попроси изменить.

↓
⚙️ Шаг 6 · Сборка

Codex строит сайт

После «Да» — Codex начинает работу. Это называется прозрачность — ты видишь каждый шаг изнутри

📁

Создаёт файл index.html

Основной файл сайта — именно его откроет браузер

🏗

Пишет HTML-структуру

Заголовки, абзацы, блоки, кнопки — скелет страницы

🎨

Добавляет CSS-стили

Тёплые цвета, шрифты, отступы — всё оформление

✅

Файл готов — index.html

«Сайт готов. Файл находится здесь: index.html» — именно такое сообщение появится

↓
🌐 Шаг 7 · Браузер

Открываем в браузере

Нажимаем иконку папки → находим index.html → открываем. Сайт живой прямо сейчас.

📁 Проект Сайта / index.html
О клубе Контакты
Театральный клуб
Приходи на первое занятие — бесплатно.
Новый набор уже открыт в этом году.
Записаться →
О клубеОснован в 2019
Выступление15 марта · 18:00
Контактыstage@school.kz

🎉 Идея превратилась в реальную страницу. Это и есть главный момент урока.

↓
🟢 Задание 1 · Базовый · +150 XP

Создай первую версию

⏸ Поставь видео на паузу и пройди весь путь самостоятельно

1

Создай папку «Проект Сайта» в Codex

Иконка папки с плюсиком → Add new project → назови

2

Подключи Skill AI TREND LESSON 5

Навыки и приложения → AI TREND LESSON 5 → Попробовать → видишь фиолетовое свечение

3

Напиши первый запрос

Тема + структура (блоки) + стиль. Ответь на уточняющие вопросы.

4

Проверь план → подтверди

Убедись что все твои пункты учтены. Если всё ок — пиши «Да»

5

Открой index.html в браузере

Иконка папки → index.html → двойной клик. Сайт должен открыться!

✅ Сайт открылся в браузере → нажми для +150 XP

↓
🧠 Квиз · +200 XP

Почему важен сильный промпт?

Ученик написал «Сделай мне сайт». Что, скорее всего, он получит?

A
Идеальный сайт — ИИ сам догадается что нужно
B
Случайный результат — ИИ не знает тему, структуру и стиль
C
Сообщение об ошибке — запрос слишком короткий
D
Список уточняющих вопросов по стандартному шаблону
↓
🔍 Чек-лист разработчика

Пройдись по 4 пунктам

Смотри на сайт как пользователь который открывает его впервые

1️⃣

Сайт открылся в браузере

Результат урока — не файлы в папке, а открывающаяся страница. Если не открылся — работа ещё не доведена до конца.

2️⃣

Тема читается с первого взгляда

Человек открывает и сразу понимает о чём сайт — не через догадки, не после долгого чтения.

3️⃣

Структура видна

Видны блоки, разделы, общая логика. Из понятной основы улучшать намного легче чем из хаоса.

4️⃣

Ты уже видишь что улучшить

Это хороший признак: значит, сайт получился живым. Твой сайт — теперь твоя визитка. Улучшай с каждой версией.

↓
🟡 Задание 2 · Средний · +150 XP

Первое улучшение

Выбери одну вещь которую хочешь улучшить и попроси Codex сделать её

Шаг 1 · Найди что улучшить (2 мин)

Открой сайт и запиши конкретно 3 вещи которые хочешь изменить: изменить заголовок, добавить блок, сделать текст понятнее. Не абстрактно — конкретно.

Измени заголовок главного экрана на [ТВОЙ ТЕКСТ].
Также добавь [ЧТО ХОЧЕШЬ ДОБАВИТЬ]. нажми чтобы скопировать шаблон

Шаг 3 · Сравни версии

Открой обе версии рядом. Что стало лучше? Ты уже работаешь как итератор — человек который улучшает продукт шаг за шагом.

✅ Улучшение сделано, сравнил версии → +150 XP

↓
⚠️ Частые ошибки

4 ловушки новичка

Если что-то не работает — сначала проверь здесь

❌ Слишком общий запрос

«Сделай мне сайт» — нет темы, структуры, стиля. ИИ не понимает с чего начать.

✅ Добавь тему + список блоков + стиль в первый запрос

❌ Открывают не тот файл

Ищут файл в загрузках или на рабочем столе — а он лежит внутри папки проекта.

✅ index.html находится в папке «Проект Сайта» которую ты создал

❌ Ждут идеального результата

«С первого раза должно быть идеально» — но первая версия всегда черновая.

✅ Даже Леонардо да Винчи начинал с набросков. Черновик — это норма

❌ Skill не подключён

Отправляют запрос без активного skill — Codex работает не по той логике урока.

✅ Поле ввода должно светиться фиолетовым — это знак что skill активен
↓
🧠 Квиз · +200 XP

Для чего папка проекта?

Зачем вообще создавать отдельную папку перед началом работы?

A
Это обязательное требование Codex — без папки не запустится
B
Чтобы файлы не занимали место на диске
C
Все файлы сайта лежат в одном месте — не теряются, удобно искать и обновлять
D
Так выглядит профессиональнее перед заказчиком
↓
🎨
✍️ Философия создателя

📚 Леонардо да Винчи — один из гениальнейших людей в истории — не начинал с шедевра. Его рабочие тетради полны набросков: зачёркнутые линии, варианты которые он переделывал снова и снова.

Он не ждал вдохновения. Он рисовал черновик → улучшал → улучшал снова. Вот как рождаются шедевры.

❌

Ждёт идеала

«Пока не готов — не публикую»

✅

Итерирует

Выпускает v1 → улучшает → v2 → лучше

🎯

Твой сайт

Это твой набросок. Твоя точка отсчёта.

↓
🧠 Квиз · +200 XP

Что такое итерация?

Первая версия сайта не понравилась. Что делает опытный разработчик?

A
Удаляет всё и начинает заново с нуля
B
Переходит на другой инструмент — Codex плохо работает
C
Сохраняет что работает, уточняет запрос и улучшает шаг за шагом
D
Показывает заказчику как есть — первая версия всегда финальная
↓
🔴 Задание 3 · Продвинутый · +150 XP

Три улучшения + финальный тест

Пройди по чеклисту дважды — до и после. Почувствуй разницу между версиями.

Выбери 3 конкретных улучшения:

📝 Изменить заголовок
➕ Добавить новый блок
🎨 Поменять цвета
📱 Улучшить мобильный вид
1️⃣ Делаешь 3 промпта
2️⃣ Открываешь финальную версию
3️⃣ Пройди чеклист снова

✅ Три улучшения сделаны, чеклист пройден → +150 XP

↓
🧘 Рефлексия

3 честных вопроса

Если ты ответил на все три — ты не просто прошёл урок, ты осмыслил его

✅

Что получилось лучше всего?

Конкретно — не «всё хорошо», а что именно выглядит профессионально

🤔

Что было самым сложным?

Ошибка — это не «я не умею». Ошибка показывает какой шаг ты пропустил

🚀

Что хочешь улучшить дальше?

Твой сайт — живой документ. Каждое улучшение делает тебя опытнее

↓
📝 Домашнее задание

Три уровня — выбираешь сам

🟢 БАЗОВЫЙ · Аналитик

Найди 3 конкретных улучшения

Открой сайт и найди три вещи которые хочешь улучшить — конкретно: изменить заголовок, добавить блок, сделать текст понятнее. Зафиксируй эти три пункта — это уже работа аналитика.

#AITrend
🟡 СРЕДНИЙ · Итератор

Сделай одно улучшение

Выбери одно из трёх и попроси Codex его сделать. Сохрани результат, сравни с первой версией — стало ли лучше? Ты уже работаешь как итератор.

#AITrend
🔴 ПРОДВИНУТЫЙ · Продакт

Все три улучшения + финальный тест

Сделай все три улучшения, открой финальную версию в браузере и пройди чеклист снова. Если разница ощутима — ты уже работаешь как настоящий продакт-менеджер.

#AITrend
↓
✅ Чеклист урока · +100 XP

Всё ли ты сделал?

📁Создал папку «Проект Сайта» в Codex
✦Подключил Skill AI TREND LESSON 5 (видел фиолетовое свечение)
📝Написал первый запрос с темой + блоками + стилем
❓Ответил на уточняющие вопросы skill конкретно и коротко
📋Проверил план и подтвердил (или попросил изменить)
🌐Открыл index.html в браузере — сайт открылся!
🔍Прошёлся по чеклисту разработчика (4 пункта)
💬Поделился результатом в чате с хештегом #AITrend
↓
🌐
🏆 Урок 5 завершён

💡 «Главный секрет: работа с ИИ — это всегда увлекательное исследование. Если что-то с первого раза получилось не так — это сигнал скорректировать запрос. Круче всех тот, кто обожает экспериментировать.»

📍
← ВЫ ЗДЕСЬ

Урок 5 — Первый сайт через Codex

HTML · CSS · JS · Skill · index.html открылся в браузере

🔜
СЛЕДУЮЩИЙ

Урок 6 — Улучшаем сайт

Говорим с ИИ на языке правок · Делаем удобнее и красивее