Este projeto foi realizado seguindo as orientações do desafio "Recriando a página inicial do Instagram" da Digital Innovation One, do Bootcamp da Everis.

Na primeira tentativa, após as aulas, o código copiado não foi suficiente (como veremos posteriormente), possivelmente porque minhas imagens haviam dimensões bem diferentes das da professora. Felizmente consegui arrumar o projeto de tal forma que ele ficou minimamente parecido com a tela inicial do Instagram.

• Criar uma página semelhante a tela inicial da rede social Instagram ✔️
• Fazer a página ser responsiva ✔️

• Tela de login ✔️
• Tela de cadastro ✔️
• Botões de download do app funcionais ✔️
• Navegação entre as telas ✔️

Após arrumar todos os problemas, o projeto foi finalizado com sucesso, atendendo todos os objetivos propostos e indo além do pedido!

Podemos ver como ele ficou nas próximas imagens:

Tela do notebook

Tela de tablet

Tela de celular

Além de resolver os problemas que existiam de espaçamento e imagem, alterei a ilustração do celular para a que é usada no próprio site do Instagram, adicionei uma mensagem no rodapé e deixei o site mais responsivo de forma que nenhuma informação ou mensagem seja cortada ou perdida.

Modifiquei algumas linhas de código e deixei alguns códigos que foram vistos na aula comentados para fins didáticos.

Além dessas telas, criei a tela de login por usuário e senha e a tela de cadastro

Tela de login

Tela de cadastro

Essas telas também são responsivas, para acessar a tela de login apartir da tela inicial, basta clicar em remover conta ou alterar conta, para acessar a de cadastro, só clicar em cadastre-se. Na tela de cadastro é possível ir para a de login, clicando em conecte-se e da de login é possível ir para a de cadastro também (clicando em cadastre-se), assim o site fica conectado.

Além disso, se clicar nos botões da Apple ou Google Play, abre o site da loja da empresa na página do aplicativo do Instagram para download.

Com esse projeto consegui treinar meus conhecimentos (adquiridos no curso) de HTML5 e CSS3, criando novas classes e estilizando elas por conta própria.

Vale lembrar que quando terminei o desafio acompanhando as aulas, minhas telas estavam assim:

Tela antiga do notebook

Tela antiga do celular

Tela antiga do tablet

Podemos notar no começo após as aulas que a imagem do celular estava grudado no campo de login, além disso a imagem dele estava distorcida, os logos da Apple e Android ficaram cortados, o logo do Instagram ultrapassou os limites da caixa e minha foto ficou um pouco menor que o esperado...

Como percebemos, estes problemas foram arrumados!