Вопросы:
- Основы CSS3. Полный курс: 3:20:01
- CSS Flexbox. Полный курс: 59:57
- CSS Grid. Полный курс: 57:21
- TailwindCSS. Полный курс: 1:55:04
Введение в CSS
- Что такое CSS? И для чего он используется?
- Что такое CSS-правило?
- Варианты добавление CSS стилей на страницу?
- Что такое блочная модель в CSS?
- Что такое поток документа?
Основы CSS
Использование margin и padding
Селекторы, псевдоэлементы и псевдоклассы
Селекторы
- Что такое селектор? И какие селекторы существуют?
- Что такое специфичность селектора? Как считать вес селектора?
- Разница между классом и идентификатором в CSS?
- Что такое перечисление селекторов?
Псевдоэлементы
- Что такое псевдоэлементы? И для чего они используются?
- Назовите псевдоэлементы для подсветки текста?
Псевдоклассы
Работа с изображениями
Позиционирование
- Типы позиционирования в CSS?
- Расскажите про свойство display в CSS?
- Расскажите про свойство position в CSS?
- Разница между display none и visibility hidden?
- Порядок наложения элементов в CSS (Stacking Order)?
- Что такое z-index? Как формируется контекст наложения?
- В каком случае лучше использовать translate() вместо абсолютного позиционирования?
CSS-свойства
- Какие CSS-свойства могут быть обработаны непосредственно через GPU? Что такое композитные слои и почему большое их количество может привести к аварийному завершению работы браузера на мобильных устройствах?
- Свойство background-size?
- Способы задания цвета в CSS?
- Для чего используется ключевое слово currentColor в CSS?
- В чём разница box-sizing: content-box от border-box?
- Расскажите о свойстве text-rendering?
- Расскажите о свойстве text-decoration-skip-ink?
- Расскажите о свойстве pointer-events?
- Расскажите о свойстве outline?
- Расскажите о свойстве scrollbar-gutter?
- Чем отличается opacity: 0 от opacity: 0.00001?
- Что такое Reflow и Repaint? Какие есть подводные камни в оптимизации производительности?
- Что такое overflow в CSS?
- Глобальные ключевые слова в CSS?
- Что такое CSS-атрибут (attr)?
- Какие фильтры есть в CSS?
Анимации
- Какие CSS-свойства используются для создания анимаций и плавных переходов?
- Как отследить прогресс окончание CSS @keyframes анимаций или плавных переходов, реализованных с помощью transition, в JS?
Флоаты
- Что такое плавающие элементы (floats)? Как они работают?
- Какие вы знаете методы запрета обтекания clearing и в каких случаях они применяются?
Система сеток
- Использовали ли вы систему сеток, и если да, то какую вы предпочитаете?
- Можно ли использовать CSS grid и flexbox вместе?
- Что такое flexbox?
- Какое свойство flexbox отвечает за направление flex items?
- Какое правило flexbox задает вывод flex items в одну строку или в несколько строк?
- Что означает сокращение flex-flow?
- Как можно гибко изменять размеры flex элементов?
- Сокращённое свойство flex?
- Расскажите про flex-grow, flex-shrink, flex-basis?
- Что такое CSS grid?
Оформление
- Разница между блочным и строчным (инлайновым) элементами?
- Разница между Reset.css и Normalize.css?
- Что такое вендорные префиксы? И для чего они используются
- Как поддерживать страницы в браузерах с ограниченными функциями?
- Как Вы обеспечиваете отображение страниц в старых ограниченных браузерах?
- Как с помощью CSS определить, поддерживается ли свойство в браузере?
- Принципы и подходы для обеспечения масштабируемости и поддерживаемости CSS-кода?
- Объясните разницу между единицами измерения px, em, rem
- Единицы измерений: vh,vw,vd (viewport width, viewport height, viewport dynamic)
- Приходилось ли вам использовать или реализовывать медиазапросы или вёрстку под мобильные устройства?
- Можете ли вы объяснить разницу между отзывчивым (responsive) сайтом и сайтом, сделанным по принципу mobile-first?
- Можете ли вы привести пример свойства media, отличного от screen?
- Через какие директивы реализуется респонзив?
- Как добавить шрифт в веб-приложение?
- Что такое методология БЭМ? Её плюсы и минусы?
- Какие еще методологии верстки вы знаете?
- CSS-modules и styled-components. Что это? Зачем это? Плюсы-минусы?
Препроцессоры и фреймворки
- Что такое CSS препроцессор? Что такое миксины?
- Какие CSS-препроцессоры вы знаете? Преимущества их использования?
- Какими CSS-фреймворками вы пользовались Что бы вы хотели в них изменить улучшить?
Остальные вопросы
- Почему не стоит использовать краткую запись свойств CSS?
- Как оптимизировать страницы для печати?
- Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
Практика
- Как исправлять специфичные проблемы со стилями для разных браузеров?
- Как разместить блок по центру экрана?
- Какими способами можно визуально скрыть элемент(оставив его доступным только для скринридера?)