Вот и финиш уровня 9. Ты узнал, из каких файлов состоит сайт, что такое сервер и чем статика отличается от динамики. Пора собрать всё в один маленький, но настоящий результат — свою страницу-визитку. И сделаем мы это вместе с Claude.
Опиши страницу словами
Тебе не нужно писать HTML и CSS вручную. Главный навык здесь — понятно объяснить, что ты хочешь. Claude знает, как устроены файлы сайта, а ты теперь знаешь, из чего они состоят, — этого достаточно.
Попробуй такой запрос:
Собери простую страницу-визитку: заголовок с моим именем,
пара строк о себе и одна кнопка «Связаться».
Сделай аккуратный вид: приятный цвет фона и крупный заголовок.
Дай файлы index.html и style.css.
В ответ Claude соберёт два знакомых тебе файла:
- index.html — структура: заголовок с именем, абзац о себе, кнопка. Это то, что написано на странице.
- style.css — внешний вид: цвет фона, размер заголовка, отступы. Это то, как страница выглядит.
Оба файла лягут в одну папку — ровно так, как мы разбирали в начале уровня. HTML задаёт скелет, CSS наводит красоту, и вместе они дают готовую страницу.
Как всё связано
Давай ещё раз соберём картину целиком, теперь она у тебя в голове должна щёлкнуть:
- HTML (
index.html) — структура и текст. Скелет страницы. - CSS (
style.css) — оформление. Делает скелет красивым. - Файлы в папке — всё это просто лежит рядом, как любые другие файлы, с которыми ты работал с первого уровня.
Браузер открывает index.html, видит подключённый style.css и показывает тебе готовую страницу. Никакой магии — только знакомые кирпичики.
Хочешь что-то поменять? Просто скажи Claude: «сделай кнопку зелёной» или «добавь ещё один абзац». Тебе не нужно помнить точные названия свойств CSS — достаточно описать результат словами.
Поздравляю
Ты прошёл целый уровень про то, как устроены сайты, и собрал свою первую страницу. Это уже не «терминал ради терминала» — это настоящий маленький проект, который можно показать.
Что дальше? Тебя ждёт JavaScript — тот самый script.js, который оживляет страницу. Не пугайся слова «программирование»: ты начнёшь с самого простого — кнопка, которая что-то делает по нажатию. И, как и здесь, ты сможешь опираться на Claude, описывая словами, что хочешь получить.
Попробуй
Задания в терминале нет — этот урок завершает уровень. Попробуй сам описать Claude страницу-визитку и посмотреть, что он соберёт. А потом закрепи пройденное на вопросах ниже.