Вопросы по HTML и CSS
Семантика и доступность, блочная модель, Flexbox и Grid, специфичность, адаптивность и анимации. Отвечаешь уверенно на вопросы по вёрстке и не теряешься на практике.
Проверьте себя: тест по HTML и CSS
20 вопросов, 10 минут, уровень junior, middle или senior
Семантика
Смысловые теги, структура документа, заголовки, формы и метаданные.
Урок: Семантическая вёрстка за 6 минут 6 минДоступность
Клавиатура, фокус, ARIA, альтернативный текст, контраст и скринридеры.
Урок: Доступность (a11y) за 7 минут 7 минБлочная модель
content, padding, border, margin, box-sizing, схлопывание отступов и display.
Урок: Блочная модель за 6 минут 6 минFlexbox
Оси, выравнивание, flex-grow, flex-shrink, flex-basis, перенос и gap.
Урок: Flexbox за 7 минут 7 минGrid
Треки, fr, minmax, auto-fit и auto-fill, области, неявная сетка и subgrid.
Урок: CSS Grid за 7 минут 7 минПозиционирование и z-index
static, relative, absolute, fixed, sticky и контекст наложения.
Урок: Позиционирование и z-index за 7 минут 7 минСелекторы и специфичность
Каскад, специфичность, наследование, :is, :where, :has и каскадные слои.
Урок: Селекторы, специфичность и каскад за 8 минут 8 минАдаптивность
Медиазапросы, контейнерные запросы, относительные единицы, clamp и адаптивные картинки.
Урок: Адаптивная вёрстка за 8 минут 8 минАнимации
transition и animation, что анимировать дёшево, will-change и prefers-reduced-motion.
Урок: CSS-анимации без тормозов 6 минАрхитектура CSS
БЭМ, CSS Modules, CSS-in-JS, утилитарный CSS, кастомные свойства и слои.
Урок: Архитектура CSS: как не утонуть в стилях 7 минВёрстка на практике
Типовые задачи вёрстки: центрирование, карточки, сетки, липкие шапки.
Урок: Типовые задачи вёрстки 6 мин- Соотношение сторон 16:9
- Адаптивная сетка без медиазапросов
- Центрирование по обеим осям
- Свой чекбокс
- Многоточие в одну строку
- Равные колонки при разном содержимом
- Подвал прижат к низу
- Обрезка на трёх строках
Ещё 16 вопросов и задач
- Модалка поверх всего
- Прогресс-бар
- Перебить стиль без !important
- Спиннер на анимации
- z-index не работает
- Липкая шапка
- Скрыто визуально, доступно скринридеру
- auto-fill и auto-fit в сетке карточек
- Пропорции блока через aspect-ratio
- Обрезка текста в несколько строк
- Подвал прижат к низу
- Центрирование блока на всю высоту экрана
- Многоточие не работает во флексе
- Сверстать адаптивную сетку карточек
- Способы центрирования в CSS
- Почему не работает position: sticky