PRO-19

📘 Модуль 1: Основы HTML&CSS

📚 Содержание курса

№	Тема лекции	Ссылка
1	Введение в HTML, знакомство с VS Code, шаблонная структура HTML-документа, заголовки `<h1>`–`<h6>`, абзац `<p>`, ссылки `<a>`, изображения `<img>` и их обязательные атрибуты	Лекция 1
2	Структурные теги HTML (`<header>`, `<main>`, `<footer>`, `<section>`, `<div>`), списки, введение в CSS, подключение, селекторы и свойства, цвет и прозрачность (название, RGB, HEX)	Лекция 2
3	Тег `<button>`, типы кнопок, псевдоклассы, якорные ссылки, переходы между страницами, бокс-модель, свойства `padding`, `margin`	Лекция 3
4	Flexbox, структурные псевдоклассы, основы Git и GitHub	Лекция 4
5	Продолжение Git и GitHub, позиционирование элементов	Лекция 5
6	Формы `<form>`, медиа-запросы `@media`, hamburger-меню	Лекция 6
7	Grid — блочная сетка в CSS	Лекция 7
8	Растровая графика, `background-image`, линейные и радиальные градиенты	Лекция 8
9	Векторная графика, SVG-документы, SVG-спрайты, `<iframe>`	Лекция 9
10	Анимации в CSS	Лекция 10
11	CSS-методологии	Лекция 11
12	CSS-препроцессоры (SASS)	Лекция 12
13	Tailwind CSS: установка через npm, npx, CDN. Файл `.gitignore`	Лекция 13
14	Семантика, доступность и оптимизация сайта: lazy loading, минификация, Lighthouse, основы SEO, `@media print`, атрибут `download`, favicon, Markdown	Лекция 14
15	Подключение библиотек: Animate.css, Hover.css, AOS (Animate On Scroll), Swiper	Лекция 15
16	Защита итогового проекта по HTML & CSS

🎨 Требования к проекту

1. Стилизация и оформление

Используйте шрифты, текстовые элементы, изображения и иконки.
Верстка с помощью Flexbox.
Разрешено использовать чистый CSS или Tailwind CSS.

2. Адаптивность

Медиа-запросы для экранов: 1920px, 1024px, 768px, 320px.
Реализуйте гамбургер-меню для мобильной версии сайта.

3. Интерактивность и динамика

Добавьте анимации элементов.
Реализуйте формы с базовой валидацией.
Сделайте модальное окно, открывающееся по событию пользователя.