Домашка.
Оформи свою страницу

Дедлайн: 17 июля, 23:59 МСК

Ожидает проверки

Что сделаешь

Возьмёшь свою страницу index.html и оформишь её через CSS: фон, шрифт, цвета, отступы, кнопки с откликом на наведение.

Правила пишешь в теге <style> — сам или с ИИ. Значения подбираешь под свой проект: находишь правило по селектору и меняешь, как в лонгриде.

Шаги

1 Открой свой index.html в редакторе

Тот же файл, что и раньше. Удобнее в VS Code: правый клик по index.html → «Открыть с помощью».

2 Найди или добавь тег <style>

Стили живут внутри <head>, в теге <style>. Если его ещё нет — добавь:

<head>
  ...
  <style>
    /* сюда пишем правила */
  </style>
</head>

Если <style> уже есть (например, его написал ИИ) — работай в нём, второй не нужен.

3 Задай базу страницы

Правило для body задаёт вид всей страницы: фон, цвет текста, шрифт. Значения впиши свои:

body {
  background: #F9F8F4;
  color: #181818;
  font-family: Arial, sans-serif;
}

background — цвет фона страницы;
color — цвет текста (наследуется всеми элементами);
font-family — шрифт: сначала конкретный, после запятой — семейство на замену.

4 Оформи заголовок и кнопки

Найди селекторы своих элементов (тег, класс или id — подсмотри в HTML) и задай им стиль. Например:

h1 {
  font-size: 32px;
}

button {
  background: #CE7C9F;
  color: #FFFFFF;
  border: 1px solid #CE7C9F;
  padding: 10px 18px;
}

button:hover {
  background: #181818;
}

если у кнопок в HTML задан класс — селектор пиши с точкой: .btn, .btn:hover;
:hover — стиль при наведении: кнопка отвечает на курсор.

Значения цветов и размеров — свои. Держи палитру короткой: 2–3 цвета на страницу.

5 Разведи отступы

Пройдись по странице: где блоки слиплись — добавь margin, где тексту тесно внутри рамки — padding. Строки слиплись — увеличь line-height.

6 Сохрани и проверь

Ctrl+S, затем открой index.html в браузере (или обнови страницу — F5). Стили должны примениться: фон, шрифт, кнопки с откликом на наведение.

По желанию (если зашло)

Потренируй главный навык: попроси нейросеть — и проверь руками, что она поменяла в CSS.

Скругления. Попроси: «скругли углы кнопок и карточек» — проверь, что появился border-radius.
Плавный отклик. Попроси: «сделай, чтобы кнопка меняла цвет плавно» — проверь transition в правиле кнопки.
Свой шрифт. Попроси: «подключи шрифт из Google Fonts, например Montserrat» — проверь, что появились оба: <link> в <head> (скачивает шрифт) и font-family в CSS (применяет его). Без первого браузер шрифта не знает, без второго — не использует.

Проверь себя

Открой страницу в браузере и отметь пункты.

В <head> есть тег <style> с твоими правилами.

У body заданы фон, цвет текста и шрифт.

Заголовок оформлен (размер или цвет).

Кнопки оформлены и откликаются на наведение (:hover).

Отступы разведены: блоки не слипаются, тексту не тесно.

Палитра короткая: 2–3 цвета.

Страница открывается, стили применились.

Если что-то пошло не так

Стиль не применился — проверь селектор: в HTML класс без точки (class="btn"), в CSS с точкой (.btn). Имена должны совпадать буква в букву.
Всё, что ниже какой-то строки, разом отвалилось — там потеряна точка с запятой ; или закрывающая скобка }.
Цвет не тот, что в твоём правиле — ниже по коду есть второе правило с тем же селектором: более поздняя инструкция отменяет более раннюю. Найди его.
Кнопка не откликается на наведение — :hover пишется слитно с селектором: button:hover, без пробела.

Как сдать

Дедлайн: 17 июля, 23:59 МСК.

Отправь обновлённый файл index.html в папку «Домашки» в Telegram.

Куратор проверит и поставит статус «Проверено» — на странице он обновится сам.

Сдать в папку «Домашки» →