Коротко: тільки по черзі. HTML дає результат за одне-два заняття, CSS — за два-три, JavaScript вимагає бази з обох. Почати одразу з JavaScript означає не розуміти, до чого його прикладати.
«А можна одразу JavaScript, HTML же не програмування?» — це питання ми чуємо на кожній другій консультації, зазвичай від батьків, які самі трохи знайомі з темою. Логіка зрозуміла: JS звучить серйозніше. Але порядок HTML → CSS → JS — не довільний вибір, а те, як влаштований сам браузер.
Три шари однієї сторінки
Уявіть сторінку як будинок. HTML — це стіни та кімнати: де що стоїть, які елементи взагалі є на сторінці. CSS — це ремонт: кольори, шрифти, розташування меблів. А JavaScript — це електрика й побутова техніка: те, що робить будинок «живим», реагує на дії людини. Без стін нема сенсу проводити електрику — просто нікуди її під'єднати.
Дитина, яка намагається вчити JS без HTML/CSS, стикається з абсурдною ситуацією: код ніби працює, а показати на екрані нічого, тому що немає розмітки, з якою цей код мав би взаємодіяти.
Чому HTML і CSS — це не «легка розминка»
| HTML | CSS | JavaScript | |
|---|---|---|---|
| Що це | структура сторінки | вигляд | поведінка |
| Скільки вчити до першого результату | 1–2 заняття | 2–3 заняття | 4–6 занять |
| Що можна зробити | текст, картинки, посилання | кольори, сітка, адаптація | кнопки, форми, анімація |
| Чи можна почати з нього | так, і треба | після HTML | ні, буде незрозуміло |
Скільки коду насправді в CSS
Тут поширена помилка навіть серед дорослих: думати, що HTML/CSS — це просто, а «справжня» складність починається з JS. На практиці адаптивна вёрстка (щоб сайт однаково добре виглядав на телефоні й моніторі) — окрема інженерна задача зі своєю логікою: Flexbox, Grid, медіа-запити. Учні, які проскочили цей етап, потім роками пишуть криві інтерфейси навіть добре знаючи JavaScript.
- Тиждень 1–2: HTML — структура, перша сторінка без жодного стилю (виглядає «як текстовий документ», і це нормально)
- Тиждень 3–6: CSS — та сама сторінка вже виглядає як справжній сайт
- Тиждень 7+: JavaScript — кнопки починають реагувати, форми — працювати, з'являється інтерактив
А якщо дитина вже трохи знає JS з YouTube?
Це часта ситуація — і абсолютно нормальна. У такому разі ми не змушуємо проходити все з нуля в лінійному порядку: на вступному занятті визначаємо реальний рівень і добираємо групу чи темп індивідуально. Головне — переконатись, що базові поняття HTML/CSS не мають прогалин, бо саме вони найчастіше «спливають» пізніше у вигляді дивних багів у верстці.
Питання, яке ставлять рідше, але воно важливіше
Не «з чого почати», а «скільки часу піде на кожен етап». Тут відповідь чесна: залежить від віку і темпу дитини. Молодша група (10–14 років) проходить основи HTML/CSS повільніше і з більшою кількістю практики через міні-проєкти. Старша (14–18) рухається швидше і вже на середині курсу торкається сучасного JavaScript і React.
Що дитина вміє після кожного шару
Абстрактні «основи» мало що пояснюють, тому по пунктах — що з'являється в портфоліо після кожного етапу.
Після HTML. Сторінка з текстом, заголовками, картинками й посиланнями. Виглядає просто, зате відкривається за посиланням у будь-кого. Перший результат — за одне-два заняття.
Після CSS. Та сама сторінка, але вже схожа на сайт: кольори, шрифти, відступи, розташування блоків, адаптація під телефон. Саме тут більшість і залипає надовго — результат змінюється на очах.
Після JavaScript. Сторінка починає реагувати: кнопки працюють, форма перевіряє введене, з'являються калькулятори, таймери, прості ігри.
Порядок не можна переставити не через методику, а через саму конструкцію: JavaScript змінює те, що створено HTML і оформлено CSS. Без перших двох шарів йому просто нема до чого прикладатися.
Якщо дитина вже пробувала JavaScript сама
Типова картина: подивилася кілька відео, повторила код і зробила щось робоче. Це радше добре — інтерес уже є, і з ним приходять на курс частіше, ніж з нуля.
Складність в іншому: такі діти зазвичай уміють повторити, але не розуміють, чому воно працює. Виявляється це на першій же самостійній задачі, яка не збігається з відео. Тому починати все одно доводиться з бази — просто проходиться вона швидше, а час іде на розбір власних помилок.
Чого точно не варто робити — переконувати підлітка, що його попередній досвід «неправильний». Він принесе свої проєкти, і з них виходить найкращий навчальний матеріал.
Скільки часу займає кожен етап
При двох заняттях на тиждень картина приблизно така: HTML — перший місяць, CSS — з другого по четвертий, перші дотики до JavaScript — з п'ятого. Це не швидко й не повільно, це темп, за якого встигає закріпитися рука.
Головна пастка тут — бажання пришвидшити. Підліток, який проскочив CSS за два тижні, потім місяцями воює з макетами, які «не стають так, як треба», і не розуміє, що справа в блоковій моделі, яку він пройшов побіжно.
Про фреймворки: коли React і чи взагалі
Питання приходить із двох боків — від самих підлітків, які бачать назви у вакансіях, і від батьків, які чули, що «чистий JavaScript уже не потрібен».
Коротка відповідь: фреймворк — це надбудова, і вчити його раніше за базу означає збирати з готових деталей, не розуміючи, як вони працюють. Проблеми починаються при першій нестандартній задачі й при пошуку помилок: код чужий, логіка прихована, а знань, щоб розібратися, немає.
Розумний момент — коли підліток уже зробив кілька проєктів на чистому JavaScript і сам відчув, що повторює одне й те саме. Саме з цього відчуття фреймворки й виросли.
Найчастіша помилка перших місяців
Вона не в порядку мов, а в тому, як дитина вчиться. Типова картина: підліток дивиться урок, повторює за автором крок у крок, отримує гарний результат і переходить до наступного відео. Через два місяці таких уроків пройдено двадцять, а самостійно не зроблено жодного.
Лікується це одним правилом: після кожного уроку зробити те саме, але інакше. Інший текст, інші кольори, ще один блок від себе. Відхилення на п'ять відсотків від зразка вже змушує розуміти, що ти робиш, — і саме з нього починається реальне вміння.
Що потрібно з техніки
Майже нічого. Браузер, безкоштовний редактор коду, інтернет. Підійде ноутбук п'яти-шестирічної давності; окремих програм купувати не треба.
Дві дрібниці все ж важать: миша замість тачпада й екран від 13 дюймів — на меншому половину місця з'їдають панелі редактора. Другий монітор корисний, але це вже з розряду зручностей, а не потреб. І телефон — не для розваги, а для перевірки: сторінку, яку не відкривали з телефона, вважати готовою зарано.
Куди рухатися після бази й чим frontend відрізняється від backend — простими словами тут. А що з цього складається в портфоліо — «Портфоліо замість оцінок».
Якщо не впевнені, який рівень підходить саме вашій дитині — приходьте на безкоштовний пробний урок, там і визначимо.
