🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?
✅ Без входа можно
- читать все 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 | Итоги 🎬 | Рефлексия, что изучать дальше | Мини-тест, рефлексия, план дальнейшего обучения |