Задания на практику часть 2

1.

Задачи на практику
часть 2
Преподаватель: Жарков Алексей Сергеевич

Задача 1: Адаптивное CSS Grid-Макет
(Дашборд)
Цель: Использование CSS Grid для создания сложного адаптивного макета с именованными областями.
Что нужно сделать:
1.
Создайте HTML-файл dashboard.html.
2.
В <body> создайте основной контейнер div.dashboard-layout.
3.
Внутри него разместите следующие семантические блоки:
4.
Создайте CSS-файл style.css и подключите его.
5.
В CSS:
Для .dashboard-layout используйте display: grid;.
Для широких экранов (desktop, > 1024px):
Определите 3 колонки (например, 200px для сайдбара, 1fr для основного контента, 250px для дополнительной колонки справа, которая
будет пустой, но зарезервирована).
Определите 3 строки (фиксированная высота для хедера и футера, 1fr для центральной части).
Используйте grid-template-areas для размещения header, nav, main, footer в соответствующих областях.
Для средних экранов (tablet, 768px - 1024px):
Измените grid-template-areas так, чтобы боковая панель (nav) располагалась сверху после хедера, а основное содержимое (main) занимало
всю ширину.
Используйте grid-template-columns: 1fr 1fr; или 1fr; в зависимости от желаемого макета.
Для узких экранов (mobile, < 768px):
Все элементы должны располагаться в одной колонке, друг под другом.
Добавьте базовые стили (фон, padding, border) для всех блоков (header, nav, main, footer, widget), чтобы визуально их разделить.
Ожидаемый результат: Адаптивный макет дашборда, меняющий свою структуру на разных размерах экрана, используя grid-template-areas.

3.

Задача 2: Выпадающее меню (Pure CSS
Dropdown)
Цель: Создание многоуровневого выпадающего меню без JavaScript, используя :hover и position.
Что нужно сделать:
1.
2.
3.
4.
5.
6.
Создайте HTML-файл dropdown.html.
Создайте навигационное меню (<nav>) с основным списком (<ul>).
Один из пунктов основного списка (<li>) должен содержать в себе вложенный список (<ul>) с пунктами, формируя выпадающее меню.
Один из пунктов этого вложенного списка должен содержать ещё один вложенный список, формируя под-выпадающее меню.
Создайте CSS-файл style.css и подключите его.
В CSS:
Оформите основное меню горизонтально (используя Flexbox).
Сделайте так, чтобы вложенные списки (ul) по умолчанию были скрыты (display: none; или visibility: hidden; opacity: 0;).
При наведении на родительский пункт меню (li:hover), соответствующий вложенный список должен становиться видимым.
Используйте position: relative; для родительских li и position: absolute; для вложенных ul, чтобы они правильно позиционировались.
Убедитесь, что под-выпадающее меню появляется справа от родительского пункта, а не под ним.
Добавьте плавный переход (transition) для появления меню (например, изменение opacity).
Убедитесь, что элементы меню не обрезаются и правильно накладываются друг на друга (z-index).
Ожидаемый результат: Полностью функциональное, чистое CSS-выпадающее меню с несколькими уровнями вложенности.

4.

Задача 3: Карточки с эффектом наведения и
оверлеем (Overlay Card Hover Effect)
Цель: Создание интерактивных карточек с эффектом наведения, включающим переходы, трансформации и псевдоэлементы.
Что нужно сделать:
1.
2.
3.
4.
5.
6.
Создайте HTML-файл cards.html.
Создайте контейнер div.card-grid (используя CSS Grid или Flexbox для расположения).
Внутри него создайте 3-4 div элемента с классом card.
Каждая card должна содержать:
Изображение (<img>).
div.overlay (оверлей), который будет скрыт по умолчанию. Внутри оверлея: заголовок <h3> и параграф <p> с описанием.
Создайте CSS-файл style.css и подключите его.
В CSS:
Стилизуйте card: фиксированная ширина/высота, position: relative;, overflow: hidden;, box-shadow.
Изображение должно полностью заполнять карточку.
Стилизуйте overlay: position: absolute;, top: 0; left: 0; width: 100%; height: 100%;.
По умолчанию overlay должен быть невидимым или сдвинутым за пределы карточки (например, transform: translateY(100%); opacity: 0;).
При наведении на card (.card:hover):
overlay должен плавно появляться (например, transform: translateY(0); opacity: 1;).
Изображение может немного уменьшаться или затемняться.
Добавьте transition для всех анимируемых свойств для плавности.
Используйте ::before или ::after на card для создания дополнительного декоративного элемента, который тоже появляется или меняется при наведении.
Ожидаемый результат: Сетка карточек, каждая из которых имеет изображение, а при наведении на неё плавно появляется текстовый оверлей и меняется изображение.

