Эта серия упражнений посвящена созданию адаптивных футеров (нижних колонтитулов) веб-страниц с использованием CSS. Вы попрактикуетесь в стилизации футера, расположении его элементов с помощью Flexbox и Grid, а также в применении медиа-запросов для изменения макета и стилей на разных размерах экрана. Задания построены по принципу \"от простого к сложному\" и помогут закрепить навыки верстки адаптивных интерфейсов. Вам будет предоставлен готовый HTML-код и CSS-код с пропусками, которые нужно будет заполнить.
- Модуль 1: Основы CSS
- Селекторы элементов.
- Селекторы классов и идентификаторов.
- Цвет текста и фона.
- Размеры и единицы измерения в CSS.
- Семейство шрифта и базовые свойства текста.
- Стилизация текста (жирный, курсив, подчеркивание).
- Выравнивание и интервалы текста.
- Комбинированные селекторы.
- Псевдоклассы для ссылок.
- Приоритеты стилей и каскадность.
- Наследование в CSS.
- Модуль 2: Блочная модель и позиционирование
- Блочная модель CSS (box model).
- Внутренние отступы (padding).
- Внешние отступы (margin).
- Границы элементов (border).
- Сокращенная запись свойств границ.
- Радиус скругления углов (border-radius).
- Свойство display и его значения.
- Блочные элементы (display: block).
- Строчные элементы (display: inline).
- Строчно-блочные элементы (display: inline-block).
- Скрытие элементов (display: none, visibility: hidden).
- Статичное позиционирование (position: static).
- Относительное позиционирование (position: relative).
- Абсолютное позиционирование (position: absolute).
- Фиксированное позиционирование (position: fixed).
- Липкое позиционирование (position: sticky).
- Свойство z-index и порядок наложения элементов.
- Свойство float и его применение.
- Свойство clear для обтекания.
- Центрирование элементов различными способами.
- Модуль 3: Селекторы CSS продвинутый уровень
- Групповые селекторы.
- Селекторы потомков (descendant selectors).
- Дочерние селекторы (child selectors).
- Соседние селекторы (adjacent sibling selectors).
- Общие сиблинги (general sibling selectors).
- Селекторы атрибутов: точное совпадение.
- Селекторы атрибутов: частичное совпадение.
- Псевдоклассы состояний (:hover, :active, :focus, :visited).
- Псевдоклассы для форм (:checked, :disabled, :required).
- Структурные псевдоклассы (:first-child, :last-child).
- Псевдоклассы :nth-child() и :nth-of-type().
- Псевдоклассы :not() и :empty.
- Псевдоэлементы ::before и ::after.
- Псевдоэлементы ::first-letter и ::first-line.
- Псевдоэлемент ::selection.
- Псевдоэлемент ::placeholder.
- Комбинирование псевдоклассов и псевдоэлементов.
- Создание декоративных элементов с помощью псевдоэлементов.
- Модуль 4: Работа с фоном и визуальными эффектами
- Фоновый цвет (background-color).
- Фоновое изображение (background-image).
- Повторение фона (background-repeat).
- Позиционирование фона (background-position).
- Размер фона (background-size).
- Фиксация фона (background-attachment).
- Сокращенная запись свойств фона.
- Множественные фоновые изображения.
- Линейные градиенты (linear-gradient).
- Радиальные градиенты (radial-gradient).
- Конические градиенты (conic-gradient).
- Тень блока (box-shadow).
- Тень текста (text-shadow).
- Прозрачность (opacity).
- Фильтры (filter: blur, grayscale, etc.).
- Режимы смешивания (mix-blend-mode, background-blend-mode).
- Маски с mask-image.
- Формы с clip-path.
- Модуль 5: Типографика продвинутый уровень
- Межстрочное расстояние (line-height).
- Интервалы между буквами (letter-spacing).
- Интервалы между словами (word-spacing).
- Трансформация текста (text-transform).
- Декорирование текста (text-decoration).
- Перенос слов (word-break, overflow-wrap).
- Управление пробелами (white-space).
- Многоколоночный текст (columns).
- Обрезка текста (text-overflow, ellipsis).
- Вертикальное выравнивание текста (vertical-align).
- Направление текста (direction, writing-mode).
- Веб-шрифты и @font-face.
- Модуль 6: Flexbox
- Введение в Flexbox.
- Включение Flexbox (display: flex).
- Flex-контейнер и flex-direction.
- Выравнивание с justify-content.
- Выравнивание с align-items.
- Выравнивание с align-content.
- Свойство align-self для отдельных элементов.
- Свойство flex-wrap.
- Свойство flex-flow (сокращение для direction и wrap).
- Свойство flex-grow.
- Свойство flex-shrink.
- Свойство flex-basis.
- Сокращенное свойство flex.
- Порядок элементов с order.
- Сложные макеты на Flexbox.
- Вложенные flex-контейнеры.
- Создание адаптивной навигационной панели с Flexbox.
- Модуль 7: CSS Grid Layout
- Введение в Grid Layout.
- Включение Grid Layout (display: grid).
- Создание сетки: grid-template-columns.
- Создание сетки: grid-template-rows.
- Единица измерения fr.
- Функция repeat().
- Промежутки с gap, row-gap, column-gap.
- Размещение элементов: grid-column.
- Размещение элементов: grid-row.
- Сокращенная запись grid-area.
- Именованные линии и области.
- Свойство grid-template-areas.
- Автоматическое размещение элементов.
- Автоматические треки (grid-auto-rows, grid-auto-columns).
- Управление потоком элементов (grid-auto-flow).
- Выравнивание в Grid: justify-items и align-items.
- Выравнивание в Grid: justify-content и align-content.
- Выравнивание отдельного элемента (justify-self, align-self).
- Сложные макеты на Grid.
- Комбинирование Grid и Flexbox.
- Модуль 8: Трансформации и переходы
- Трансформации: translate.
- Трансформации: scale.
- Трансформации: rotate.
- Трансформации: skew.
- Комбинирование трансформаций.
- Точка трансформации с transform-origin.
- 3D-трансформации и перспектива.
- Переходы с transition-property.
- Длительность перехода с transition-duration.
- Функции плавности с transition-timing-function.
- Задержка с transition-delay.
- Сокращенное свойство transition.
- Переходы для нескольких свойств.
- Создание интерактивных элементов с переходами.
- Производительность трансформаций и переходов.
- Модуль 9: Анимации
- Создание keyframes.
- Свойство animation-name.
- Свойство animation-duration.
- Свойство animation-timing-function.
- Свойство animation-delay.
- Свойство animation-iteration-count.
- Свойство animation-direction.
- Свойство animation-fill-mode.
- Свойство animation-play-state.
- Сокращенное свойство animation.
- Множественные анимации.
- Создание сложных анимаций.
- Анимации с использованием переменных.
- Оптимизация производительности анимаций.
- Анимации и доступность.
- Модуль 10: Адаптивный дизайн
- Относительные единицы измерения (%, em, rem).
- Единицы vh и vw.
- Медиа-запросы: основы.
- Медиа-запросы: max-width и min-width.
- Медиа-запросы: ориентация устройства.
- Медиа-запросы: типы устройств и медиа-функции.
- Mobile-first подход.
- Адаптивные изображения.
- Элемент picture и атрибуты srcset/sizes.
- Адаптивная типографика.
- Адаптивная навигация.
- Адаптивные таблицы.
- Адаптивные формы.
- Отзывчивые медиа (видео, iframe).
- Тестирование адаптивности.
- Модуль 11: Формы и CSS
- Базовая стилизация input и button.
- Стилизация textarea.
- Стилизация состояний форм (:focus, :valid, :invalid).
- Стилизация placeholder.
- Кастомизация radio и checkbox с помощью CSS.
- Стилизация select и option.
- Создание кастомных выпадающих списков.
- Стилизация range input.
- Стилизация file input.
- Валидация форм и стилизация сообщений об ошибках.
- Модуль 12: Современные возможности CSS
- Переменные CSS (Custom Properties).
- Область видимости переменных.
- Функция calc().
- Свойство object-fit для изображений.
- Свойство object-position.
- Scroll Snap.
- Контейнерные запросы (Container Queries).
- Подсеточные элементы (Subgrid).
- Логические свойства (logical properties).
- CSS Houdini (введение).
- Feature Queries (@supports).
- Новые селекторы CSS (is(), where(), has()).
- Модуль 13: Практические проекты
- Создание адаптивной навигационной панели.
- Создание карточек товаров.
- Создание слайдера изображений на CSS.
- Создание табов.
- Создание дропдаун-меню.
- Создание галереи изображений с фильтрами.
- Создание анимированных иконок.
- Создание адаптивного лендинга.
- Создание тёмной темы с CSS-переменными.
- Создание анимированных кнопок.
- Создание анимированных форм.
- Создание сетки изображений с hover-эффектами.
- Создание адаптивного футера.
- Создание макета блога на CSS Grid.
- Создание адаптивного дашборда.
- Создание интерактивной формы с анимациями.
- Создание CSS-арта.
Базовая стилизация футера
Начнем с основ. Задайте базовые стили для футера: цвет фона, цвет текста и внутренние отступы сверху и снизу, чтобы текст не прилипал к краям блока. Цвет фона должен быть темно-серым (#333), цвет текста - белым (#fff), а отступы - 15px сверху и снизу.
Центрирование текста в футере
Часто текст в футере, например, копирайт, располагают по центру. Используйте CSS свойство для выравнивания текста внутри элемента `footer` по центру.
Горизонтальное расположение элементов с Flexbox
Футер часто содержит несколько блоков информации (копирайт, навигация). Расположите параграф с копирайтом и блок навигации горизонтально в ряд, используя Flexbox. Элементы должны быть выровнены по центру контейнера.
Распределение пространства с Flexbox
Измените предыдущий пример так, чтобы копирайт был прижат к левому краю футера, а навигация — к правому. Используйте для этого соответствующее значение свойства `justify-content`.
Перенос элементов Flexbox на малых экранах
Текущий макет с элементами в ряд может плохо смотреться на очень узких экранах. Сделайте так, чтобы элементы внутри `.footer-content` могли переноситься на следующую строку, если им не хватает места.
Адаптация: изменение направления Flexbox
Сделаем футер адаптивным. Используйте медиа-запрос, чтобы на экранах шириной 350px и меньше элементы внутри `.footer-content` располагались не горизонтально, а вертикально (друг под другом) и были выровнены по центру.
Создание сетки (Grid) для футера
Используем CSS Grid для разметки футера. Разделите футер на две равные колонки. В первой колонке будет копирайт, во второй - список ссылок.
Адаптация Grid-сетки футера
Сделаем Grid-футер адаптивным. Используйте медиа-запрос, чтобы на экранах шириной 360px и меньше сетка перестраивалась: вместо двух колонок должна остаться только одна, и элементы должны располагаться друг под другом.
Загрузка...