AI INSIDEHTML/CSS: Мой первый сайт
HTML/CSS + AI: создание сайтов с AI-дизайном, автогенерацией палитр и Copilot-вёрсткой
Создай свой первый настоящий сайт! HTML для структуры, CSS для красоты — и через месяц у тебя будет портфолио.
О курсе
HTML и CSS — язык интернета. Каждый сайт, который ты видишь — от Google до TikTok — начинается с HTML-кода. Этот курс даёт ребёнку суперсилу: создавать настоящие сайты, которые видят все в мире.
Мы начинаем с «Hello, World» в браузере. Через неделю — первая страница с фото и текстом. Через месяц — многостраничный сайт с навигацией. Через три — адаптивное портфолио, которое выглядит круто на телефоне и компьютере.
Читать далее ↓
CSS — это магия дизайна. Градиенты, тени, анимации, Flexbox, Grid — всё, что делает сайты красивыми. Дети влюбляются в CSS, потому что результат виден мгновенно: поменял цвет — обновил страницу — вау!
AI-инструменты с первого урока: Copilot автодополняет теги, нейросеть генерирует дизайн-идеи и цветовые палитры, ChatGPT объясняет ошибки валидатора.
🎯 Кому подойдёт этот курс
Детям 10–13 лет, которые хотят создать свой сайт
Тем, кто любит дизайн и хочет воплощать идеи в браузере
Начинающим, без опыта программирования
Тем, кто хочет в будущем стать веб-разработчиком или дизайнером
Как ИИ используется в этом курсе
Мы интегрируем искусственный интеллект в процесс обучения — ученики не просто знакомятся с нейросетями, а используют их как рабочий инструмент.
GitHub CopilotChatGPTAI Color PaletteЧему научится ваш ребёнок
HTML5
Структура страницы: теги, атрибуты, семантика, формы, таблицы.
CSS3
Стили, цвета, шрифты, тени, градиенты — вся визуальная магия.
Flexbox и Grid
Современная вёрстка: адаптивные макеты, которые работают на любых экранах.
Анимации
CSS-анимации, переходы, hover-эффекты — сайт оживает.
Работа с ИИ
Copilot, ChatGPT — инструменты для ускорения вёрстки.
AI SKILLПубликация
Деплой на GitHub Pages — сайт доступен всему миру.
Программа: 6 модулей
Каждый модуль — новый уровень мастерства. ИИ-инструменты интегрированы в каждый модуль.
Первая страница, теги, структура документа.
- Что такое HTML? Создаём первую страницу
- Теги h1-h6, p, br — текст на странице
- Изображения img и ссылки a — связываем страницы
- Проект: «Моя визитка» — страница о себе
Стили, цвета, шрифты, фоны.
- Подключаем CSS, первые стили: color, background
- Шрифты: Google Fonts, font-size, font-weight
- Блочная модель: margin, padding, border
- Проект: «Стилизованная визитка» с градиентами и тенями
Многостраничный сайт, меню, списки, таблицы.
- Списки ul, ol, li — меню навигации
- Таблицы: расписание, прайс-лист
- Формы: input, button, textarea — обратная связь
- Проект: «Сайт о хобби» — 3 страницы с навигацией
Размещаем элементы как профи.
- Flex-контейнер: display flex, направление, выравнивание
- Flex-элементы: grow, shrink, basis
- Карточки товаров: реальный паттерн вёрстки
- Проект: «Лендинг» — одностраничник с секциями
CSS Grid, медиа-запросы, мобильная вёрстка.
- CSS Grid: строки, столбцы, области
- Медиа-запросы: разный дизайн для телефона и ПК
- Адаптивные изображения и типографика
- Проект: «Адаптивное портфолио» — красиво на всех устройствах
Полноценный сайт с нуля + деплой.
- Планируем сайт с ChatGPT: структура и контент
- Вёрстка главной и подстраниц
- CSS-анимации и финальная полировка
- Деплой на GitHub Pages — сайт в интернете!
Проекты учеников
Реальные проекты в портфолио — главный результат обучения.
Моя визитка
Персональная страница с фото, ссылками и стильным дизайном.
AIСайт о хобби
Многостраничный сайт с навигацией, галереей и формой обратной связи.
AIЛендинг
Одностраничный промо-сайт с Flexbox-секциями и анимациями.
AIАдаптивное портфолио
Полноценный адаптивный сайт-портфолио, опубликованный на GitHub Pages.
AIРазница: с ИИ и без
HTML/CSS без ИИ
Ручной подбор цветов, копирование шаблонов, базовая вёрстка без адаптивности.
HTML/CSS + AI в КОДИУМ
AI генерирует палитры и дизайн-идеи, Copilot автодополняет теги, ChatGPT объясняет ошибки валидатора.
После курса ваш ребёнок умеет то, что не умеют 95% его сверстников
Конкретные AI-навыки, которые ребёнок получит на курсе «HTML/CSS: Мой первый сайт»
Верстает профессионально
Адаптивные сайты с Flexbox, Grid, анимациями. GitHub Pages — портфолио в интернете.
AI-дизайн
AI генерирует палитры, макеты, иконки. Copilot автодополняет CSS.
Понимает интернет
HTML-семантика, SEO, доступность — знает как работает веб.
Готов к JavaScript
Крепкая база HTML/CSS — фундамент для JS, React и веб-карьеры.
Почему выбирают КОДИУМ
Живые онлайн-уроки 1-на-1
50 минут живого общения с преподавателем. Преподаватель видит экран ученика и адаптирует темп индивидуально.
ИИ в каждом уроке
ChatGPT, Copilot и генеративные нейросети — ребёнок учится работать с ИИ как профессионал, а не «нажимать кнопки».
НАШЕ ОТЛИЧИЕПреподаватели из IT
Действующие специалисты из Яндекс, Тинькофф, Сбер с педагогической подготовкой.
Проекты в портфолио
После каждого модуля — проект. К концу курса 4+ работ.
48 курсов для роста
После «HTML/CSS: Мой первый сайт» ребёнок продолжит развитие по звёздной карте — от начинающего до профессионала.
В стоимость включено:
Как проходит обучение
Простой и понятный процесс от записи до первого проекта
Записываетесь на пробный урок
Оставляете заявку. Наш менеджер связывается в течение 15 минут. Пробный урок — 45 минут, бесплатно.
Проходите пробное занятие
Ребёнок знакомится с преподавателем, создаёт мини-проект с ИИ-инструментами. Мы оцениваем уровень и составляем индивидуальную программу.
Начинаете регулярные занятия
Занятия 2 раза в неделю по 50 минут. Теория + практика + работа над проектом + ИИ-инструменты.
Создаёте проекты в портфолио
Каждые 3–4 недели — полноценный проект. 4+ работ к концу курса. Презентация на демо-днях.
Стоимость обучения
Индивидуальные занятия 1-на-1, 50 минут. Категория: 
Старт
Знакомство
1 раз в неделю
2 раза в неделю
3 раза в неделюОплата помесячная. Все пакеты и скидки →
Отзывы учеников и родителей
Я создала сайт про своего кота! С фотогалереей и анимациями. Показала в школе — все думали, что это профессионал делал. А это я!
Дочь горит вебом, каждый вечер что-то верстает. Преподаватель замечательный, объясняет сложное просто. Уже планируем JavaScript!
Мне нравится что всё видно сразу. Написал код — обновил браузер — вот твой сайт. Сделал портфолио и лендинг для папиного бизнеса.
Часто задаваемые вопросы
Нет, начинаем с нуля. Нужно только уметь печатать на клавиатуре.
Только браузер (Chrome) и бесплатный редактор VS Code. Всё установим на первом уроке.
JavaScript — оживить сайт, затем React или Fullstack.
Да! К концу курса ребёнок деплоит сайт на GitHub Pages — его видит весь мир.
6 модулей, 24 урока. Примерно 3 месяца при 2 занятиях в неделю.
Нет. Мы адаптируем инструменты под возраст: для младших — простые промпты и генерация картинок, для подростков — ChatGPT, Copilot и API нейросетей.
Мы учим не копировать ответы ИИ, а управлять им: формулировать задачу, оценивать ответ, исправлять ошибки. Так работают профессиональные разработчики.
ИИ-инструменты уже стали частью рабочего процесса в IT. Ребёнок, который освоит их сейчас, получит значительное преимущество к моменту выбора профессии.
Что дальше?
После курса «HTML/CSS: Мой первый сайт» рекомендуем:
Готовы начать путешествие в мир создания собственных сайтов?
Запишитесь на бесплатный пробный урок курса «HTML/CSS: Мой первый сайт». 45 минут — и ваш ребёнок создаст первый проект с ИИ.