HTML и CSS за 10 дней

📌 День 1: Основы HTML

Цель: Понять структуру HTML-документа и основные теги.

📚 Теория:

HTML — язык разметки для создания веб-страниц
Структура документа: <!DOCTYPE html>, <html>, <head>, <body>
Основные теги: <h1>-<h6>, <p>, <a>, <img>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый HTML-документ.</p>
    <img src="image.jpg" alt="Пример изображения">
    <a href="https://example.com">Ссылка на пример</a>
</body>
</html>
        

HTML

Результат

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

Создайте файл index.html
Добавьте базовую структуру HTML-документа
Вставьте заголовок первого уровня с вашим именем
Добавьте параграф с кратким описанием себя
Вставьте ссылку на ваш любимый сайт

Файл создан

Структура добавлена

Заголовок добавлен

Описание добавлено

Ссылка вставлена

Совет дня

Используйте эммет-сокращения для быстрой верстки:

! + Tab → базовая структура HTML
h1 + Tab → <h1></h1>
p.class-name → <p class="class-name"></p>

Проверь себя

Какой тег используется для создания ссылки?

<link>

<a>

<href>

✅ Верно! Тег <a> создает гиперссылки с атрибутом href.

❌ Неправильно. Попробуйте еще раз!

📌 День 2: Основы CSS

Цель: Научиться подключать CSS и использовать основные селекторы.

📚 Теория:

CSS — язык стилей для оформления HTML-документов
3 способа подключения CSS: inline, <style>, внешний файл
Базовые селекторы: тег, класс, id
Основные свойства: color, font-size, background, margin, padding

/* Стилизация по тегу */
h1 {
    color: blue;
    font-size: 24px;
}

/* Стилизация по классу */
.text-red {
    color: red;
}

/* Стилизация по id */
#special-paragraph {
    font-weight: bold;
}
        

HTML + CSS

Результат

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

Создайте файл styles.css
Подключите его к вашему HTML-документу
Измените цвет всех заголовков <h1> на синий
Создайте класс .important с красным цветом текста
Добавьте отступы (padding) для параграфов

CSS файл создан

Файл подключен

Заголовки стилизованы

Класс .important создан

Отступы добавлены

Совет дня

Используйте браузерные инструменты разработчика (F12) для:

Быстрого тестирования стилей
Поиска ошибок в CSS
Анализа стилей других сайтов

Проверь себя

Как правильно подключить внешний CSS-файл?

✅ Правильно! link — стандартный способ подключения CSS.

🚀 HTML и CSS за 10 дней

📌 День 1: Основы HTML

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

Совет дня

Проверь себя

📌 День 2: Основы CSS

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

Совет дня

Проверь себя

📌 День 3: Блочная модель и Flexbox

📌 День 4: Grid Layout

📌 День 5: Формы и интерактивные элементы

📌 День 6: Адаптивный дизайн и медиазапросы

📌 День 7: Анимации и трансформации

📌 День 8: Препроцессоры (Sass/Less)

📌 День 9: Семантическая верстка

📌 День 10: Оптимизация и публикация