msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '108bf6a15b'
${ noResults }
Web-Dev-For-Beginners/translations/pt/3-terrarium/2-intro-to-css/assignment.md

3.0 KiB
Raw Blame History

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 e CSS 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. 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.