Выборка

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

Текст

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

Картинки

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

Вёрстка

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

Форма

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

Списки

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

Анимация

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

Браузер

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

Медиа

• Указать начало воспроизведения в теге <video>
• Субтитры

Эффекты

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

Разное

• 15 ошибок или советов HTML и CSS
• Элемент <!DOCTYPE>
• Переменные
• Доступность контента (WAI-ARIA)
• Рисунки на CSS
• 5 советов для работы с Emmet
• Игры для изучения CSS
• Микроразметки для статей, блога, новости
• Saas
• LESS

Устаревшее

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