О чем этот курс
Этот практический курс с нуля научит вас создавать веб-страницы на HTML и CSS. Вы разберетесь в структуре документа, семантической разметке и основных стилях, поймете каскад и специфичность, научитесь работать с шрифтами, сетками, позиционированием и медиа-запросами. В конце вы соберете адаптивную страницу сайта, готовую к публикации.
Мы идем от простого к сложному: сначала — фундамент HTML, затем — мощные инструменты CSS, после — адаптивность и лучшие практики. Каждая тема подкреплена мини-практикой, а в финале вас ждет цельный проект. Курс идеально подходит абсолютным новичкам, не требует опыта программирования.
flowchart TB
S["Start"] --> H1["HTML структура"]
subgraph HTML
H1["HTML структура"] --> H2["Семантика"]
H2 --> H3["Контент
(текст/ссылки/изображения)"]
H3 --> H4["Списки/Таблицы"]
H4 --> H5["Формы"]
H5 --> H6["Мультимедиа/Доступность"]
end
H6 --> C1["CSS основы
(селекторы/каскад/специфичность)"]
subgraph CSS
C1 --> C2["Box model/Шрифты"]
C2 --> C3["Flexbox"]
C3 --> C4["Grid"]
C4 --> C5["Позиционирование/z-index"]
C5 --> C6["Адаптивная верстка"]
end
C6 --> E["Итоговый проект"]
style C1 fill:lightgreen,stroke:green,color:black
style C3 fill:lightgreen,stroke:green,color:black
style C4 fill:lightgreen,stroke:green,color:black
style C6 fill:lightgreen,stroke:green,color:black
Пример минимального HTML-документа, с которого вы начнете:
Мой первый сайт
Привет, веб!
Это мой первый адаптивный сайт.
И небольшой фрагмент CSS, демонстрирующий шрифты, переменные, каскад и медиа-запросы:
:root {
--accent: #4f46e5;
}
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
margin: 0;
}
header {
background: var(--accent);
color: #fff;
padding: 16px;
}
nav a {
color: inherit;
text-decoration: none;
margin-right: 12px;
}
@media (max-width: 600px) {
nav a { display: block; margin: 8px 0; }
}В процессе обучения вы будете писать код в редакторе, отлаживать верстку в инструментах разработчика и применять резиновую, адаптивную и отзывчивую (responsive) верстку. Особое внимание уделим доступности (a11y) и семантике, чтобы сайты были понятны людям и поисковым системам.
Финальный проект — полностью адаптивная landing-страница с хедером, героем, карточками, сеткой и формой обратной связи. Вы получите структуру макета, чек-лист качества и рекомендации по публикации. 
Оглавление
-
HTML-скелет: DOCTYPE, html, head, body
-
Собери структуру HTML-документа
-
Где должен находиться тег title?
-
Семантика страницы и базовый текст: header, main, nav, section, article, footer
-
Выберите семантические теги
-
Разметьте новостной блок
-
Ссылки и изображения: a, href, rel, target; img, src, alt
-
Абсолютный vs относительный путь
-
Мини-страница «О себе» с навигацией и фото
-
Почему alt в img важен?
-
Семантическая разметка: header, main, section, article, footer
-
Текст, ссылки и изображения: правильная работа с контентом
-
Списки и таблицы: когда и как применять
-
Формы и базовая валидация
-
Мультимедиа и основы доступности (a11y)
-
CSS: селекторы, каскад и специфичность
-
Шрифты, единицы измерения и box model
-
Flexbox: современная работа с одномерными сетками
-
CSS Grid: мощные двумерные сетки
-
Позиционирование, фон, тени и z-index
-
Адаптивная верстка: медиа-запросы, fluid-layout и responsive images
-
Практика и итоговый проект: адаптивная страница сайта
-
Сертификат
Похожие курсы
Другие курсы по близким темам
