¶ 1. Класс для выделения элементов
Команда контент-редакторов обратилась к вам как к начинающему фронтенд-разработчику с просьбой добавить на их внутренний сайт возможность выделять важные части текста. Они хотят помечать отдельные абзацы и заголовки как “особо важные”, чтобы эти элементы визуально отличались от остального текста.
Чтобы это реализовать, нужно создать CSS-класс и применять его к любым элементам, которые редакторы хотят выделить.
¶ Что нужно сделать
Вам нужно:
- Создать новый CSS-класс, который визуально выделяет любой элемент (цвет фона, цвет текста, отступы).
- Применить этот класс к нескольким HTML-элементам, включая элементы разных типов (например,
<p>и<h2>). - Убедиться, что оформление применяется правильно и одинаково для всех элементов, которым назначен класс.
¶ Нюансы
- Класс должен работать независимо от типа тега:
<p>,<h2>,<div>и т. д. - Для лучшего эффекта используйте одновременно фон, внутренние отступы и изменение цвета текста.
- Можно создавать несколько вариантов стиля, но основной класс должен быть один.
¶ Вспомогательные файлы
¶ index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Выделение текста</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Тренировка CSS</h1>
<p>Это первый абзац. Его выделять не нужно.</p>
<p class="highlight">Это второй абзац. Он важен для читателя.</p>
<h2 class="highlight">Этот заголовок тоже должен быть выделен.</h2>
<p>Обычный абзац для примера.</p>
</body>
</html>
¶ 2. Карточка товара и её интерактивность
Дизайнер подготовил прототип карточек товара для интернет-магазина. Теперь задачей разработки является сверстать эти карточки и сделать их интерактивными: при наведении мыши карточка должна слегка приподниматься и менять тень, а кнопка внутри карточки должна менять оттенок.
Это первый шаг к созданию полноценного каталога магазина.
¶ Что нужно сделать
-
Сверстать одну карточку в соответствии с заданной структурой.
-
Настроить визуальный стиль карточки: фон, тень, внутренние отступы, ширину, скругление углов.
-
Добавить эффект
:hoverдля карточки:- увеличение тени,
- лёгкое смещение вверх.
-
Добавить эффект
:hoverдля кнопки:- изменение цвета фона.
¶ Нюансы
- Для плавных эффектов обязательно используйте
transition: 0.3s;. - Старайтесь, чтобы тени были мягкими и реалистичными.
- Помните: оформление должно быть идентичным указанному макету (визуально приятное и аккуратное).
¶ Вспомогательные файлы
¶ index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Карточка товара</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="cards_list">
<article class="card">
<h3>Название товара</h3>
<p>Краткое описание товара. Несколько предложений или одна фраза.</p>
<button class="btn">Подробнее</button>
</article>
</section>
</body>
</html>
¶ 3. Исправление проблемного интерфейса панели сотрудников
Вы работаете над внутренним веб-интерфейсом для системы управления персоналом. На одной из страниц должна отображаться «панель сотрудников» — список карточек с краткой информацией: имя сотрудника, роль и кнопка «Показать профиль».
Менеджер проекта описал требуемый внешний вид словами:
- В верхней части страницы должен быть заголовок: «Сотрудники отдела».
- Под ним — блок с карточками сотрудников.
- Каждая карточка должна выглядеть как небольшой «бейджик»:
- светлый фон,
- скруглённые углы,
- небольшая тень,
- фиксированная ширина, чтобы в строку помещалось по 3–4 карточки,
- внутри — имя сотрудника, его должность, кнопка действия.
- Карточки должны располагаться в несколько колонок. Если окно сужается, они должны аккуратно переноситься на следующую строку.
- Некоторые сотрудники должны быть отмечены как «ведущие специалисты» — у них карточка должна быть более заметной, с другим фоном и рамкой.
- При наведении карточка должна слегка увеличиваться и становиться более выразительной.
- Кнопка внутри карточки должна менять цвет при наведении.
- Страница должна иметь спокойную корпоративную цветовую схему.
Стажёр-разработчик попытался реализовать всё это, но результат оказался далёк от ожиданий:
- карточки растягиваются на всю ширину или прижимаются к краю;
- у некоторых элементов фон и текст практически сливаются;
- эффекты при наведении выглядят агрессивно или не работают;
- тени карточек отсутствуют или слишком сильные;
- «ведущие специалисты» никак не выделены;
- при сужении страницы карточки накладываются друг на друга;
- в CSS много опечаток, дублирующихся правил и конфликтов.
Вам поручено исправить стили.
¶ Что нужно сделать
- Изучить разметку и определить, какие селекторы и стили должны применяться.
- Найти все ошибки (синтаксические, логические, структурные).
- Привести стили к виду, который соответствует описанной визуальной концепции.
- Нельзя менять HTML — только CSS.
- Добиться аккуратного, понятного, предсказуемого результата.
¶ Нюансы
- Ошибки не подсвечиваются браузером: он просто игнорирует ошибочное свойство.
- Проверьте, что классы в стилях действительно соответствуют элементам в разметке и что нужные блоки получают свои стили.
- Проанализируйте цвета текста и фона, размеры шрифта и отступы: всё ли выглядит удобочитаемо и аккуратно.
- Подумайте, какой тип раскладки наиболее подходит для расположения карточек в несколько колонок с переносом строк.
- Сравните ширину карточек, их отступы и внутренние поля с описанным в истории макетом.
- Проверьте, чтобы hover-эффекты были умеренными, предсказуемыми и применялись к правильным элементам.
- Если стиль «не срабатывает», возможно, проблема в недописанном или неверно записанном свойстве.
¶ Вспомогательные файлы
¶ index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Панель сотрудников</title>
<link rel="stylesheet" href="styles-broken.css">
</head>
<body>
<header class="header">
<h1>Сотрудники отдела</h1>
</header>
<main class="staff-panel">
<div class="staff-list">
<article class="staff-card">
<h2 class="name">Анна Петрова</h2>
<p class="role">HR-специалист</p>
<button class="btn">Показать профиль</button>
</article>
<article class="staff-card lead">
<h2 class="name">Игорь Смирнов</h2>
<p class="role">Ведущий аналитик</p>
<button class="btn">Показать профиль</button>
</article>
<article class="staff-card">
<h2 class="name">Мария Орлова</h2>
<p class="role">Маркетолог</p>
<button class="btn">Показать профиль</button>
</article>
<article class="staff-card">
<h2 class="name">Владимир Савельев</h2>
<p class="role">Разработчик</p>
<button class="btn">Показать профиль</button>
</article>
</div>
</main>
<footer class="footer">
<p>Корпоративная система • 2025</p>
</footer>
</body>
</html>
¶ styles-broken.css (большой проблемный файл)
Этот файл содержит множество ошибок. Задача — всё исправить.
body {
bg-color: #111;
fn-family: "Arial", sansserif;
font-size: 26px;
margin: 10;
padding: 0px 0px 0px;
}
.header {
background: #fff;
color: #fff;
padding-top: 5;
padding-botom: 5px;
text-align: left;
}
.header h1 {
font-size: 12px;
margin: auto;
}
.staff-panel {
position: absolute;
width: auto;
width: 100%;
paddng: 20px;
}
.staff-list {
display: block;
justify-content: center;
algin-items: center;
margin: -10px;
gap: -40px;
}
.staff-card {
width: 90%;
padding: 4px;
border-radus: 2px;
box-shadow: 0 0 0 0 rgba(0,0,0,0.1);
color: #eee;
position: absolute;
transiton: 1s;
}
.staff-card .name {
font-size: 10px;
margin-bottom: 1px;
}
.staff-card .role {
color: #f0f0f0;
margin-top: 0;
margin-bottom: 4;
}
.lead {
background-color: #fafafa;
border: 1px solid #f9f9f9;
width: 100%;
position: relative;
}
.staff-list:hover {
transform: scale(1.3);
}
.staff-card:hover {
transform: scale(1.5);
border-color: #000;
}
.btn {
display: block;
width: 100%;
background-color: #ccc;
color: #ccc;
padding: 3px;
border-radius: 1px;
border: 1px solid #333;
}
.btn:hover {
backgrond: #333;
color: #333;
}
.footer {
background-color: #ddd;
color: #ddd;
text-align: left;
padding: 2;
font-size: 8px;
}
¶ 4.Создание тёмной темы сайта
Команда дизайнеров решила добавить на сайт тёмную тему, чтобы пользователи могли работать вечером без нагрузки на глаза. Вам поручено создать тёмную версию оформления, которая должна полностью основываться на уже существующей HTML-структуре.
Нельзя менять HTML-файл — только CSS.
¶ Что нужно сделать
- Создать новую тему оформления на основе готовой страницы.
- Переопределить фон страницы, фон карточек, цвет текста, кнопок, ссылок.
- Добавить возможность смены темы с помощью класса
dark-theme, который применяется к<body>. - Сохранить визуальную целостность и читаемость.
¶ Нюансы
- Не используйте слишком темные цвета текста — контраст должен оставаться комфортным.
- Не трогайте размеры и структуру элементов, только цвета.
- Проверьте состояние элементов
:hover— оно тоже должно выглядеть корректно в тёмной теме.
¶ Вспомогательные файлы
Воспользуйтесь версткой, данной на лекционном занятии
¶ 5. Верстка навигационной панели web-приложения по макету
Команда интерфейсных дизайнеров завершила первый этап разработки нового корпоративного web-приложения. Одним из ключевых элементов интерфейса является верхняя навигационная панель, которая будет присутствовать на всех страницах системы: от рабочего стола до страницы аналитики.
Дизайнер подготовил графический макет в виде файла PNG. По макету видно:
- Навигационная панель занимает всю ширину экрана и располагается сверху.
- Фон панели выполнен в фирменном тёмно-графитовом стиле.
- Слева находится текстовый логотип — название приложения.
- Справа от логотипа расположено горизонтальное меню из четырёх пунктов.
- Один из пунктов выделен как активный (цветом или подчёркиванием).
- При наведении на пункт меню появляется мягкий hover-эффект.
- Справа от меню находится блок профиля пользователя: круглая аватарка и имя.
- Расстояния, отступы, размеры шрифтов и расположение элементов должны точно соответствовать макету.
- Адаптивность не требуется: макет рассчитан на фиксированную рабочую ширину (например, 1200 px).
Заказчик ожидает, что навигационная панель будет полностью соответствовать макету визуально и структурно. Теперь перед вами стоит задача сверстать эту панель.
¶ Что нужно сделать
- Создать HTML-страницу, содержащую верхнюю навигационную панель.
- Создать CSS-файл, в котором будут оформлены:
- фон навигации, цвета, размеры, шрифты;
- расположение логотипа, меню и блока профиля;
- состояние активного пункта меню (
.active); - hover-состояние пунктов меню (визуальный эффект по макету);
- отступы, интервалы, базовая типографика;
- выравнивание всех элементов точно так, как в макете.
- Структура панели (примерная):
- левая группа: логотип + меню,
- правая группа: профиль пользователя.
- Реализовать все визуальные решения, указанные на изображении:
цвета, толщины линий, интенсивность hover-эффектов, расстояние между элементами. - Проверить визуальное соответствие вашей верстки изображению.
¶ Нюансы
- Отступы в интерфейсе особенно важны: небольшое расхождение на 2–4 px уже заметно. Работайте аккуратно.
- Шрифт должен совпадать по гарнитуре, жирности и размеру. Если шрифт дизайнер не указал — используйте наиболее похожий системный.
- В меню расстояния между пунктами должны соответствовать макету, а не выбираться «на глаз».
- Элемент-логотип не обязательно текстовый: можно стилизовать через
font-weight,letter-spacing. - Профиль пользователя должен быть выровнен по вертикали с остальными элементами.
- Аватар должен быть круглым (
border-radius: 50%). - Активный пункт меню важно стилизовать точно так, как в макете: цвет, подчёркивание, толщина.
- Hover-эффект должен быть мягким — убедитесь, что переходы аккуратные.
- Разделите панель на два больших flex-блока: левую и правую часть.
- Логотип и меню удобно расположить внутри одного flex-контейнера.
- Для меню используйте горизонтальный flex-контейнер с
gap. - Стройте верстку строго от макета: сначала расположение и структура, потом цвета и детали.
- Перед реализацией hover-состояний внимательно изучите их поведение на макете.
- Сохраните единую линию базового выравнивания по высоте (логотип, меню, профиль).
¶ Вспомогательные файлы
В статическом состоянии навигационная панель должна выгядеть следующим образом:
При наведении на аватар:
При наведении на пункт меню (в данном случае "Задачи"):
Для аватара можно использовать следующий плейсхолдер: https://i.pravatar.cc/128