Курс по HTML и CSS: обучение верстке с помощью HTML и CSS для начинающих

В этом курсе вы познакомитесь с основами верстки с помощью HTML и CSS. Используя HTML научитесь размечать данные, работать с типографикой, выводить аудио, видео и фотографии на страницу, а так же научитесь создавать формы для взаимодействия с пользователем. Для стилизации элементов изучите CSS — каскадные таблицы стилей, которые позволяют оформлять содержимое страницы в соответствии с описанными правилами

18 часов153 студента72 урока с практикой в браузере

Начать обучение Зарегистрироваться

Основы разметки HTML

Для стандартизации вывода текста внутри браузера был разработан язык разметки HTML, описывающий правила оформления текстовых данных. Несмотря на долгое развитие языка, базовые концепции не поменялись даже спустя более 20 лет. В первом модуле разберём основные концепции HTML: тег, атрибут, вложенность тегов и научимся базовым возможностям по разметке текста с помощью параграфов

Введение в CSS

Cascading Style Sheets (CSS) — каскадные таблицы стилей, которые позволяют оформлять содержимое страницы в соответствии с описанными правилами. Стили текста, расположение блоков на странице, анимация — всё это описывается с помощью каскадных таблиц стилей

Верстка текста

HTML предоставляет десятки правил для работы с текстом: от создания блока текста, до сложных таблиц и вложенных списков. Корректная разметка текста — один из ключевых навыков при работе с сайтом. А гибко настроить внешний вид текста возможно с помощью языка CSS. В этом модуле вы научитесь размечать и стилизовать текстовые данные на странице

Медиаэлементы

HTML разметка позволяет добавлять на страницы изображения, а в последнем стандарте HTML5 появилась возможность работы с аудио и видео контентом. В этом модуле вы научитесь добавлять медиаэлементы и управлять ими с помощью атрибутов

Блочные элементы

При работе с CSS используют не только оформление текстов, но и оформление блоков. В этом модуле вы изучите, как добавлять внутренние и внешние отступы, границы, фон. Узнаете о том, что такое блочная модель и как свойства влияют на конечные размеры элементы

Начните прямо сейчас

Регистрация

Структура HTML документа

Каждая HTML страница состоит из нескольких общих блоков, в которых описывается набор данных: метатеги, заголовок страницы, контент. На каждую часть в стандарте HTML есть свои блоки и конструкции.

Расположение элементов с помощью Flex

Одна из задач верстальщика — позиционирование элементов на странице. То есть расположение элементов в соответствии с макетом. Это позволяет располагать элементы справа или слева от других блоков, создавать галереи. В этом модуле рассмотрим основы модуля Flex, который позволит позиционировать элементы на странице

Семантические элементы HTML5

В HTML5 появилось множество новых тегов для семантической разметки. Они призваны помочь браузерам корректнее обрабатывать документ, использовать «режим чтения». Поисковые системы также будут благодарны вам за то, что поможете им чётко видеть структуру вашего сайта. В данном модуле разметим типичную веб-страницу, используя новые теги HTML5

Формы

Одним из важнейших элементов в HTML являются формы. Они позволяют взаимодействовать пользователю с сайтом. Поиск, обратные звонки, анкеты — всё это создаётся с помощью форм.

Разное

Верстка — большая тема, которую сложно описать в рамках одного курса. В этом модуле вы изучите несколько тем, которые не вошли в прошлые модули, но используются разработчиками при создании страниц. Узнаете, как сделать базовые анимации, как найти ошибки в HTML, как правильно указать цвет и зачем нужны переменные в CSS

Готовы попробовать?

Регистрация не требуется

Демо урок