Web-розробка — один із найвидимих результатів у IT: відкрив браузер — і твій сайт живе в інтернеті. Для підлітка це потужна мотивація. Ось план перших кроків, який ми використовуємо на курсі Web у Craftkid.

Крок 1: Інструменти (день 1)

VS Code — безкоштовний редактор з підсвіткою синтаксису.
Chrome DevTools — «рентген» для будь-якого сайту в інтернеті.
GitHub — збереження і портфоліо з першого дня.

Крок 2: HTML — скелет (тиждень 1)

Теги <header>, <main>, <section>, <footer>. Семантика з першого дня — не <div> на все.

Крок 3: CSS — зовнішній вигляд (тиждень 2–3)

Flexbox для макету, кольорова палітра, Google Fonts. Перший адаптивний дизайн — медіа-запит для телефону.

Крок 4: JavaScript — інтерактив (тиждень 4+)

Кнопка, яка змінює тему на темну. Форма з валідацією. Модальне вікно. Кожна фіча — маленька перемога.

Безкоштовні ресурси

freeCodeCamp — структурований шлях.
MDN Web Docs — довідник, як Біблія для вебу.
CodePen — експерименти та натхнення.

Порада Craftkid Перший сайт — про себе: фото, хобі, список проектів, контакт. Це і портфоліо, і мотивація доробити до кінця.

Найкращий час почати веб — вчора. Другий найкращий — сьогодні, з одного HTML-файлу.

Типові помилки на старті вебу

Одразу брати React, минувши HTML/CSS — фундамент хитається.
Копіювати Bootstrap, не розуміючи сітки — при кастомізації все ламається.
Не тестувати в різних браузерах — Safari на iPhone часто «виявляє сюрпризи».

План на 8 тижнів (поза курсом)

Тиждень 1–2: статичний лендінг про хобі. Тиждень 3–4: адаптивність і Flexbox. Тиждень 5–6: JavaScript-інтерактив. Тиждень 7–8: деплой на GitHub Pages і пост у блозі «що вивчив». Такий ритм реалістичний для підлітка зі школою.

У Craftkid на Позняках цей шлях стиснутий у структуровану програму з ментором, але логіка кроків та сама: інструменти → розмітка → стилі → інтерактив → публікація.

Як обрати курс Web у Києві

Шукайте програму з версткою, JS, Git, деплоєм і захистом проекту. Питайте, чи є code review, чи маленькі групи, чи можна побачити роботи учнів. Craftkid відкрито показує демо-день — приходьте як гості.

Ваш перший сайт не має бути ідеальним. Він має бути вашим і опублікованим — решта прийде з практикою.

Після першого сайту

Додайте блог на тому ж сайті — статті про проекти. Підключіть аналітику (з дозволу батьків) і подивіться, скільки людей заходить. Навіть 10 відвідувачів — привід для гордості. Далі — React або фреймворк, якщо хочеться глибше; або дизайн-система в Figma, якщо тягне на UX.

Web — вхід у багато дверей. Головне — пройти через них, а не стояти в коридорі з нескінченними туторіалами.

Наступні кроки з Craftkid

У школі програмування Craftkid на Позняках у Києві ми допомагаємо підліткам 10–16 років перетворювати інтерес на технологіях на реальні проекти: ігри, сайти, боти, командні роботи для хакатонів. Заняття офлайн у малих групах, українською мовою, з ментором, який пояснює без снобізму й підтримує, коли «не працює».

Не обов’язково знати все заздалегідь. Достатньо цікавості і готовності спробувати. Запишіться на безкоштовне пробне заняття — разом оцінимо рівень, підберемо курс і покажемо, як виглядає навчання наживо. Батьки отримують чесну відповідь: чи готові до Python, Web, Roblox чи варто почати з Scratch.

Порада Craftkid Принесіть на пробне заняття питання з цієї статті — розберемо на практиці, а не лише в теорії. Найкращі учні приходять з цікавістю, а не з ідеальними знаннями.

IT — це марафон. Ми поруч на старті й на поворотах: від першого print() до портфоліо, яким не соромно йти на стажування. До зустрічі в класі на Позняках!

Як допомогти підлітку зробити перші кроки у Web-розробці