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
2.9 KiB
41 lines
2.9 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
|
"translation_date": "2025-10-03T09:35:03+00:00",
|
|
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
|
"language_code": "br"
|
|
}
|
|
-->
|
|
# Tarefa de Refatoração de CSS
|
|
|
|
## Objetivo
|
|
|
|
Refatore o projeto do terrário para usar **Flexbox** ou **CSS Grid** na organização do layout. Atualize o HTML e o CSS conforme necessário para alcançar um design moderno e responsivo. Não é necessário implementar elementos arrastáveis—foco apenas no layout e no estilo.
|
|
|
|
## Instruções
|
|
|
|
1. **Crie uma nova versão** do aplicativo de terrário. Atualize o HTML e o CSS para utilizar Flexbox ou CSS Grid no layout.
|
|
2. **Certifique-se de que a arte e os elementos estejam no lugar** como na versão original.
|
|
3. **Teste seu design** em pelo menos dois navegadores diferentes (ex.: Chrome, Firefox, Edge).
|
|
4. **Tire capturas de tela** do seu terrário em cada navegador para demonstrar a compatibilidade entre navegadores.
|
|
5. **Envie** seu código atualizado e as capturas de tela.
|
|
|
|
## Critérios de Avaliação
|
|
|
|
| Critério | Exemplar | Adequado | Necessita Melhorias |
|
|
|------------------|-------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
|
| Layout | Totalmente refatorado usando Flexbox ou CSS Grid; visualmente atraente e responsivo | Alguns elementos refatorados; uso parcial de Flexbox ou Grid | Pouco ou nenhum uso de Flexbox ou Grid; layout inalterado |
|
|
| Compatibilidade | Capturas de tela fornecidas para vários navegadores; aparência consistente | Capturas de tela para um navegador; pequenas inconsistências | Sem capturas de tela ou grandes inconsistências |
|
|
| Qualidade do Código | HTML/CSS limpo e bem organizado; comentários claros | Alguma organização; poucos comentários | Código desorganizado; sem comentários |
|
|
|
|
## Dicas
|
|
|
|
- Revise os guias de [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) e [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
|
|
- Use as ferramentas de desenvolvedor do navegador para testar a responsividade.
|
|
- Comente seu código para maior clareza.
|
|
|
|
---
|
|
|
|
**Aviso Legal**:
|
|
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução. |