Mobile First: Instagram

Objetivo:

Desenvolver uma versão mobile first do Instagram utilizando apenas HTML5 e CSS3.

Preview: Instagram Codenation

Tópicos:

Neste desafio, você vai praticar os seus conhecimentos em:

• HTML5;
• CSS3;
• Metodologia BEM CSS.

Observações:

• As imagens estão disponíveis na pasta assets;
• As imagens de cada personagem estão dentro de sua respectiva pasta, por exemplo: assets/profiles/black-panther/;
• A imagem de perfil dos personagens é identificada por nome_do_personagem-profile.jpg;
• O site deve ser Mobile First;
• Não utilize frameworks CSS como Bootstrap, Foundation e afins.

Requisitos:

• Node v13.8.0 - ou superior, instalado em seu computador;
• Live Server. ​

O Live server é um módulo NPM que permite servir localmente páginas HTML, sem a necessidade de instalar plugins adicionais no navegador, ou em seu editor.

Uma vez que o nodejs esteja instalado em seu computador, abra o terminal e execute o seguinte comando: npm install -g live-server

Após a instalação, você deverá navegar até o diretório contendo seus arquivos HTML e executar o comando: live-server ./[nome-da-pasta ou arquivo html]

Dicas:

• Utilize as tags semânticas do HTML5 onde julgar necessário;
• Você pode fazer o download do Normalize CSS e utilizá-lo no projeto para "normalizar/resetar" os estilos padrão dos navegadores;
• Inspecione os elementos do preview do Instagram Codenation e descubra como alguns efeitos foram executados.
• Guia BEM CSS
• Guia Atomic Design
• Guia HTML5
• Guia CSS3

Screenshots de Referência

Versão Mobile:

Versão Desktop: