Перший сайт завжди виглядає як перемога — навіть якщо в коді десяток «тихих» помилок. Ми зібрали п’ять найпоширеніших, які бачимо у учнів Craftkid на старті курсу Web-розробки.

1. Незакриті або неправильно вкладені теги

Кожен <div> потребує </div>. Браузер «вгадує» структуру, але верстка «пливе». Використовуйте підсвітку в VS Code — пара відкриття/закриття підсвічується однаково.

2. Inline-стилі замість класів

style="color: red" на кожному елементі — шлях до хаосу. Створюйте класи в CSS і перевикористовуйте їх.

3. Float для верстки макету

У 2026 році для сіток використовуйте Flexbox і CSS Grid. Float — для обтікання тексту навколо зображень, не для колонок.

4. Ігнорування мобільної версії

Більше половини трафіку — з телефонів. Додайте meta viewport і тестуйте на вузькому екрані з першого дня.

5. Копіювання коду без розуміння

Stack Overflow — друг, але не заміна навчання. Кожен скопійований фрагмент — привід запитати «що робить цей рядок?»

Золоте правило Craftkid: один новий CSS-концепт на заняття. Сьогодні flexbox — завтра медіа-запити. Поступовість перемагає.

Інструменти, які рятують нерви

Prettier автоматично форматує HTML/CSS. Live Server у VS Code оновлює сторінку при збереженні. Валідатор W3C показує помилки розмітки — корисно раз на тиждень для навчання.

Як виглядає «зріла» верстка підлітка

Семантичні теги, один файл стилів, мобільна версія без горизонтального скролу, контрастний текст. Це вже рівень, за який на хакатоні не соромно показувати лендінг. На курсі Web у Craftkid кожен учень проходить code review від ментора — як у справжній студії.

Міні-проект для закріплення

Зверстайте картку персонажа з гри: фото, ім’я, статистика, кнопка «Грати». Без JavaScript. Мета — чиста розмітка, flexbox, адаптив на 320px. Якщо картка не ламається на телефоні — половина типових помилок уже позаду.

На Позняках ми розбираємо роботи учнів публічно (за згодою) — навчання на чужих помилках прискорює прогрес усієї групи.

Доступність і SEO-база

Атрибут alt у зображень, заголовки h1–h3 по ієрархії, осмислений title сторінки — це не «для дорослих маркетологів», а звичка з першого сайту. Підліток, який робить портфоліо, уже конкурує за увагу в Google разом з іншими юними розробниками.

Виправлення п’яти типових помилок з цієї статті — мінімум перед публікацією будь-якого лендінгу на GitHub Pages.

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

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

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

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

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

HTML і CSS: 5 типових помилок початківців