Основы HTML и CSS

Создайте свой первый сайт с нуля

О курсе

Этот курс — ваш первый шаг в веб-разработку. Вы научитесь создавать страницы с помощью HTML и оформлять их с помощью CSS. Курс охватывает всё необходимое для вёрстки реальных сайтов: от базовых тегов до адаптивных макетов с Flexbox и Grid. В конце курса вы соберёте полноценную лендинг-страницу.

Целевая аудитория Абсолютные новички, желающие стать веб-разработчиками

Формат 6 модулей, вёрстка в браузере, без установки

Итог Вёрстка лендинга с нуля

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

Первый модуль знакомит вас с основами HTML: вы узнаете, как браузер читает и отображает страницы, освоите базовые теги и научитесь создавать корректную структуру HTML-документа.

Ключевые темы

Что такое HTML и как работает браузер
DOCTYPE, html, head, body
Мета-теги: charset, viewport, title
Заголовки h1–h6 и параграфы
Атрибуты тегов
Комментарии в HTML

Текст, ссылки и медиа

В этом модуле вы научитесь работать с текстовым содержимым страницы: форматировать текст, добавлять изображения, создавать ссылки и таблицы — всё, что нужно для наполненной контентом страницы.

Ключевые темы

Форматирование текста: strong, em, mark, del
Ссылки: href, target, типы ссылок
Изображения: img, alt, width, height
Списки: ul, ol, li, dl
Таблицы: table, tr, td, th
Специальные символы HTML

Семантическая разметка и формы

Этот модуль посвящён правильной структуре страницы и созданию интерактивных форм. Вы узнаете, почему семантика важна для поисковиков и доступности, и научитесь создавать формы с валидацией.

Ключевые темы

Семантические теги: header, nav, main, section, article, footer
Зачем нужна семантика (SEO, доступность)
Формы: form, input, textarea, select, button
Типы полей: text, email, password, checkbox, radio
Атрибуты валидации: required, pattern, min/max
Атрибуты name и label

Введение в CSS

Модуль знакомит с основами CSS: способами подключения стилей, механизмами работы каскада и специфичности, а также базовыми свойствами для оформления текста, цветов и отступов.

Ключевые темы

Подключение CSS: inline, style, внешний файл
Селекторы: тег, класс, id, атрибут, псевдоклассы
Каскад и специфичность
Цвета, шрифты, размеры (px, em, rem, %)
Фоны и рамки
CSS-переменные (custom properties)

Блочная модель, Flexbox и Grid

Здесь вы освоите ключевые инструменты вёрстки: поймёте, как работает блочная модель, и научитесь создавать сложные макеты с помощью современных технологий Flexbox и CSS Grid.

Ключевые темы

Box model: margin, padding, border, content
display: block, inline, inline-block
Flexbox: контейнер и элементы, основные свойства
CSS Grid: строки, колонки, areas
Позиционирование: static, relative, absolute, fixed
overflow и z-index

Адаптивный дизайн

Финальный модуль посвящён созданию сайтов, которые одинаково хорошо выглядят на любом устройстве. Вы освоите медиазапросы, относительные единицы и познакомитесь с CSS-анимациями.

Ключевые темы

Что такое адаптивный дизайн и mobile-first
Медиазапросы: @media, breakpoints
Адаптивные изображения: max-width, srcset
Относительные единицы: %, vw, vh
CSS-анимации и transitions
Инструменты разработчика в браузере (DevTools)

Итоговый проект

Сверстать лендинг-страницу для вымышленного продукта или услуги: шапка с навигацией, hero-секция, блок с карточками преимуществ, форма обратной связи и подвал. Страница должна корректно отображаться на всех устройствах.

Задания на портале Вернуться на главную