Javascript: Revisão de HTML, CSS, Bootstrap e JavaScript
De Aulas
Afluentes: Desenvolvimento Front-end I
Atividade
- Como processo de revisão, iremos construir juntos uma página. Teremos como recursos o uso de HTML, CSS, Bootstrap e JavaScript.
- Dessa forma, é apresentada aqui uma definição criada a partir de uma conversa com um cliente (fictício) e algumas considerações que fazem parte da forma como nossa empresa (fictícia) trabalha na criação de páginas.
- Tudo aqui é um modelo simplificado para focarmos apenas na revisão dos conteúdos.
- Nesse tipo de processo, é muito importante que os alunos participem da criação de forma ativa e tirem o máximo de dúvidas durante o desenvolvimento.
- Opcionalmente, os alunos também podem ir implementando, juntamente com o professor, em seu computador. Nesse caso, enquanto estiverem acompanhando, se avisem ao professor se algo não estiver funcionando, ou vocês precisam de mais tempo para alcançar o professor.
Definição
Um design pediu para criar uma página de portfolio para ele, com uma página inicial contendo algumas informações sobre si e uma foto, uma página com uma galeria de algumas de suas obras. Além disso, ele quer uma página para colocar informações de contato e um formulário para envio de mensagem.
O cliente enviou informações sobre ele, contato e portfolio em arquivo anexo.
Ele também pediu que a página fosse estilo dark mode, mas não especificou um design específico.
O cliente também pediu uma página limpa, com um sistema de menus para alterar as informações da página.
Ele também gostaria que a página pudesse ser visualizada também em smartphones.
Considerações
Nossa empresa irá trabalhar com alguns recursos como:
- A base da página será em HTML e CSS (se necessário) para a página.
- Usaremos Bootstrap para obter um design legal e boa responsividade e por ser mobile first.
- Do bootstrap, encontrar um design/tema legal no modo escuro.
- Usaremos Javascript para:
- validar o formulário antes de mandar.
- mostrar informações das imagens da galeria quando clicarmos nela ou algum botão específico para mostrar as informações.
