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