Чек-лист самопроверки
Разработчику
Аналитику
Тестировщику
Архитектору
Инженеру
Чек-лист самопроверки
- Понимаю ли я, что CSS — это язык описания стилей, а не язык программирования?
- Могу ли я объяснить разницу между HTML (структурой) и CSS (оформлением)?
- Знаю ли я, как подключить CSS-файл к HTML-документу через
<link>? - Умею ли я использовать встроенные стили через атрибут
style? - Понимаю ли я, как работают селекторы по тегу, классу и идентификатору?
- Знаю ли я разницу между классом (
.class) и идентификатором (#id)? - Могу ли я объяснить, что такое каскадность в CSS?
- Понимаю ли я, как работает наследование стилей?
- Знаю ли я, как рассчитывается специфичность селекторов?
- Умею ли я использовать универсальный селектор (
*) и понимаю его последствия? - Знаю ли я, как работают псевдоклассы (
:hover,:focus,:active,:visited)? - Могу ли я использовать псевдоэлементы (
::before,::after)? - Понимаю ли я модель блока (box model): content, padding, border, margin?
- Знаю ли я разницу между
box-sizing: content-boxиborder-box? - Умею ли я центрировать элемент по горизонтали и вертикали?
- Знаю ли я, как работают медиавыражения (
@media) для адаптивного дизайна? - Могу ли я создать мобильный макет с использованием медиазапросов?
- Понимаю ли я разницу между
display: block,inline,inline-block? - Знаю ли я, как работает
display: noneи чем он отличается отvisibility: hidden? - Умею ли я использовать Flexbox для одномерной компоновки?
- Знаю ли я основные свойства Flexbox:
flex-direction,justify-content,align-items,flex-wrap? - Могу ли я создать карточную сетку с помощью Flexbox?
- Понимаю ли я, как работает CSS Grid?
- Знаю ли я свойства Grid:
grid-template-columns,grid-template-rows,grid-gap,grid-area? - Могу ли я создать сложный макет с помощью Grid?
- Умею ли я комбинировать Flexbox и Grid в одном проекте?
- Знаю ли я, как работают относительные (
em,rem,%) и абсолютные (px,pt) единицы измерения? - Понимаю ли я, когда использовать
remвместоem? - Умею ли я создавать и использовать CSS-переменные (кастомные свойства)?
- Знаю ли я, как изменить CSS-переменную через JavaScript?
- Могу ли я реализовать переключение темы (светлая/тёмная) с помощью переменных?
- Понимаю ли я, как работают переходы (
transition)? - Знаю ли я, как создавать анимации с помощью
@keyframes? - Умею ли я оптимизировать анимации для производительности (через
transformиopacity)? - Знаю ли я, как работают псевдоклассы
:nth-child,:first-of-type,:not()? - Могу ли я стилизовать формы: инпуты, кнопки, селекты?
- Понимаю ли я, как стилизовать состояния фокуса для доступности?
- Знаю ли я, как работают
z-indexи контексты наложения (stacking context)? - Умею ли я позиционировать элементы с помощью
position: static, relative, absolute, fixed, sticky? - Понимаю ли я, как работает
floatи почему его не рекомендуется использовать сегодня? - Знаю ли я, как подключать и использовать веб-шрифты через
@font-face? - Могу ли я обеспечить fallback-шрифты на случай недоступности основного?
- Понимаю ли я, как проверять контрастность цветов для доступности?
- Знаю ли я, как использовать
prefers-color-schemeдля автоматического выбора темы? - Умею ли я писать семантически корректные и переиспользуемые стили?
- Знаю ли я методологию BEM и могу ли применять её на практике?
- Понимаю ли я, что такое CSS-модули и зачем они нужны?
- Знаю ли я, как работают scoped-стили во Vue или Svelte?
- Могу ли я отладить стили с помощью DevTools в браузере?
- Умею ли я обосновать выбор CSS-подхода (обычный CSS, препроцессор, CSS-in-JS) для заданного проекта?