Содержание курса

Учебник по Html/Css-верстке
Урок 1. Основные понятия HTML
Урок 2. Структура HTML-документа
Урок 3. Теги HTML и атрибуты
Задача 1. Добро пожаловать в мир HTML!
Задача 2. Список любимых фильмов
Задача 3. Выделяем слова
Задача 4. Добавляем ссылку на любимый сайт
Задача 5. Вставляем изображение

Урок 1. Текстовые теги HTML
Урок 2. Теги для изображений и мультимедиа
Урок 3. Теги для таблиц и списков
Урок 4. Формы и элементы управления формами
Урок 5. Атрибуты тегов, связанные с доступностью и SEO
Задача 1. Создаём HTML-страницу
Задача 2. Создание параграфа
Задача 3. Добавляем таблицы
Задача 4. Создаём форму отправки
Задача 5. Описываем изображение
Задача 6. Создание списка
Задача 7. Создание столбцов
Задача 8. Итоговая страница

Урок 1. Что такое CSS и как его подключить?
Урок 2. Синтаксис CSS
Урок 3. Селекторы CSS
Урок 4. Свойства CSS
Урок 5. Понимание CSS Box Model и тег DIV
Задача 1. Стилизация текста
Задача 2. Две кнопки
Задача 3. Стилизация блоков
Задача 4. Стилизация параграфов
Задача 5. Используем селекторы по атрибуту
Задача 6. Стилизация через псевдоклассы
Задача 7. Стилизация таблиц

Урок 1. Web-шрифты
Урок 2. Цвета и фоны
Урок 3. Размеры и отступы
Урок 4. Типографика
Урок 5. Позиционирование и блочная модель
Урок 6. Трансформации и анимации
Урок 7. Семантические теги HTML
Задача 1. Два текстовых блока
Задача 2. Моя любимая музыка
Задача 3. Раскраска элементов
Задача 4. Текст в рамке
Задача 5. Две колонки текста
Задача 6. Увеличение блока
Задача 7. Анимированный блок
Задача 8. Объединяем всё

Урок 1. Тег Meta и его атрибуты по типу viewport
Урок 2. Медиа-запросы
Урок 3. Гибкие и жесткие единицы измерения
Урок 4. Flexbox
Урок 5. Grid Layout
Урок 6. Адаптивные изображения и SVG
Урок 7. CSS-фреймворки и библиотеки
Задача 1. Масштабирование страницы
Задача 2. Изменение ширины экрана
Задача 3. Задаём гибкие и жесткие единицы измерения
Задача 4. Используем grid
Задача 5. Адаптивное изображение
Задача 6. Объединяем всё
Задача 7. Объединяем всё и больше

Урок 1. Рекомендации W3C
Урок 2. Нестандартные возможности CSS: фильтры
Урок 3. Переменные CSS
Урок 4. Дизайн стилей с учетом возможностей браузеров
Урок 5. Другие возможности CSS
Задача 1. Изменяем внешний вида изображения
Задача 2. Определение основных цветов и шрифтов
Задача 3. Семантический код

Учебник по Html/Css-верстке

Курс обновлен в апреле 2023 года.

Добро пожаловать на наш бесплатный курс по HTML и CSS! Курс состоит из текстовых уроков с примерами кода и практическими задачами, которые наш сайт будет автоматически проверять.

После завершения курса, мы запросим ваше ФИО и вы сможете бесплатно получить сертификат о прохождении обучения.

Пройдя данный самоучитель, вы освоите актуальные основы верстки с использованием HTML и CSS.
Курс поделен на разделы. Внутри каждого раздела сначала идут теоретические уроки, а потом практические задания с решениями. Проходите уроки и задания по очереди, ничего не пропуская.

Курс разделен на следующие темы:
1. Введение в HTML: история, применение и особенности языка. Основы создания структуры веб-страниц.
2. Разметка контента: текстовые элементы, списки, ссылки, изображения и мультимедиа. Создание и структура таблиц и форм.
3. Введение в CSS: история, применение и особенности языка. Селекторы, правила и подключение стилей к HTML-документам.
4. Оформление контента: стилизация текста, шрифтов, цвета и фона. Работа с блочной моделью, позиционированием и гибкой версткой.
5. Адаптивный дизайн: применение медиазапросов, отзывчивые изображения и создание мобильной верстки.
6. Дополнительные возможности: продвинутые техники работы с CSS, анимации, преобразования и переходы.