Выборка

• Выборка элементов (селекторы)
• Селекторы (выборка) по атрибутам
• Выборка указанного количества элементов
• Псевдоклассы и псевдоэлемены
• Разница между «nth-child» и «nth-of-type»
• Чем классы отличаются от id
• Группировать выборку (is, where)
• Вложенность CSS
• Переопределение (вес, специфичность)
• Выбирать элемент, если в нём есть другой указанный элемент (:has)

Текст

• Сделать буквы заглавными или маленькими
• Сделать первую букву заглавной
• Разделить контент на колонки
• Подключить шрифт
• Оформление цитаты (q, cite, blockquote)
• Сделать перенос длинного текста на следующую строку
• 3 эффекта при наведении на ссылку
• Градиентный текст
• 2 эффекта текста
• Добавить троеточия для обрезанного текста

Картинки

• Вставить картинку
• Сделать картинки одинакового размера
• 5 видов градиента
• 4 видов границ (border)
• 4 видов тени
• Спрайт
• Сделать картинку чёрно-белой
• Размыть картинку (текст)
• Необычные рамки для картинок (маска)
• Растянуть картинку на весь блок
• Несколько картинок на фоне
• Изменить прозрачность объекта

Вёрстка

• Вывод нескольких элементов в ряд (Flexbox)
• Вывод нескольких элементов в ряд (Grid)
• Растянуть элемент на несколько колонок или строк
• Вывести элементы в одну строчку
• Хлебные крошки (Breadcrumbs)
• Липкое позиционирование (position: sticky)
• Вертикальное выравнивание (по середине)
• Выровнять fixed по середине
• Порядок элементов (order)
• Единицы измерения
• 8 советов вёрстки и настройки email-рассылок
• Переместить объект, не влияя на вёрстку
• Пример использования «box-decoration-break»
• Добавить текст или элемент (before, after)
• Прижать футер к низу сайта
• Различия между float и flex

Форма

• Оформить placeholder
• Сделать элементы форм обязательными для заполнения
• Группировка элементов форм (fieldset)
• Какую камеру включать по умолчанию
• Автозаполнение (datalist)
• Автоматически выбирать элемент формы при загрузке страницы
• Всплывающий плейсхоледр
• Выбирать только указанные файлы через форму
• Загрузить все файлы из указанной папки
• Оформить чекбокс
• Передать параметры в массиве через форму
• Советы по использованию форм

Списки

• Типы списков
• Нумерация списка в обратном порядке
• Начало нумерации для списков

Анимация

• Анимировать объект
• Анимация поворачивающейся карты
• Слегка увеличить объект при наведении
• Эффект тряски
• Непрерывная анимация (бесконечное повторение анимации)
• Пошаговая анимация
• Вращающийся объект (текст, картинка)
• Вращение объекта вокруг указанной оси

Браузер

• Сброс стилей HTML-элементов (CSS Reset)
• Иконка сайта (Favicon)
• Мета-тег viewport
• Стили в зависимости от размеров экрана (Media Queries)
• Задать цвет выделения
• Отменить выделение текста
• Заранее загрузить картинку / видео (preload)
• Тёмная, светлая тема
• Звонить по телефону при нажатии на ссылку
• Стили для печати
• Стили в полноэкранном режиме
• Изменить курсор мыши
• Выполнять код, когда загрузится объекта (картинка, видео)
• Советы для мультиязычных сайтов
• Как определить, что страница открыта через переводчик
• Обновить страницу через указанный промежуток времени
• Открывать ссылку на новой вкладке

Медиа

• Вывести видео
• Автовоспроизведение видео
• Указать начало воспроизведения видео
• Субтитры

Прокрутка

• Плавная прокрутка к элементу
• Прокручивать только в дочернем элементе
• Прокручивать весь блок (слайдер)

Эффекты

• Тени
• Рамки для картинок
• Эффект падающего снега

Доступность

• Доступность контента (WAI-ARIA)
• Скрыть элемент в режиме чтения или скринридерах
• Скип-линк (Skip link)
• Сообщение после нажатия на кнопку

Разное

• Элемент <!DOCTYPE>
• Переменные
• Тип переменной (@property)
• Раскрывающийся блок (details, summary)
• Игры для изучения CSS
• 5 советов для работы с Emmet
• Микроразметки для статей, блога, новости
• Saas
• LESS
• 18 ошибок или советов HTML и CSS

Устаревшее

• Clearfix (устаревшее)
• Выполнить CSS для указанного браузера (хаки)