{ "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-elements", "title": "HTML Block & Inline", "description": "Зрозумійте основну різницю між контейнерними (блоковими) та рядковими елементами", "mode": "html", "difficulty": "beginner", "lessons": [ { "id": "block-vs-inline-intro", "title": "Блокові vs рядкові елементи", "description": "HTML елементи поділяються на дві основні категорії:

Блокові елементи (контейнери) починаються з нового рядка і займають повну ширину. Приклади: <div>, <p>, <h1>, <section>

Рядкові елементи розміщуються всередині тексту і займають лише необхідну ширину. Приклади: <span>, <a>, <strong>, <em>", "task": "Оберніть слово важливе тегами <strong>, щоб зробити його жирним. Зверніть увагу, як абзац (блок) займає повну ширину, тоді як strong (рядковий) тече з текстом.", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }", "sandboxCSS": "", "initialCode": "

Це абзац з важливе словом.

", "solution": "

Це абзац з важливе словом.

", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "p", "message": "Додайте елемент абзацу <p>" }, { "type": "parent_child", "value": { "parent": "p", "child": "strong" }, "message": "Оберніть слово важливе тегами <strong>" } ] }, { "id": "semantic-containers", "title": "Семантичні теги", "description": "Сучасний HTML використовує семантичні контейнери, які описують свій вміст:

<header> - Заголовок сторінки або секції
<nav> - Навігаційні посилання
<main> - Основний вміст
<section> - Тематичне групування
<article> - Самостійний вміст
<footer> - Підвал сторінки або секції", "task": "Створіть базову структуру сторінки:
1. Додайте <header> з <h1>, що містить текст Мій Сайт
2. Додайте елемент <main> з абзацом, що каже Ласкаво просимо на мій сайт!
3. Додайте <footer> з абзацом, що каже Copyright 2026", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }", "sandboxCSS": "", "initialCode": "", "solution": "
\n

Мій Сайт

\n
\n
\n

Ласкаво просимо на мій сайт!

\n
\n", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "header", "message": "Додайте елемент <header>" }, { "type": "element_exists", "value": "main", "message": "Додайте елемент <main>" }, { "type": "element_exists", "value": "footer", "message": "Додайте елемент <footer>" }, { "type": "parent_child", "value": { "parent": "header", "child": "h1" }, "message": "Додайте заголовок <h1> всередині header" } ] } ] }