🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?
✅ Без входа можно
- читать все занятия обоих курсов, смотреть слайды и шпаргалку;
- пробовать код в редакторе и песочнице.
⛔ Без входа нельзя
- сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
- отмечать пройденные занятия и видеть свой прогресс;
- выбрать тему итогового проекта и отмечать чек-лист;
- отправить итоговый тест и сохранить результат.
О курсах
Два бесплатных курса для начинающих: компьютер с нуля и вёрстка сайтов на HTML и CSS. Ниже — цели, структура и планы занятий каждого.
1. Курсы сайта
| Курс | Занятий | О чём |
|---|---|---|
| Первые шаги за компьютером | 7 | Включаем компьютер, осваиваем мышь и клавиатуру, находим файлы и открываем сайты |
| HTML и CSS с нуля: создаём свои сайты | 33 | От первого тега до собственного многостраничного сайта |
2. О курсе «HTML и CSS с нуля: создаём свои сайты»
Уровень: С нуля — опыт программирования не нужен
Разработчик курса: Макаров И.Е. совместно с Русский техно холдинг (rth.su)
Цель: Научиться самостоятельно создавать веб-страницы и мини-сайты с помощью HTML и CSS, развить проектное мышление, аккуратность и креативность.
Задачи:
- освоить структуру HTML-документа и основные теги;
- научиться подключать и использовать CSS;
- познакомиться с блочной моделью, Flexbox, Grid и адаптивностью;
- создать итоговый мини-сайт из 2–4 страниц;
- научиться рассказывать о своей работе.
Как проходит одно занятие:
- 5 мин — разминка: вспомни прошлое занятие
- 10–15 мин — слайды и объяснение
- 25–30 мин — практика в редакторе
- 5 мин — проверь себя
Результаты. К концу курса ты сможешь:
- создать HTML-страницу с заголовками, текстом, списками, ссылками, изображениями, таблицами и формой;
- подключить внешний CSS-файл;
- использовать классы, id, Flexbox, Grid, псевдоклассы;
- сделать простую адаптивную верстку;
- собрать мини-сайт и презентовать его.
3. Структура курса
| Модуль | Занятия | Содержание |
|---|---|---|
| Модуль 1 Введение и HTML | 1.1–1.12 | Знакомство с вебом, редактором, основными тегами HTML |
| Модуль 2 CSS и оформление | 2.1–2.10 | Цвета, шрифты, блочная модель, Flexbox, Grid, адаптивность |
| Модуль 3 Проектная работа | 3.1–3.11 | Многостраничный сайт, дизайн, доработка, презентация |
4. Учебно-тематический план на 33 занятия
| № | Тема | Что изучаем | Практика / результат |
|---|---|---|---|
| Модуль 1. Введение и HTML · занятия 1.1–1.12 | |||
| 1.1 | Вводное занятие 🎬 | Что такое сайт, HTML, CSS, браузер. Как работает веб-страница | Смотрим примеры сайтов, создаём папку проекта, изучаем правила безопасности |
| 1.2 | Инструменты и первая страница 🎬 | Установка редактора VS Code, файл index.html, браузер | Пишем первую страницу «Привет, мир!» |
| 1.3 | Структура HTML-документа 🎬 | <!DOCTYPE html>, html, head, title, body, заголовки h1–h6 | Страница «О себе» с заголовками |
| 1.4 | Текст и оформление 🎬 | p, br, hr, strong, em, комментарии | Оформляем текст о любимом занятии |
| 1.5 | Списки 🎬 | ul, ol, li, вложенные списки | Список любимых книг, игр или фильмов |
| 1.6 | Ссылки 🎬 | a, href, target, якоря | Меню ссылок на внешние сайты и разделы страницы |
| 1.7 | Изображения 🎬 | img, src, alt, размеры, папка images | Галерея из 3 изображений |
| 1.8 | Таблицы 🎬 | table, tr, td, th, caption | Таблица «Расписание уроков» |
| 1.9 | Семантическая структура 🎬 | header, nav, main, section, article, footer | Каркас страницы «Мой сайт» |
| 1.10 | Формы 🎬 | form, input, label, textarea, select, button | Анкета «Мои интересы» |
| 1.11 | Мультимедиа 🎬 | video, audio, iframe | Вставляем видео или карту |
| 1.12 | Повторение HTML 🎬 | Обобщение тегов | Мини-проект «Моя страница увлечений» только на HTML |
| Модуль 2. CSS и оформление · занятия 2.1–2.10 | |||
| 2.1 | Введение в CSS 🎬 | Способы подключения CSS, селекторы тегов, цвет | Раскрашиваем страницу |
| 2.2 | Текст и шрифты 🎬 | font-family, font-size, font-weight, text-align, line-height, Google Fonts | Оформляем типографику |
| 2.3 | Блочная модель 🎬 | width, height, padding, border, margin, background | Карточка с отступами и рамкой |
| 2.4 | Классы и id 🎬 | .class, #id, каскад, наследование | Стилизуем разные блоки |
| 2.5 | Flexbox 🎬 | display: flex, justify-content, align-items, gap | Меню и карточки в ряд |
| 2.6 | Позиционирование 🎬 | position, z-index | Бейдж или подпись на карточке |
| 2.7 | Ссылки и кнопки 🎬 | :hover, :active, :focus | Стильное меню и кнопки |
| 2.8 | Фоны и эффекты 🎬 | Градиенты, box-shadow, border-radius | Карточки с эффектами |
| 2.9 | CSS Grid 🎬 | display: grid, колонки, строки, gap | Галерея работ |
| 2.10 | Адаптивность 🎬 | media queries, viewport, относительные единицы | Мобильная версия страницы |
| Модуль 3. Проектная работа · занятия 3.1–3.11 | |||
| 3.1 | Повторение CSS 🎬 | Соединение HTML + CSS | Макет страницы по образцу |
| 3.2 | Многостраничность 🎬 | Ссылки между страницами, навигация | Создаём 3 связанные страницы |
| 3.3 | Планирование проекта 🎬 | Wireframe, цвета, шрифты, контент | План и эскиз итогового проекта |
| 3.4 | Проект: главная страница 🎬 | Верстка главной страницы | Главная страница проекта |
| 3.5 | Проект: вторая страница 🎬 | Добавление страницы, навигация | Вторая страница сайта |
| 3.6 | Проект: стилизация 🎬 | Flexbox, Grid, оформление | Улучшаем дизайн |
| 3.7 | Проект: адаптивность 🎬 | Медиазапросы | Делаем мобильную версию |
| 3.8 | Проект: интерактив 🎬 | Форма, галерея или контакты | Добавляем полезный блок |
| 3.9 | Проект: доработка 🎬 | Чек-лист, ошибки, ссылки, alt | Проверяем и исправляем сайт |
| 3.10 | Презентация проекта 🎬 | Презентация, обратная связь | Рассказ близким или видео-экскурсия по сайту |
| 3.11 | Итоги 🎬 | Рефлексия, что изучать дальше | Мини-тест, рефлексия, план дальнейшего обучения |
5. Курс «Первые шаги за компьютером»
Включаем компьютер, осваиваем мышь и клавиатуру, находим файлы и открываем сайты · 7 занятий. Если компьютер в новинку — начни отсюда, а потом переходи к HTML и CSS.
| № | Тема | Что изучаем | Практика / результат |
|---|---|---|---|
| Модуль 1. Компьютер и Windows · занятия 1.1–1.7 | |||
| 1.1 | Знакомство с компьютером 🎬 | Части компьютера и ноутбука, включение, выключение, спящий режим, удобная посадка | Находим части своего компьютера, включаем и правильно выключаем его |
| 1.2 | Мышь и тачпад 🎬 | Указатель, щелчок, двойной щелчок, правая кнопка, перетаскивание, колёсико, жесты тачпада | Тренируемся щёлкать, открывать, перетаскивать и прокручивать |
| 1.3 | Клавиатура 🎬 | Буквы и цифры, Shift, Caps Lock, Enter, пробел, Backspace и Delete, стрелки, язык ввода, символы для HTML | Печатаем в Блокноте, переключаем язык и находим символы < > / = " { } |
| 1.4 | Рабочий стол и окна Windows 🎬 | Рабочий стол, меню Пуск и поиск, панель задач, окна: свернуть, развернуть, закрыть, переключение между окнами | Запускаем программы через Пуск, управляем окнами и ставим два окна рядом |
| 1.5 | Файлы и папки 🎬 | Проводник, диски и папки, создание, переименование и удаление, Корзина, имена и расширения файлов | Создаём папку «Мои сайты», файлы в ней и включаем показ расширений |
| 1.6 | Копировать и вставить 🎬 | Выделение текста, буфер обмена, копирование, вырезание и вставка, отмена действия, сохранение, копирование файлов | Копируем текст и файлы, отменяем ошибки и сохраняем документ в Блокноте |
| 1.7 | Браузер и безопасность в интернете 🎬 | Браузер, адрес сайта и поиск, ссылки, вкладки, закладки, загрузки, свой файл в браузере, правила безопасности | Открываем сайт курса, работаем с вкладками и загрузками, открываем свой файл в браузере |
6. Итоговый проект
Темы на выбор
- «Моё хобби»
- «Моя любимая игра/фильм/книга»
- «Моя школа»
- «Мой город»
- «Мой питомец»
- «Мой личный сайт»
Требования
- 2–4 страницы
- Семантическая структура (header, nav, main, footer)
- Подключён внешний CSS-файл
- Все изображения с alt
- Навигация между страницами
- Использован Flexbox или Grid
- Простая адаптивность (media queries)
- Аккуратность и читаемость кода
Критерии оценивания
- Содержание и полнота
- Структура HTML
- Оформление CSS
- Адаптивность
- Аккуратность кода
- Презентация проекта
7. Советы для самостоятельного обучения
- Занимайся регулярно: 45 минут раз в неделю полезнее, чем 5 часов раз в месяц.
- Начинай занятие со слайдов — первый из них показывает, что получится в конце.
- Не копируй код примеров, а перепечатывай руками: так теги и свойства запоминаются быстрее.
- Застрял(а) — открой подсказку «Если трудно» и шпаргалку, сделай перерыв и вернись.
- Хочется большего — выполняй задания со звёздочкой: анимация, CSS-переменные, тёмная тема.
- После каждого модуля покажи свои работы близким и спроси, что им понравилось.
- Помни о безопасности: не публикуй личные данные и уважай авторские права на картинки.
- Задания «По желанию» — необязательные: подобрать текст, картинки, повторить теги.
- Зарегистрируйся: без входа прогресс, работы и результаты теста не сохраняются.
8. Что доступно без входа в аккаунт
✅ Без входа можно
- читать все занятия обоих курсов, смотреть слайды и шпаргалку;
- пробовать код в редакторе и песочнице.
⛔ Без входа нельзя
- сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
- отмечать пройденные занятия и видеть свой прогресс;
- выбрать тему итогового проекта и отмечать чек-лист;
- отправить итоговый тест и сохранить результат.