📝 Практические задания

⚡ Задания в двух словах

  • Создать папку урока и открыть её в VS Code.
  • Собрать страницу с заголовком, списком и абзацем.
  • Вынести оформление в отдельный CSS-файл.

🏋️ Раздел тренировки

Сейчас вы потренируете сразу две привычки: правильную структуру файлов и разделение HTML/CSS. Это база, без которой дальше будет неудобно учиться.

Цель тренировки: научиться создавать страницу, открывать её с диска и видеть результат без сервера.

📂 Подготовка проекта

  1. Создайте папку html-css-practice/lesson-01/.
  2. Откройте эту папку в VS Code через Ctrl+K Ctrl+O.
  3. Создайте файлы index.html и style.css.
  4. Если хотите автообновление, установите Live Server или Live Preview.

Задание 1. Каркас страницы

Условие: создайте HTML-страницу с <header>, <main> и <footer>.

Что должно получиться: на странице должен быть заголовок, короткий текст и ссылка на курс. Примерный эскиз результата:

header — h1 main — абзац текста footer — ссылка на курс
Три семантические зоны: шапка, основное содержимое и подвал.

Задание 2. Первый внешний стиль

Условие: подключите style.css и задайте странице базовый шрифт, отступы и цвет заголовка.

Что должно получиться: страница выглядит аккуратно даже без сложного дизайна.

Задание 3. Мини-рефакторинг

Условие: возьмите любой элемент с inline-style и перенесите оформление в CSS-класс.

Что должно получиться: HTML становится чище, а стили - переиспользуемыми.