HTML, CSS и JavaScript за деца: първата уеб страница с блокове
Всеки сайт, който детето отваря, е направен с HTML, CSS и JavaScript. В Кодче Уеб то прави свои страници — визитка, меню, покана, карта на продукт, брояч и лампа, която светва — като подрежда блокове, а под страницата вижда истинския код.
Как работи Кодче Уеб
- 🎯 Целта и 👀 твоята страница една до друга. Детето подрежда блокове, докато двете станат еднакви. Страницата се променя на живо с всеки блок.
- Подсказка на човешки език: „Заглавието трябва да е със син цвят на текста“, „Липсва картинка 🐱“.
- Истинският код: бутонът „Покажи като код“ показва HTML (
<h1>,<p>,<div>) и CSS (color: blue;,padding: 16px;) — ред по ред, докато страницата се строи. В света ⚡ Интерактивност има и JavaScript (addEventListener('click', …)). - Без свободен текст: текстовете и картинките се избират от готови думи — безопасно за деца.
Шест свята по 30 задачи
- 🧱 Тагове (HTML): заглавие, текст, картинка, бутон, списък и кутия. Редът на блоковете е редът на страницата.
- 🎨 Цветове (CSS): цвят на текста, фон, размер, удебеляване и подравняване. Стиловете се слагат вътре в елемента.
- 📦 Кутии (CSS): рамки, отстояния вътре и вън (padding и margin), заоблени ъгли и кутия в кутия.
- 🐸 Подреждане (flexbox): жабчетата трябва да скочат там, където са в целта — подреди ги по реда, напряко, в колона или с разстояние между тях. Жабчетата подскачат, докато детето сменя блоковете.
- 🎯 Селектори (CSS): едно правило за много елементи — „всички точки“ (
li) или само тези с клас „ябълка“ (.apple). Правилото за клас е по-силно — точно като в истинския CSS. - ⚡ Интерактивност (JavaScript): бутоните оживяват. Детето дава име на елемент (
id) и казва какво да стане при натискане: покажи, скрий, смени текста или картинката, светни лампата, добави 1 към брояча, а ако броячът стигне 3 — покажи тайната. Целта може да се натиска, за да се види какво прави, а проверката натиска бутоните по три пъти.
Има ги и в 📅 дневните задачи, в 🐞 Бъгове (страница с една грешка), в значките и дипломите, както и в стаите за учители.
За кого е
За деца, които вече са минали първите светове с лабиринти, и за 5.–7. клас. Не е нужно да умеят да пишат код — достатъчно е да сравняват внимателно и да мислят какво липсва. Учителите могат да добавят всяка задача в стая за класа и да виждат кой какво е решил.
Защо уеб страниците са добро начало
- Резултатът се вижда веднага — и е нещо, което детето познава от всеки ден.
- HTML учи на структура (кое в кое е), а CSS — на внимание към детайла.
- JavaScript учи на събития („когато натиснеш…“) и условия — същите идеи като в лабиринтите, но в истински сайт.