🚀 Guia de Aula Prática
Siga o passo a passo descrito abaixo para realizar as atividades de hoje.
PROJETO PRÁTICO — 2º ANO
Atuar como um Web Designer analisando a primeira versão do sistema da Academia. Sua missão é propor e implementar melhorias visuais no HTML e no CSS para transformar uma interface simples em um site moderno, bonito, organizado e profissional.
Você pode realizar toda a codificação utilizando a plataforma online do CodePen ou estruturar diretamente no seu computador utilizando o editor de código VS Code.
Analise a estrutura do sistema e escolha pelo menos 8 pontos de evolução visual no CSS para aplicar no seu projeto, como por exemplo:
• Mudar a paleta de cores geral e a cor de fundo da página; • Customizar fontes, tamanhos de títulos e espaçamentos; • Modificar estilos de botões (efeitos de hover, sombras e cantos arredondados); • Estilizar a tabela de alunos e destacar visualmente os pagamentos em dia/pendentes; • Organizar o layout de forma responsiva utilizando Flexbox ou Grid.
O grande foco deste desafio é dar asas à sua criatividade. Teste combinações harmônicas e verifique constantemente no navegador se a interface se tornou mais intuitiva e agradável para o usuário final.
Lembre-se de que o acervo CSS da nossa Biblioteca Virtual está totalmente disponível para consulta! Acesse-o pelo botão no topo da página para conferir regras prontas de estilo, paletas de cores modernas e exemplos estruturais que vão acelerar o seu desenvolvimento.
Sinta-se livre para realizar as personalizações que quiser! Use propriedades como box-shadow para criar relevo nos cards, aplique transition para deixar as interações suaves e insira emojis ou ícones para deixar os status de pagamento mais claros e visuais.
PROJETO PRÁTICO — 3º ANO
Explorar e dominar a plataforma online CodePen. O seu grande objetivo nesta atividade é analisar o código e a estrutura de um design de cardápio/site de Restaurante pré-estabelecido e reformulá-lo por completo de forma autônoma, adaptando a interface com base nos seus gostos pessoais.
Como este projeto será desenvolvido inteiramente dentro do CodePen, faça o login na ferramenta, acesse o link do template base do Restaurante disponibilizado pelo professor e faça um Fork para salvar uma cópia no seu perfil.
Navegue pelas abas de HTML e CSS. Identifique quais classes cuidam do fundo, dos textos dos pratos, dos preços e da disposição das imagens para entender como a estrutura antiga foi montada.
Modifique o CSS para aplicar a sua personalidade! Altere fontes, adicione efeitos de hover nos botões do menu, mude as imagens padrão para pratos que você prefere e crie uma paleta de cores totalmente nova que combine com o seu restaurante ideal.
O CodePen atualiza a tela automaticamente! Sempre que mudar uma linha de CSS, aguarde um segundo na janela de visualização interna para ver a mudança acontecer em tempo real. Se precisar de inspiração para fontes ou layouts, consulte o botão da Biblioteca Virtual no topo da página.
Não tenha medo de errar, o foco é testar! Você pode transformar o restaurante numa hamburgueria escura e moderna com neon usando text-shadow, ou numa confeitaria minimalista com tons pastel. Use a propriedade border-radius para deixar os cards e fotos dos pratos redondos ou retos.