✅ Решения заданий

⚡ Кратко

Каркас (header/main/footer) → внешний style.css через <link> → inline-стиль заменяем классом. Смысл — в HTML, вид — в CSS.

⚠️ Рекомендация: сначала попробуйте решить задания сами. Здесь показан понятный путь, а не единственно возможный вариант.

Решение задания 1 — каркас страницы

Сначала создаём правильный HTML-каркас, а потом наполняем страницу смысловыми элементами. Результат (со стилями браузера по умолчанию) выглядит так:

HTML & CSS

Это моя первая страница курса.

К оглавлению курса 
<!-- index.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Моя первая страница</title>
</head>
<body>
  <header>
    <h1>HTML &amp; CSS</h1>
  </header>
  <main>
    <p>Это моя первая страница курса.</p>
  </main>
  <footer>
    <a href="../../index.html">К оглавлению курса</a>
  </footer>
</body>
</html>

Решение задания 2 — первый внешний стиль

Стили выносим в отдельный файл, чтобы потом менять их централизованно. Та же разметка с подключённым CSS:

HTML & CSS

Это моя первая страница курса.

/* style.css */
body {
  font-family: system-ui, sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
}

h1 {
  color: #1f3b73;
}

Решение задания 3 — мини-рефакторинг

Inline-стиль заменяем классом, чтобы повторно использовать правило в других местах. Класс .hero можно навесить на любой блок:

Блок с классом .hero 
/* style.css */
.hero {
  background: #f5f8ff;
  border: 1px solid #c7d5ff;
  padding: 24px;
  border-radius: 12px;
}