Каждый сайт в интернете написан на HTML и CSS. Это язык разметки и стили — два инструмента, которые вместе дают видимый результат в браузере. Подросток может создать свой первый сайт буквально за первое занятие.
Что создают подростки на курсах веб-разработки
Личный сайт-портфолио
О себе, увлечениях, проектах. Можно опубликовать и показывать при поступлении в вуз.
Лендинг для проекта
Страница с описанием идеи, продукта или школьного проекта. Настоящий сайт онлайн.
Блог или журнал
Своя тема: игры, путешествия, наука. HTML + CSS + немного структуры — и сайт живёт.
Веб-игра
На JavaScript — браузерная игра прямо на сайте. Крестики-нолики, змейка, викторина.
Сайт мероприятия
Для школьного вечера, хакатона или соревнования. Дата, программа, кнопка регистрации.
Анимированная страница
CSS-анимации, hover-эффекты, параллакс. Визуально эффектно, технически несложно.
Что изучают на курсах создания сайтов
1
HTML
Структура страницы: заголовки, параграфы, ссылки, картинки, формы. Браузер читает HTML и показывает страницу.
2
CSS
Оформление: цвета, шрифты, отступы, размеры. Flexbox и Grid — как расположить элементы на странице.
3
Responsive Design
Адаптация под мобильные устройства. Media queries — сайт выглядит хорошо на телефоне и компьютере.
4
JavaScript
Интерактивность: кнопки, анимации, валидация форм, простые игры. Сайт начинает «жить».
5
Публикация
GitHub Pages — бесплатный хостинг. Сайт получает адрес в интернете и становится доступен всем.
С какого возраста и что нужно
От 10–11 лет. Читать HTML-теги несложнее, чем изучать новый язык.
Любой компьютер — Windows или Mac. Браузер и текстовый редактор (VS Code, бесплатно).
Опыт программирования не нужен. HTML — это разметка, а не программирование в строгом смысле.
Интерес к дизайну или к тому, «как устроены сайты» — хорошая мотивация.
Не подходит тем, кто хочет создавать игры — для игр лучше Python → Unity.
Пример кода первого урока
Вот как выглядит простейшая страница. Ребёнок пишет этот код, открывает в браузере — и видит свою страницу:
index.html — первый сайт
<!DOCTYPE html>
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой сайт. Я сделал его сам.</p>
<img src="фото.jpg" alt="моё фото">
</body>
</html> За первый урок — своя страница в браузере. За месяц — стилизованный сайт с несколькими разделами.
Курс веб-разработки для детей 10–17 лет
HTML, CSS, JavaScript, создание и публикация сайта. Группы до 6 человек и индивидуально. Онлайн и офлайн в Москве.
Подробнее о курсе