HTML CSS JavaScript TypeScript — страница 3

Семантика, DOM, события, формы, модули, Fetch, async/await, типизация и проверка данных

Материалы

• Поток документа в CSS: расположение и интервалы

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

• CSS Flexbox: навигация и метаданные страницы

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

• CSS Grid: сетка каталога курсов

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

• Адаптивная вёрстка страницы на CSS

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

• CSS-переменные: пользовательские свойства

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

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

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

• Container queries в CSS: адаптация карточки курса

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

• Каталог курсов на HTML и CSS: сборка страницы

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

• Cascade layers в CSS: слои каскада

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

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

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

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

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

• Intrinsic sizing в CSS: внутренние размеры элементов

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

• CSS clamp(): гибкие размеры элементов

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

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

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

• Контексты наложения в CSS: порядок слоёв

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

• CSS position: sticky — закрепление элемента при прокрутке

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

• CSS overflow: переполнение и прокрутка

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

• CSS scroll snap: управляемая прокрутка

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

• CSS aspect-ratio: соотношение сторон компонента

  Рамка обложки aspect-ratio, автоматический размер и разница геометрии компонента с форматом файла.

• CSS object-fit: вписывание изображений

  Cover и contain на вертикальной обложке, сохранение пропорций и отдельная настройка object-position.

• HTML dialog: нативное диалоговое окно

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

• Popover API в HTML: всплывающий блок

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

• CSS nesting: вложенные правила стилей

  Нативная вложенность CSS, смысл амперсанда, специфичность родительского списка и модификатор через where.

• Прогрессивное улучшение CSS-компонента

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