HTML и CSS: Структура и стилизация сайтов
Каждый сайт начинается с HTML и CSS. Это не просто теория из учебников — это инструменты, которыми вы будете пользоваться постоянно, независимо от того, какие фреймворки освоите позже.
HTML создает структуру: заголовки, абзацы, списки, формы, таблицы. CSS отвечает за внешний вид: цвета, отступы, шрифты, сетки, анимации. Звучит просто, но дьявол в деталях. Правильная семантика, доступность для людей с ограниченными возможностями, адаптивность под разные экраны — всё это требует понимания основ.
Что именно вы будете делать
Начнете с базовой разметки: параграфы, ссылки, изображения. Затем перейдете к формам и интерактивным элементам. В CSS освоите flexbox и grid — современные способы компоновки, которые заменили старые костыли с float.
Особое внимание уделим адаптивности. Ваши страницы должны нормально выглядеть на телефоне, планшете и десктопе. Это не магия, а грамотное использование медиа-запросов и относительных единиц измерения.
Практика строится на создании реальных компонентов: навигационное меню, карточки товаров, формы регистрации, галереи изображений.
Типичные проблемы новичков
Многие пытаются запомнить все свойства CSS наизусть. Не надо. Важнее понимать принципы: каскадность, специфичность селекторов, блочную модель. Остальное быстро нагуглится.
Вторая ошибка — игнорирование инструментов разработчика в браузере. DevTools показывают, какие стили применены, где конфликты, как элементы взаимодействуют друг с другом. Без этого работать вслепую.
К концу курса соберете портфолио из пяти страниц: лендинг, блог, интернет-магазин, портфолио фотографа и корпоративный сайт. Весь код будет ваш, без копипаста из интернета.
Программа обучения
- Основы HTML: теги, атрибуты, семантическая разметка
- Формы и валидация: input, textarea, select, button
- CSS-селекторы и каскадность стилей
- Блочная модель: margin, padding, border, box-sizing
- Flexbox: выравнивание и распределение элементов
- CSS Grid: двумерные макеты и области
- Адаптивный дизайн: медиа-запросы, viewport, mobile-first
- Позиционирование: static, relative, absolute, fixed, sticky
- Анимации и переходы: transform, transition, keyframes
- Работа с изображениями: srcset, picture, object-fit
- CSS-переменные и calc для гибких расчетов
- БЭМ-методология для организации кода
Итоговые проекты
Пять полноценных веб-страниц с адаптивным дизайном, оптимизированные под разные устройства. Каждый проект включает исходники, макет и подробные комментарии в коде.