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-03T09:32:03+00:00",
|
|
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
|
"language_code": "pt"
|
|
}
|
|
-->
|
|
# Tarefa de Refatoração de CSS
|
|
|
|
## Objetivo
|
|
|
|
Refatorar o projeto do terrário para utilizar **Flexbox** ou **CSS Grid** na disposição dos elementos. 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 na disposição e no estilo.
|
|
|
|
## Instruções
|
|
|
|
1. **Crie uma nova versão** da aplicação do terrário. Atualize o HTML e o CSS para utilizar Flexbox ou CSS Grid na disposição dos elementos.
|
|
2. **Certifique-se de que a arte e os elementos estão no lugar** como na versão original.
|
|
3. **Teste o seu design** em pelo menos dois navegadores diferentes (ex.: Chrome, Firefox, Edge).
|
|
4. **Tire capturas de ecrã** do seu terrário em cada navegador para demonstrar a compatibilidade entre navegadores.
|
|
5. **Submeta** o seu código atualizado e as capturas de ecrã.
|
|
|
|
## Critérios de Avaliação
|
|
|
|
| Critério | Exemplar | Adequado | Necessita Melhorias |
|
|
|----------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
|
| Disposição | Totalmente refatorado utilizando Flexbox ou CSS Grid; visualmente apelativo e responsivo | Alguns elementos refatorados; uso parcial de Flexbox ou Grid | Pouco ou nenhum uso de Flexbox ou Grid; disposição inalterada |
|
|
| Compatibilidade | Capturas de ecrã fornecidas para múltiplos navegadores; aparência consistente | Capturas de ecrã para um navegador; pequenas inconsistências | Sem capturas de ecrã 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/).
|
|
- Utilize as ferramentas de desenvolvimento dos navegadores para testar a responsividade.
|
|
- Comente o 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 pela precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se uma tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução. |