Коротко: первый рабочий сайт подросток собирает за 3–4 месяца — это HTML, CSS и немного JavaScript. Его сразу можно опубликовать на GitHub Pages и отправить ссылку друзьям.
«Я хочу научиться делать сайты» — одна из самых частых фраз, которую мы слышим от подростков 12–16 лет. Сайты — это видимый результат, который можно показать, навык с реальным спросом на фриланс-рынке, и первый шаг к пониманию того, как устроен интернет.
Что на самом деле означает «делать сайты»
Веб-разработка делится на две части. Frontend — то, что видит пользователь: дизайн, кнопки, анимации. Backend — то, что происходит «за кулисами»: базы данных, серверная логика. Вначале подросткам стоит сосредоточиться на frontend.
HTML → CSS → JavaScript
- HTML — скелет сайта. Первый месяц обучения.
- CSS — внешний вид, адаптация под телефон. Второй-третий месяц.
- JavaScript — поведение: кнопки, формы, анимации. Четвёртый месяц и далее.
К концу первого месяца подросток сможет свёрстать простую HTML-страницу. К третьему — сделать полноценный дизайн. Это реалистичный темп при 2 занятиях в неделю.
Что конкретно сделают подростки на курсе
- Личная страница-визитка — первый реальный проект
- Лендинг для воображаемого бизнеса — практика дизайна
- Адаптивный сайт, который хорошо выглядит и на телефоне, и на компьютере
- Финальный проект — то, что выберет сам ученик
Момент, ради которого всё и затевается
«Самый ценный момент курса — когда подросток впервые показывает сайт не нам, а другу через телефон, «вживую». Реакция друга важнее любой нашей оценки — именно она показывает, действительно ли получилось», — рассказывает преподаватель курса.
Можно ли зарабатывать на сайтах в 14–15 лет
Да, и это не редкость. Небольшой локальный бизнес — кофейня, мастерская, студия танцев — регулярно ищет того, кто сделает простую страницу, и подросток с готовым портфолио вполне в этой роли. Дорога к первому заказу почти всегда идёт через знакомых родителей, школьные сообщества или собственный профиль в соцсетях, а не через биржи фриланса, где новичок конкурирует ценой с сотнями таких же.
Первый месяц по неделям
Общие слова про «HTML за месяц» мало что объясняют, поэтому разложим по неделям — темп считаем при двух занятиях в неделю.
Неделя 1. Теги, структура документа, заголовки и абзацы. Страница выглядит как текст на белом фоне, и это нормально: подросток впервые видит, что браузер читает разметку, а не картинку.
Неделя 2. Ссылки, изображения, списки, таблицы. Появляется ощущение, что страницу можно сделать самому, а не только открыть.
Неделя 3. Первое знакомство с CSS: цвета, шрифты, отступы. Вот здесь обычно и случается момент, когда подросток сидит дольше, чем планировал.
Неделя 4. Блочная модель и позиционирование — самое сложное в базе. Именно здесь становится понятно, почему элементы «не встают туда, куда хочется», и именно здесь полезно не торопиться.
Четыре вещи, которые ломаются у всех новичков
- Забытый закрывающий тег. Страница едет целиком, а причина — один символ. Лечится не внимательностью, а привычкой смотреть в инструменты разработчика.
- Отступы «на глаз». Десять разных значений в пределах одной страницы — и макет выглядит неряшливым, хотя каждый блок по отдельности нормальный.
- Сайт, свёрстанный только под свой монитор. На телефоне рассыпается, и это видно сразу, стоит открыть страницу из собственного кармана.
- Попытка сразу сделать «как у больших». Сложная анимация на второй неделе съедает всё время и не даёт закончить простое.
Что делать между занятиями
Самая полезная домашняя практика — не упражнения, а повторение чужого. Берётся реальная страница, которая нравится, и воспроизводится как можно ближе: сначала структура, потом цвета и шрифты. Это учит видеть, из чего сделано, а не выдумывать с нуля на пустом месте.
По времени достаточно трёх-четырёх подходов по полчаса в неделю. Длинные сессии раз в неделю работают хуже: в вёрстке всё держится на повторении мелких действий.
Техника: почти любой компьютер
Вёрстка не требует мощной машины. Нужны браузер, бесплатный редактор кода и стабильный интернет; подойдёт ноутбук, которому пять-шесть лет. Заметно важнее две мелочи: мышь вместо тачпада и экран от 13 дюймов — на меньшем половину места съедают панели редактора.
Когда сайт считается готовым
Готовый сайт — это не файл на компьютере, а адрес, который можно отправить. Поэтому первую же работу мы публикуем: бесплатный хостинг от GitHub даёт ссылку за несколько минут, и страница открывается у кого угодно. Как это делается пошагово, расписано отдельно — «Как опубликовать сайт, который сделал ребёнок».
Свой домен на старте не нужен. Он имеет смысл позже, когда появляется первый настоящий заказ или собственный проект, который не стыдно показать.
О деньгах честно
Подросток с портфолио из трёх-четырёх работ действительно может взять первый заказ — обычно через знакомых родителей, школьные сообщества или небольшой локальный бизнес. Конкретных сумм мы не называем: они зависят от города, сложности и умения договариваться, а обещание цифры ещё никому не помогло. Важнее другое — до первого заказа нужно не «знание JavaScript», а три завершённые страницы, которые открываются по ссылке.
Почему портфолио для подростка стоит больше оценок, разобрано здесь: «Портфолио вместо оценок».
Что идёт после базы
Когда вёрстка перестаёт пугать, путь расходится на три направления, и полезно знать о них заранее. Первое — глубже в JavaScript: интерактивные элементы, работа с данными, со временем библиотеки вроде React. Второе — в сторону дизайна интерфейсов: тот же сайт, но со стороны макета и удобства. Третье — в бэкенд, где живут базы данных и серверная логика; туда обычно приходят позже и уже с чётким интересом.
Выбирать сразу не нужно. Первые полгода все три дороги выглядят одинаково, а понимание, куда тянет, появляется именно из практики. Чем frontend отличается от backend, разобрано простыми словами в отдельной статье.
Как понять, что всё идёт нормально
Прогресс в вёрстке виден не по количеству выученных тегов, а по трём признакам. Подросток перестаёт спрашивать «а как сделать вот так» и начинает гуглить сам. Открывает чужие сайты и смотрит, как они устроены, — иногда прямо через инструменты разработчика. И главное: у него появляется раздражение от собственной старой работы. Это не про неуверенность, а про выросший глаз — именно из него и рождается следующая, лучшая страница.
И последний признак, самый надёжный: подросток показывает работу без просьбы. Не сдаёт домашнее, а сам открывает ноутбук и говорит «смотри». Пока этого нет, сайты остаются школьным заданием; как только появилось — учёба перестаёт нуждаться в напоминаниях.
Что спрашивают родители на пробном
С какого возраста реально начинать? Курс разработки сайтов рассчитан на 10–18 лет. До десяти абстракция тегов даётся тяжело, и полезнее начать с блочного программирования.
Нужен ли английский? На уровне узнавания слов — да, и он набирается сам: теги и свойства повторяются каждый день. Отдельно учить перед курсом ничего не надо.
А математика? Для вёрстки — нет. Она понадобится позже, в сложной логике, и даже там в школьном объёме; подробнее — в статье о математике и программировании.
Приходите на бесплатный пробный урок — за одно занятие подросток свёрстает свою первую HTML-страницу.
