🏠 Домашнее задание

⚡ Суть задания

Подготовьте рабочую папку для курса, создайте первый локальный HTML-файл, подключите CSS и проверьте, что страница открывается без сервера. Это базовый навык, который понадобится дальше на каждом уроке.

📋 Формулировка задания

Задание урока 01:

Создайте рабочую папку html-css-practice/lesson-01/, соберите в ней страницу-заглушку и оформите её через отдельный CSS-файл. Страница должна открываться напрямую из файловой системы.

🔧 Шаг 0. Подготовка рабочего места

Сначала настройте среду, чтобы в дальнейших уроках не тратить время на поиск файлов и путей.

📁 Структура проекта: держите все практические задания в одной общей папке, а внутри создавайте отдельные папки уроков.
1

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

В VS Code нажмите Ctrl+K Ctrl+O и откройте папку html-css-practice. Внутри создайте подпапку lesson-01.

2

Создайте файлы

Внутри lesson-01 создайте index.html и style.css. Первый файл будет структурой, второй - оформлением.

3

Выберите способ проверки

Можно установить Live Server или Live Preview, а можно просто открыть index.html двойным щелчком. Для этого урока сервер не обязателен.

🛠️ Шаги выполнения задания

1

Соберите HTML-каркас

Добавьте заголовок, короткое описание и ссылку на курс.

Файл: subjects/html-css/course/lessons/01-history-html-css/index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Урок 01</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>HTML &amp; CSS</h1>
  </header>
  <main>
    <p>Моя первая страница курса.</p>
  </main>
  <footer>
    <a href="../../index.html">К оглавлению курса</a>
  </footer>
</body>
</html>
2

Добавьте CSS

Сделайте страницу читабельной: задайте шрифт, ширину и базовые отступы.

Файл: subjects/html-css/course/lessons/01-history-html-css/style.css

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

Проверьте результат

  1. Откройте index.html в браузере.
  2. Убедитесь, что русские символы отображаются правильно.
  3. Поменяйте текст в style.css и обновите страницу.
  4. Если подключили Live Server, проверьте автообновление.

✅ Полное решение

Ниже - один из корректных вариантов решения. Обратите внимание, что логика важнее конкретных цветов или размеров.

Файл: subjects/html-css/course/lessons/01-history-html-css/index.html

<!-- index.html — полное решение -->
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>История HTML и CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="hero">
    <h1>История HTML и CSS</h1>
    <p>HTML задаёт структуру, CSS - оформление.</p>
    <a href="../../index.html">К оглавлению курса</a>
  </main>
</body>
</html>

Файл: subjects/html-css/course/lessons/01-history-html-css/style.css

/* style.css — полное решение */
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 24px;
  background: #f8fbff;
}

.hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border: 1px solid #d7e1f4;
  border-radius: 16px;
}

🧪 Как проверить решение

  1. Откройте index.html в браузере.
  2. Проверьте, что заголовок и текст отображаются без ошибок.
  3. Нажмите F5 после изменения CSS и убедитесь, что страница обновилась.
  4. Если используете Live Server, проверьте, что он открывает именно эту папку урока.

💡 Советы

  • Всегда ставьте <meta charset="UTF-8"> первой строкой в <head>.
  • Не используйте абсолютные пути вроде /style.css для локальных файлов.
  • Старайтесь сразу отделять смысл страницы от её оформления.