Фронтенд и веб-платформа — страница 4

HTML, CSS, JavaScript, TypeScript, компоненты и статические сайты.

Темы раздела

Материалы

• Ссылки, пути и якоря

  Добавим переходы из карточек и разберём абсолютные адреса, относительные пути и якоря страницы.

• Изображения в карточках курсов

  Добавим изображение в карточку курса и зададим его текстовую альтернативу, пропорции и путь к файлу.

• HTML-форма и отправка параметров

  Разберём устройство HTML-формы: подписи, имена полей, проверку заполнения и передачу параметров.

• Каскад и наследование CSS

  Подключим первые стили и разберём каскад, наследование и порядок CSS-правил на знакомом каталоге.

• Специфичность и классы компонентов

  Научимся сравнивать специфичность селекторов и добавим класс выделенной карточки без привязки стилей к идентификатору.

• Размеры элементов и блочная модель

  Настроим блочную модель карточки и сделаем размеры изображений зависимыми от доступной ширины.

• Обычный поток и интервалы

  Оформим страницу в обычном потоке: ограничим ширину, зададим интервалы и сохраним рост блоков по содержимому.

• Flexbox для навигации и метаданных

  Применим Flexbox к шапке и метаданным карточек, чтобы управлять выравниванием и переносом одной группы элементов.

• CSS Grid для каталога курсов

  Построим сетку курсов с CSS Grid и позволим числу колонок зависеть от доступной ширины.

• Адаптивная компоновка страницы

  Добавим адаптивные правила страницы и выберем условия по содержимому, а не по списку моделей устройств.

• Пользовательские свойства CSS

  Вынесем повторяющиеся значения в пользовательские свойства CSS и разберём их наследование на каталоге.

• Состояния ссылок, полей и кнопок

  Оформим состояния ссылок и элементов управления, сохранив встроенное поведение формы и раскрывающегося блока.

• Запросы контейнера для карточки курса

  Научим карточку менять внутреннюю компоновку по ширине собственного контейнера с помощью @container.

• Сборка каталога на HTML и CSS

  Соберём конечный каталог из изученных механизмов и определим, как расширять его без случайных зависимостей.

• Слои каскада

  Явный порядок групп CSS, влияние обычных и важных объявлений и перенос стилей каталога в слои.

• Логические свойства размеров и отступов

  Строчная и блочная оси, направленные отступы и проверка каталога при изменении направления письма.

• Согласование вложенных сеток с subgrid

  Четыре общих ряда карточек, передача сетки через li и самостоятельный вариант без subgrid.

• Внутренние размеры элементов

  Внутренние размеры текста, компактная подпись fit-content и границы элементов сетки и формы.

• Гибкие размеры с clamp

  Нижняя и верхняя границы размеров, вычисление предпочтительной величины и влияние rem и viewport.

• Позиционирование элементов

  Локальная абсолютная метка курса, containing block, логические координаты и отличие от fixed.

• Контексты наложения

  Соседние контексты наложения, ограничение большого z-index и отдельный опыт с перекрытием панелей.

• Поведение position sticky

  Порог sticky, границы секции, влияние overflow предков и переходы к существующим якорям.

• Переполнение и прокрутка

  Локальная прокрутка таблицы шести курсов, различия overflow и сохранение доступа к широким столбцам.

• Управляемая прокрутка с scroll snap

  Диагностическая лента шести карточек, точки scroll snap и различие мягкой и строгой привязки.