5.

Задача 4: Пользовательские стили для
чекбоксов и радиокнопок
Цель: Создание кастомного внешнего вида для нативных чекбоксов и радиокнопок без изменения их функциональности.
Что нужно сделать:
1.
2.
3.
4.
5.
6.
Создайте HTML-файл custom-form.html.
В <body> создайте форму с <fieldset> и <legend>.
Добавьте несколько чекбоксов и несколько радиокнопок.
Каждый input должен быть связан с <label> через id и for.
Создайте CSS-файл style.css и подключите его.
В CSS:
Визуально скройте нативные input[type="checkbox"] и input[type="radio"] (например, opacity: 0; position: absolute;).
Используйте псевдоэлементы (::before или ::after) на label для создания собственного внешнего вида для чекбокса/радиокнопки
(например, квадрат для чекбокса, круг для радио).
Стилизуйте эти псевдоэлементы (размер, фон, рамка).
При :checked состоянии input (используя селектор input[type="checkbox"]:checked + label::before), измените стили псевдоэлемента,
чтобы показать, что элемент выбран (например, добавить галочку, изменить фон).
Добавьте эффекты при :hover и :focus на label или псевдоэлементы.
Ожидаемый результат: Форма с чекбоксами и радиокнопками, которые выглядят нестандартно, но сохраняют нативную функциональность и
доступность.

6.

Задача 5: Стилизованная галерея с
лайтбоксом (Pure CSS Lightbox Mockup)
Цель: Создание мини-галереи с эффектом "лайтбокса" (отображение увеличенного изображения поверх страницы), используя чистый CSS (:target или чекбокс-хак).
Что нужно сделать:
1.
2.
3.
4.
5.
Создайте HTML-файл lightbox.html.
Создайте галерею из 3-4 миниатюрных изображений (<img>) с ссылками (<a>).
Каждая ссылка должна вести на элемент-лайтбокс (div с уникальным id), содержащий увеличенную версию изображения и кнопку закрытия.
Создайте CSS-файл style.css и подключите его.
В CSS:
Оформите галерею миниатюр (например, используя Flexbox или Grid).
Стилизуйте элементы лайтбокса:
По умолчанию они должны быть скрыты (display: none; opacity: 0; или visibility: hidden;).
position: fixed; top: 0; left: 0; width: 100%; height: 100%; для позиционирования поверх всего.
Полупрозрачный черный фон для затемнения страницы.
Центрированное увеличенное изображение внутри лайтбокса.
Кнопка закрытия (например, X в углу лайтбокса).
Используйте селектор :target (.lightbox:target) для отображения соответствующего лайтбокса, когда его id присутствует в хеше URL.
Или используйте "checkbox hack":
Скройте input type="checkbox".
label будет кнопкой открытия.
input:checked ~ .lightbox будет показывать лайтбокс.
Добавьте transition для плавного появления/исчезновения лайтбокса.
Ожидаемый результат: Рабочая галерея, при клике на изображение открывающая его в "лайтбоксе" поверх страницы, закрывающемся по клику на кнопку или за пределами
изображения (в зависимости от реализации :target или чекбокс-хака).

7.

Задача 6: Стилизация кастомных курсоров и
скроллбаров (Browser Specific)
Цель: Изучение и применение браузерно-специфичных свойств для стилизации курсоров и полос прокрутки.
Что нужно сделать:
1.
2.
3.
4.
5.
Создайте HTML-файл custom-ui.html.
Создайте div с большим количеством текста, чтобы появился скроллбар.
Создайте несколько ссылок и кнопок.
Создайте CSS-файл style.css и подключите его.
В CSS:
Для всего body измените курсор при наведении на что-то нестандартное (cursor: help; или cursor: url('custom-cursor.png'), auto;).
Для ссылок и кнопок установите другой курсор при наведении (cursor: pointer; или cursor: grab;).
Стилизуйте скроллбар (только для Webkit-браузеров, таких как Chrome/Safari):
Используйте псевдоэлементы ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb.
Измените ширину скроллбара, цвет дорожки и цвет ползунка.
(Бонус) Попробуйте найти и применить стили для скроллбаров в Firefox (если актуально на момент прохождения курса, т.к. это
часто меняется или требует JS).
Ожидаемый результат: Веб-страница с измененным курсором при различных взаимодействиях и кастомизированным скроллбаром (видимым
только в Webkit-браузерах).

English Русский Правила