🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

  • читать все 33 занятия, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Программа курса для самостоятельного обучения

HTML и CSS с нуля: создаём свои сайты

33 занятия по 45–60 минут · удобный темп — одно занятие в неделю

1. О курсе

Уровень: С нуля — опыт программирования не нужен

Разработчик курса: Русский техно холдинг (rth.su)

Цель: Научиться самостоятельно создавать веб-страницы и мини-сайты с помощью HTML и CSS, развить проектное мышление, аккуратность и креативность.

Задачи:

  • освоить структуру HTML-документа и основные теги;
  • научиться подключать и использовать CSS;
  • познакомиться с блочной моделью, Flexbox, Grid и адаптивностью;
  • создать итоговый мини-сайт из 2–4 страниц;
  • научиться рассказывать о своей работе.

Как проходит одно занятие:

  • 5 мин — разминка: вспомни прошлое занятие
  • 10–15 мин — слайды и объяснение
  • 25–30 мин — практика в редакторе
  • 5 мин — проверь себя

Результаты. К концу курса ты сможешь:

  • создать HTML-страницу с заголовками, текстом, списками, ссылками, изображениями, таблицами и формой;
  • подключить внешний CSS-файл;
  • использовать классы, id, Flexbox, Grid, псевдоклассы;
  • сделать простую адаптивную верстку;
  • собрать мини-сайт и презентовать его.

2. Структура курса

МодульЗанятияСодержание
Модуль 1 Введение и HTML 1–12 Знакомство с вебом, редактором, основными тегами HTML
Модуль 2 CSS и оформление 13–22 Цвета, шрифты, блочная модель, Flexbox, Grid, адаптивность
Модуль 3 Проектная работа 23–33 Многостраничный сайт, дизайн, доработка, презентация

3. Учебно-тематический план на 33 занятия

Тема Что изучаем Практика / результат
Модуль 1. Введение и HTML
1 Вводное занятие 🎬 Что такое сайт, HTML, CSS, браузер. Как работает веб-страница Смотрим примеры сайтов, создаём папку проекта, изучаем правила безопасности
2 Инструменты и первая страница 🎬 Установка редактора VS Code, файл index.html, браузер Пишем первую страницу «Привет, мир!»
3 Структура HTML-документа 🎬 <!DOCTYPE html>, html, head, title, body, заголовки h1–h6 Страница «О себе» с заголовками
4 Текст и оформление 🎬 p, br, hr, strong, em, комментарии Оформляем текст о любимом занятии
5 Списки 🎬 ul, ol, li, вложенные списки Список любимых книг, игр или фильмов
6 Ссылки 🎬 a, href, target, якоря Меню ссылок на внешние сайты и разделы страницы
7 Изображения 🎬 img, src, alt, размеры, папка images Галерея из 3 изображений
8 Таблицы 🎬 table, tr, td, th, caption Таблица «Расписание уроков»
9 Семантическая структура 🎬 header, nav, main, section, article, footer Каркас страницы «Мой сайт»
10 Формы 🎬 form, input, label, textarea, select, button Анкета «Мои интересы»
11 Мультимедиа 🎬 video, audio, iframe Вставляем видео или карту
12 Повторение HTML 🎬 Обобщение тегов Мини-проект «Моя страница увлечений» только на HTML
Модуль 2. CSS и оформление
13 Введение в CSS 🎬 Способы подключения CSS, селекторы тегов, цвет Раскрашиваем страницу
14 Текст и шрифты 🎬 font-family, font-size, font-weight, text-align, line-height, Google Fonts Оформляем типографику
15 Блочная модель 🎬 width, height, padding, border, margin, background Карточка с отступами и рамкой
16 Классы и id 🎬 .class, #id, каскад, наследование Стилизуем разные блоки
17 Flexbox 🎬 display: flex, justify-content, align-items, gap Меню и карточки в ряд
18 Позиционирование 🎬 position, z-index Бейдж или подпись на карточке
19 Ссылки и кнопки 🎬 :hover, :active, :focus Стильное меню и кнопки
20 Фоны и эффекты 🎬 Градиенты, box-shadow, border-radius Карточки с эффектами
21 CSS Grid 🎬 display: grid, колонки, строки, gap Галерея работ
22 Адаптивность 🎬 media queries, viewport, относительные единицы Мобильная версия страницы
Модуль 3. Проектная работа
23 Повторение CSS 🎬 Соединение HTML + CSS Макет страницы по образцу
24 Многостраничность 🎬 Ссылки между страницами, навигация Создаём 3 связанные страницы
25 Планирование проекта 🎬 Wireframe, цвета, шрифты, контент План и эскиз итогового проекта
26 Проект: главная страница 🎬 Верстка главной страницы Главная страница проекта
27 Проект: вторая страница 🎬 Добавление страницы, навигация Вторая страница сайта
28 Проект: стилизация 🎬 Flexbox, Grid, оформление Улучшаем дизайн
29 Проект: адаптивность 🎬 Медиазапросы Делаем мобильную версию
30 Проект: интерактив 🎬 Форма, галерея или контакты Добавляем полезный блок
31 Проект: доработка 🎬 Чек-лист, ошибки, ссылки, alt Проверяем и исправляем сайт
32 Презентация проекта 🎬 Презентация, обратная связь Рассказ близким или видео-экскурсия по сайту
33 Итоги 🎬 Рефлексия, что изучать дальше Мини-тест, рефлексия, план дальнейшего обучения

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

Темы на выбор

  • «Моё хобби»
  • «Моя любимая игра/фильм/книга»
  • «Моя школа»
  • «Мой город»
  • «Мой питомец»
  • «Мой личный сайт»

Требования

  • 2–4 страницы
  • Семантическая структура (header, nav, main, footer)
  • Подключён внешний CSS-файл
  • Все изображения с alt
  • Навигация между страницами
  • Использован Flexbox или Grid
  • Простая адаптивность (media queries)
  • Аккуратность и читаемость кода

Критерии оценивания

  1. Содержание и полнота
  2. Структура HTML
  3. Оформление CSS
  4. Адаптивность
  5. Аккуратность кода
  6. Презентация проекта

5. Советы для самостоятельного обучения

  • Занимайся регулярно: 45 минут раз в неделю полезнее, чем 5 часов раз в месяц.
  • Начинай занятие со слайдов — первый из них показывает, что получится в конце.
  • Не копируй код примеров, а перепечатывай руками: так теги и свойства запоминаются быстрее.
  • Застрял(а) — открой подсказку «Если трудно» и шпаргалку, сделай перерыв и вернись.
  • Хочется большего — выполняй задания со звёздочкой: анимация, CSS-переменные, тёмная тема.
  • После каждого модуля покажи свои работы близким и спроси, что им понравилось.
  • Помни о безопасности: не публикуй личные данные и уважай авторские права на картинки.
  • Задания «По желанию» — необязательные: подобрать текст, картинки, повторить теги.
  • Зарегистрируйся: без входа прогресс, работы и результаты теста не сохраняются.

6. Что доступно без входа в аккаунт

✅ Без входа можно

  • читать все 33 занятия, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.