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.
45 lines
2.4 KiB
JSON
45 lines
2.4 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-tables",
|
|
"title": "Tablas HTML",
|
|
"description": "Crea tablas de datos estructuradas con marcado semántico",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "table-basic",
|
|
"title": "Tablas de datos",
|
|
"description": "Las tablas muestran datos estructurados en filas y columnas. Usa <kbd><table></kbd> como contenedor, <kbd><tr></kbd> para filas, <kbd><th></kbd> para celdas de encabezado y <kbd><td></kbd> para celdas de datos.<br><br>Añade <kbd><caption></kbd> para un título accesible que describa el contenido de la tabla.",
|
|
"task": "Crea una tabla de precios:<br>1. Un <kbd><caption></kbd> que diga <code>Pricing</code><br>2. Una fila de encabezado con <code>Plan</code> y <code>Price</code><br>3. Dos filas de datos para Basic ($9) y Pro ($29)",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 350px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 16px; font-weight: 600; font-size: 1.1rem; color: #333; background: #f8f9fa; } th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: steelblue; color: white; font-weight: 500; } tr:last-child td { border-bottom: none; } tr:hover td { background: #f8f9fa; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<table>\n <caption>Pricing</caption>\n <tr>\n <th>Plan</th>\n <th>Price</th>\n </tr>\n <tr>\n <td>Basic</td>\n <td>$9</td>\n </tr>\n <tr>\n <td>Pro</td>\n <td>$29</td>\n </tr>\n</table>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "table",
|
|
"message": "Añade un elemento <kbd><table></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "caption",
|
|
"message": "Añade un <kbd><caption></kbd> para el título de la tabla"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "th", "min": 2 },
|
|
"message": "Añade celdas de encabezado (<kbd><th></kbd>) para Plan y Price"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "tr", "min": 3 },
|
|
"message": "Añade 3 filas (1 encabezado + 2 filas de datos)"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|