🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?
✅ Без входа можно
- читать все 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)
- Аккуратность и читаемость кода
Критерии оценивания
- Содержание и полнота
- Структура HTML
- Оформление CSS
- Адаптивность
- Аккуратность кода
- Презентация проекта
5. Советы для самостоятельного обучения
- Занимайся регулярно: 45 минут раз в неделю полезнее, чем 5 часов раз в месяц.
- Начинай занятие со слайдов — первый из них показывает, что получится в конце.
- Не копируй код примеров, а перепечатывай руками: так теги и свойства запоминаются быстрее.
- Застрял(а) — открой подсказку «Если трудно» и шпаргалку, сделай перерыв и вернись.
- Хочется большего — выполняй задания со звёздочкой: анимация, CSS-переменные, тёмная тема.
- После каждого модуля покажи свои работы близким и спроси, что им понравилось.
- Помни о безопасности: не публикуй личные данные и уважай авторские права на картинки.
- Задания «По желанию» — необязательные: подобрать текст, картинки, повторить теги.
- Зарегистрируйся: без входа прогресс, работы и результаты теста не сохраняются.
6. Что доступно без входа в аккаунт
✅ Без входа можно
- читать все 33 занятия, смотреть слайды и шпаргалку;
- пробовать код в редакторе и песочнице.
⛔ Без входа нельзя
- сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
- отмечать пройденные занятия и видеть свой прогресс;
- выбрать тему итогового проекта и отмечать чек-лист;
- отправить итоговый тест и сохранить результат.