Практика по HTML и CSS

Аудио и видео

• Добавление аудио
• Автовоспроизведение аудио
• Зацикливание аудио
• Элемент <source>
• Добавление видео
• Размеры видеоплеера
• Автовоспроизведение видео
• Обложка видео
• Зацикливание видео

Изображения

• Абсолютный адрес
• Относительный адрес
• Альтернативный текст
• Размеры картинки
• Ширина картинок
• Элемент <figure>
• Подпись под картинкой
• Подпись перед картинкой
• Картинки друг под другом
• Ширина картинки
• Плавающая ширина картинки
• Круглое изображение
• Выравнивание картинки
• Рамка вокруг картинок

Многоколоночная вёрстка

• Две колонки
• Три колонки
• Заголовок в колонках
• Ширина колонок
• Расстояние между колонками
• Линия между колонками
• Пунктир между колонками
• Блоки в колонках
• Изображения в колонках
• Запрет переноса в колонках

Основы CSS

• Подключение CSS-файла
• Ошибка в <link>
• Добавление стиля
• Атрибут style
• Импорт шрифта
• Комментарии в CSS
• Селектор элемента
• Класс
• Добавление класса
• Идентификатор
• Добавление идентификатора
• Селектор атрибута

Переходы и анимация

• Плавное изменение цвета
• Поворот на 360° при наведении
• Масштабирование картинки при наведении
• Масштабирование картинки при наведении 2
• Прозрачность при наведении
• Мигающий текст
• Сердце

Разделы веб-страницы

• Шапка веб-страницы
• Подвал веб-страницы
• Копирайт
• Элемент <section>
• Шапка раздела
• Навигация
• Элемент <aside>
• Элемент <main>
• Создание статьи
• Дата публикации
• Комментарии

Списки

• Маркированный список
• Нумерованный список
• Римские числа
• Обратный список
• Буквенная нумерация
• Список описаний
• Список с 11
• Атрибут value
• Вложенный список
• Квадратные маркеры
• Прячем маркеры
• Символ в качестве маркера
• Рисунок в качестве маркера
• Горизонтальный список
• Римская нумерация
• Греческая нумерация
• Расстояние от маркера до текста
• Цвет списка
• Цвет маркеров
• Отступы в списке

Ссылки

• Создание ссылки
• Ссылка на Google
• Ссылка для скачивания
• Атрибут target
• Ссылка на email
• Ссылка на телефон
• Создание якоря
• Ссылка на якорь
• Картинка как ссылка
• Убираем подчёркивание
• Цвет ссылок
• Цвет фона у ссылок
• Активная ссылка
• Посещённая ссылка
• Стиль ссылки при наведении
• Ссылки без подчёркивания
• Пунктирное подчёркивание ссылок
• Двойное подчёркивание ссылок
• Рамка вокруг ссылки

Таблицы

• Создание таблицы
• Строки таблицы
• Таблица 2х2
• Картинки в таблице
• Заголовок таблицы
• Объединение колонок
• Объединение строк
• Ячейка заголовка
• Тело таблицы
• Подвал таблицы
• Ширина таблицы
• Выравнивание заголовка таблицы
• Выравнивание таблицы
• Цвет фона таблицы
• Зебра в таблице
• Поля в ячейках
• Расстояние между ячейками
• Рамка вокруг таблицы
• Рамка вокруг ячеек
• Линии в таблице
• Горизонтальное выравнивание в ячейках

Текст

• Элемент <pre>
• Абзацы
• Переносы строк
• Заголовок первого уровня
• Заголовки
• TEX
• Площадь круга
• Озон
• Важный текст
• Элемент <mark>
• Рыжая лиса
• Шрифт на веб-странице
• Шрифт иллюстрации
• Шрифт заголовка
• Свой шрифт
• Размер текста в пикселях
• Размер заголовка в em
• Размер заголовка в rem
• Цвет основного текста
• Цвет заголовка
• Выворотка заголовка
• Курсивный текст
• Жирный текст
• Нормальная жирность заголовка
• Выступающий инициал

Трансформация

• Поворот на 90°
• Отражение по горизонтали
• Поворот на -90°
• Отражение по вертикали
• Отражение картинки
• Сдвигаем вниз
• Сдвигаем вверх
• Наклон картинки
• Точка трансформации
• Перспектива
• Масштабирование кнопки
• Сдвиг при наведении
• Масштабирование картинки при наведении
• Масштабирование картинки при наведении 2

Флексы

• Создание флексов
• Горизонтальное меню
• Кролики по горизонтали
• Кролики по вертикали
• Кролики по вертикали 2
• Карточки с фотографиями
• Карточки с фотографиями 2
• Кролики по горизонтали 2
• Кролики по центру
• Кролики по горизонтали 3
• Кролики по горизонтали 4
• Кролики по горизонтали 5
• Кролик в центре
• Кролик внизу
• Кролик внизу 2
• Кролик внизу 3
• Серый кролик
• Серый кролик 2
• Коричневый кролик
• Растягивание карточки

Фон

• Цвет по названию
• Шестнадцатеричный цвет
• Сокращённое значение цвета
• Цвет в RGB
• Фоновая картинка
• Полупрозрачный фон
• Повторение фона по горизонтали
• Повторение фона по вертикали
• Запрет повторения фона
• Положение фона
• Фиксация фона
• Масштабирование фона
• Масштабирование фона 2
• Масштабирование фона 3

Формы

• Создание формы
• Атрибут method
• Атрибут action
• Текстовое поле
• Ширина поля
• Длина текста
• Подсказка
• Блокировка поля
• Обязательное поле
• Вывод текста
• Элемент <datalist>
• Поле для пароля
• Размеры <textarea>
• Элемент <button>
• Многострочный текст
• Картинка в <button>
• Отправка формы
• Очистка формы
• Переключатели
• Выбор переключателя
• Флажки
• Выбор флажка
• Поле со списком
• Раскрывающийся список
• Блокировка списка
• Блокировка пункта списка
• Список множественного выбора
• Выбор пунктов списка
• Поиск по сайту

Фреймы

• Создание фрейма
• Размеры фрейма
• Картинка во фрейме
• Имя фрейма
• Вставка JSFiddle
• Ссылка во фрейм
• Ссылки во фрейме

Элементы HTML

• Привет, мир!
• Открывающие и закрывающие теги
• Открывающие теги
• Закрывающие теги
• Вложение элементов
• Добавление комментария
• Доктайп
• Структура HTML-кода
• Кодировка документа
• Добавление элемента
• Содержимое элемента
• Атрибут lang
• Выделение текста
• Обязательный атрибут
• Порядок тегов
• Ошибки в абзацах
• Пересечение тегов
• Последовательность элементов
• Закрывающие теги списка
• Закрывающие теги таблицы
• Обязательные элементы
• Лишние атрибуты