Блок
Самостоятельная сущность интерфейса. Пример: header, card, nav.
Практическое занятие 3
Стилизация страницы по методологии БЭМ
Единый подход к именованию классов, работа с типографикой и интерактивностью элементов.
CSS
Цель
Закрепить навыки стилизации, состояний и работы с якорями.
О проекте
Выбранная методология — БЭМ
Блоки независимы, элементы не живут отдельно от блоков, модификаторы меняют внешний вид или состояние.
Элемент
Составная часть блока. Пример: header__logo, card__title.
Модификатор
Изменяет внешний вид или состояние: nav__item--active, card--featured.
Услуги
Что реализовано на странице
Композиция блоков, работа с типографикой, интерактивные состояния и навигация по якорям.
Типографика
Подключен шрифт Inter, настроены размеры заголовков, текст и межстрочные интервалы.
Интерактивность
Для ссылок и кнопок описаны состояния :hover, :focus, :active, :disabled.
Навигация
Меню ведет к секциям с id. Для якорей настроена плавная прокрутка.
Портфолио
Карточки с эффектами
Карточки при наведении поднимаются и отбрасывают тень, демонстрируя работающие состояния.
Лендинг
Геро-секция, кнопки с модификаторами, сетка преимуществ.
Дашборд
Активные пункты меню выделяются модификатором --active.
Интернет-магазин
Карточки товаров используют элементы __title, __price, __cta.
Блог
Интерактивные превью статей со ссылками и плавными hover-эффектами.
Контакты
Свяжитесь с нами
Заполните форму или напишите письмо — отработаны стили для полей и кнопок.
Как мы работаем
- Анализируем задачу и подбираем подходящие методологии.
- Верстаем семантическую структуру и настраиваем стили.
- Проверяем доступность и интерактивность элементов.