Desenvolver uma versão mobile first do Instagram utilizando apenas HTML5 e CSS3.
Preview: Instagram Codenation
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.
- 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-serverApó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]
- 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
