Урок 14. Домашнее задание: Цвета и типографика

📁 Раздел: Основы CSS ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная
#color #background-color #rgb #hsl #font-family #font-size #font-weight #line-height #text-align #letter-spacing #max-width

⚡ Кратко

Соберите один законченный HTML/CSS-файл со статьёй: заголовки, абзацы, палитра из 3 цветов и стиль для цитаты. Откройте в браузере и проверьте читаемость.

Что сделать

  1. Оформите статью: h1, вводный абзац, два раздела h2 и список.
  2. Подберите палитру из фона, основного текста и одного акцентного цвета.
  3. Добавьте отдельный стиль для цитаты или важной заметки.
  4. Проверьте читаемость: контраст, длину строки, line-height.

Ваша палитра (пример)

Подберите три цвета и покажите их образцами — так проще оценить контраст ещё до вёрстки:

#f8fafc — фон
#1f2937 — текст
#b91c1c — акцент

Ориентир результата

Заголовок статьи

Вводный абзац задаёт тон. Текст контрастный, строки не длиннее 70ch.

Раздел

Содержимое раздела с акцентной ссылкой.

Важная заметка выделена рамкой и акцентным цветом.
<article>
  <h1>Заголовок статьи</h1>
  <p>Вводный абзац...</p>
  <h2>Раздел</h2>
  <p>Содержимое с <a href="#">ссылкой</a>.</p>
  <blockquote>Важная заметка</blockquote>
</article>

Подготовка окружения

  1. Создайте папку проекта и в ней файл index.html (можно вынести стили в style.css и подключить через <link>).
  2. Откройте папку в VS Code: File → Open Folder.
  3. Откройте index.html двойным щелчком в браузере или через расширение Live Server (правый клик → Open with Live Server).

Как проверить

  • Откройте DevTools (F12), выберите текст и убедитесь в достаточном контрасте (вкладка Styles → проверка контраста у color).
  • Сузьте окно — текст не должен растягиваться шире ~70ch, ссылка остаётся отличимой.

Критерии сдачи

  • Файлы открываются локально без ошибок пути.
  • Код отформатирован и читается без горизонтальной прокрутки в редакторе.
  • Видимый результат соответствует теме урока: контраст, иерархия, длина строки.
Связь с разделами: база типографики — в Теории, готовые блоки — в Примерах, разбор частых ошибок — в Ошибках.