HTML и CSSВыборка
- Выборка элементов (селекторы)
- Селекторы (выборка) по атрибутам
- Выборка указанного количества элементов
- Псевдоклассы и псевдоэлемены
- Разница между «nth-child» и «nth-of-type»
- Группировать выборку (is, where)
- Вложенность CSS
- Переопределение (вес, специфичность)
Текст
- Сделать буквы заглавными или маленькими
- Сделать первую букву заглавной
- Разделить контент на колонки
- Подключить шрифт
- Оформление цитаты (q, cite, blockquote)
- Сделать перенос длинного текста на следующую строку
- 3 эффекта при наведении на ссылку
- Градиентный текст
- 2 эффекта текста
- Добавить троеточия для обрезанного текста
Картинки
- Вставить картинку
- Сделать картинки одинакового размера
- 5 видов градиента
- 4 видов границ (border)
- 4 видов тени
- Спрайт
- Сделать картинку чёрно-белой
- Размыть картинку (текст)
- Растянуть картинку на весь блок
- Несколько картинок на фоне
- Изменить прозрачность объекта
Вёрстка
- Вывод нескольких элементов в ряд (Flexbox)
- Вывод нескольких элементов в ряд (Grid)
- Первый элемент занимает всю строчку
- Хлебные крошки (Breadcrumbs)
- Липкое позиционирование (position: sticky)
- Вертикальное выравнивание
- Порядок элементов (order)
- Единицы измерения
- 8 советов вёрстки и настройки email-рассылок
- Переместить объект, не влияя на вёрстку
- Пример использования «box-decoration-break»
- Добавить текст или элемент (before, after)
- Прижать футер к низу сайта
- Выровнять дочерние элементы по ширине
- Различия между float и flex
Форма
- Оформить placeholder
- Сделать элементы форм обязательными для заполнения
- Группировка элементов форм (fieldset)
- Какую камеру включать по умолчанию
- Автозаполнение
- Автоматически выбирать элемент формы при загрузке страницы
- Всплывающий плейсхоледр
- Выбирать только указанные файлы через форму
- Загрузить все файлы из указанной папки
- Оформить чекбокс
- Передать параметры в массиве через форму
- Советы по использованию форм
Списки
Анимация
- Анимировать объект
- Анимация поворачивающейся карты
- Слегка увеличить объект при наведении
- Эффект тряски
- Непрерывная анимация (бесконечное повторение анимации)
- Пошаговая анимация
- Вращающийся объект (текст, картинка)
- Вращение объекта вокруг указанной оси
Браузер
- Сброс стилей HTML-элементов (CSS Reset)
- Иконка сайта (Favicon)
- Мета-тег viewport
- Стили в зависимости от размеров экрана (Media Queries)
- Задать цвет выделения
- Отменить выделение текста
- Плавная прокрутка к элементу
- Заранее загрузить картинку / видео (preload)
- Тёмная, светлая тема
- Звонить по телефону при нажатии на ссылку
- Стили для печати
- Стили в полноэкранном режиме
- Изменить курсор мыши
- Советы для мультиязычных сайтов
- Обновить страницу через указанный промежуток времени
Медиа
Эффекты
Доступность
- Доступность контента (WAI-ARIA)
- Скрыть элемент в режиме чтения или скринридерах
- Скип-линк (Skip link)
- Сообщение после нажатия на кнопку
Разное
- Элемент <!DOCTYPE>
- Переменные
- Тип переменной (@property)
- Игры для изучения CSS
- 5 советов для работы с Emmet
- Микроразметки для статей, блога, новости
- Saas
- LESS
- 18 ошибок или советов HTML и CSS
Устаревшее