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 '5fb78cc2d1'
${ noResults }
Web-Dev-For-Beginners/translations/br/3-terrarium/2-intro-to-css/assignment.md

2.9 KiB
Raw Blame History

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