You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
3.0 KiB
41 lines
3.0 KiB
<!--
|
|
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. |