Коротко: перший робочий сайт підліток збирає за 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-сторінку.
