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.8 KiB
JSON
69 lines
3.8 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-elements",
|
|
"title": "HTML Block & Inline",
|
|
"description": "Comprende la diferencia fundamental entre elementos contenedores (bloque) y elementos en línea",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "block-vs-inline-intro",
|
|
"title": "Elementos de bloque vs en línea",
|
|
"description": "Los elementos HTML se dividen en dos categorías principales:<br><br><strong>Elementos de bloque</strong> (contenedores) comienzan en una nueva línea y ocupan todo el ancho. Ejemplos: <kbd><div></kbd>, <kbd><p></kbd>, <kbd><h1></kbd>, <kbd><section></kbd><br><br><strong>Elementos en línea</strong> fluyen dentro del texto y solo ocupan el ancho necesario. Ejemplos: <kbd><span></kbd>, <kbd><a></kbd>, <kbd><strong></kbd>, <kbd><em></kbd>",
|
|
"task": "Envuelve la palabra <kbd>importante</kbd> con etiquetas <kbd><strong></kbd> para ponerla en negrita. Observa cómo el párrafo (bloque) ocupa todo el ancho mientras que strong (en línea) fluye con el texto.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<p>Este es un párrafo con una palabra importante.</p>",
|
|
"solution": "<p>Este es un párrafo con una palabra <strong>importante</strong>.</p>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "p",
|
|
"message": "Añade un elemento de párrafo <kbd><p></kbd>"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "p", "child": "strong" },
|
|
"message": "Envuelve la palabra <kbd>importante</kbd> con etiquetas <kbd><strong></kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "semantic-containers",
|
|
"title": "Etiquetas semánticas",
|
|
"description": "El HTML moderno usa contenedores semánticos que describen su contenido:<br><br><kbd><header></kbd> - Encabezado de página o sección<br><kbd><nav></kbd> - Enlaces de navegación<br><kbd><main></kbd> - Área de contenido principal<br><kbd><section></kbd> - Agrupación temática<br><kbd><article></kbd> - Contenido independiente<br><kbd><footer></kbd> - Pie de página o sección",
|
|
"task": "Crea una estructura básica de página:<br>1. Añade un <kbd><header></kbd> con un <kbd><h1></kbd> que contenga el texto <code>Mi Sitio Web</code><br>2. Añade un elemento <kbd><main></kbd> con un párrafo que diga <code>¡Bienvenido a mi sitio!</code><br>3. Añade un <kbd><footer></kbd> con un párrafo que diga <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>Mi Sitio Web</h1>\n</header>\n<main>\n <p>¡Bienvenido a mi sitio!</p>\n</main>\n<footer>\n <p>Copyright 2026</p>\n</footer>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "header",
|
|
"message": "Añade un elemento <kbd><header></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "main",
|
|
"message": "Añade un elemento <kbd><main></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "footer",
|
|
"message": "Añade un elemento <kbd><footer></kbd>"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "header", "child": "h1" },
|
|
"message": "Añade un encabezado <kbd><h1></kbd> dentro de tu header"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|