<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T08:28:39+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "es"
}
-->
# Tarea de Refactorización de CSS

## Objetivo

Refactorizar el proyecto del terrario para usar **Flexbox** o **CSS Grid** en el diseño. Actualiza el HTML y CSS según sea necesario para lograr un diseño moderno y responsivo. No es necesario implementar elementos arrastrables; céntrate únicamente en el diseño y el estilo.

## Instrucciones

1. **Crea una nueva versión** de la aplicación del terrario. Actualiza el marcado y el CSS para usar Flexbox o CSS Grid en el diseño.
2. **Asegúrate de que el arte y los elementos estén en su lugar** como en la versión original.
3. **Prueba tu diseño** en al menos dos navegadores diferentes (por ejemplo, Chrome, Firefox, Edge).
4. **Toma capturas de pantalla** de tu terrario en cada navegador para demostrar la compatibilidad entre navegadores.
5. **Entrega** tu código actualizado y las capturas de pantalla.

## Rúbrica

| Criterios       | Ejemplar                                                                 | Adecuado                              | Necesita Mejorar                       |
|------------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| Diseño          | Totalmente refactorizado usando Flexbox o CSS Grid; visualmente atractivo y responsivo | Algunos elementos refactorizados; uso parcial de Flexbox o Grid | Poco o ningún uso de Flexbox o Grid; diseño sin cambios |
| Compatibilidad entre navegadores | Capturas de pantalla proporcionadas para múltiples navegadores; apariencia consistente | Capturas de pantalla para un navegador; pequeñas inconsistencias | Sin capturas de pantalla o grandes inconsistencias |
| Calidad del código | HTML/CSS limpio y bien organizado; comentarios claros                 | Algo organizado; pocos comentarios     | Código desorganizado; sin comentarios |

## Consejos

- Revisa las guías de [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) y [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
- Usa las herramientas de desarrollo del navegador para probar la capacidad de respuesta.
- Comenta tu código para mayor claridad.

---

**Descargo de responsabilidad**:  
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.