Michael Czechowski
1a5c09b750
Synchronizes 72 lesson files across 5 languages (de, pl, es, ar, uk) to match the English source. This ensures code, solutions, and validations are identical while only title, description, task, and message fields are translated. Changes include: - Box model lessons (01-box-model.json) - Units and variables (05-units-variables.json) - Transitions and animations (06-transitions-animations.json) - Responsive design (08-responsive.json) - HTML elements (20-html-elements.json) - HTML forms basic and validation (21, 22) - HTML details/summary, progress/meter (23, 24) - HTML datalist, dialog, fieldset (25, 27, 28) - HTML tables and SVG (30, 32) - HTML marquee (31) - Welcome module (00-welcome.json) Fixes validation inconsistencies and removes extra content that exceeded English source. German translations were largely correct; Polish, Spanish, Arabic, and Ukrainian required full translations.
69 lines
3.6 KiB
JSON
69 lines
3.6 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-elements",
|
|
"title": "HTML Block & Inline",
|
|
"description": "Zrozum podstawową różnicę między elementami kontenerowymi (blokowymi) a elementami liniowymi",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "block-vs-inline-intro",
|
|
"title": "Elementy blokowe vs liniowe",
|
|
"description": "Elementy HTML dzielą się na dwie główne kategorie:<br><br><strong>Elementy blokowe</strong> (kontenery) zaczynają się w nowej linii i zajmują pełną szerokość. Przykłady: <kbd><div></kbd>, <kbd><p></kbd>, <kbd><h1></kbd>, <kbd><section></kbd><br><br><strong>Elementy liniowe</strong> płyną wewnątrz tekstu i zajmują tylko potrzebną szerokość. Przykłady: <kbd><span></kbd>, <kbd><a></kbd>, <kbd><strong></kbd>, <kbd><em></kbd>",
|
|
"task": "Otocz słowo <kbd>ważne</kbd> tagami <kbd><strong></kbd>, aby je pogrubić. Zauważ, jak akapit (blok) zajmuje pełną szerokość, podczas gdy strong (liniowy) płynie z tekstem.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<p>To jest akapit z ważne słowem.</p>",
|
|
"solution": "<p>To jest akapit z <strong>ważne</strong> słowem.</p>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "p",
|
|
"message": "Dodaj element akapitu <kbd><p></kbd>"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "p", "child": "strong" },
|
|
"message": "Otocz słowo <kbd>ważne</kbd> tagami <kbd><strong></kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "semantic-containers",
|
|
"title": "Tagi semantyczne",
|
|
"description": "Nowoczesny HTML używa semantycznych kontenerów, które opisują swoją zawartość:<br><br><kbd><header></kbd> - Nagłówek strony lub sekcji<br><kbd><nav></kbd> - Linki nawigacyjne<br><kbd><main></kbd> - Główna treść<br><kbd><section></kbd> - Grupa tematyczna<br><kbd><article></kbd> - Samodzielna treść<br><kbd><footer></kbd> - Stopka strony lub sekcji",
|
|
"task": "Stwórz podstawową strukturę strony:<br>1. Dodaj <kbd><header></kbd> z <kbd><h1></kbd> zawierającym tekst <code>Moja Strona</code><br>2. Dodaj element <kbd><main></kbd> z akapitem mówiącym <code>Witaj na mojej stronie!</code><br>3. Dodaj <kbd><footer></kbd> z akapitem mówiącym <code>Copyright 2026</code>",
|
|
"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": "<header>\n <h1>Moja Strona</h1>\n</header>\n<main>\n <p>Witaj na mojej stronie!</p>\n</main>\n<footer>\n <p>Copyright 2026</p>\n</footer>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "header",
|
|
"message": "Dodaj element <kbd><header></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "main",
|
|
"message": "Dodaj element <kbd><main></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "footer",
|
|
"message": "Dodaj element <kbd><footer></kbd>"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "header", "child": "h1" },
|
|
"message": "Dodaj nagłówek <kbd><h1></kbd> wewnątrz header"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|