codenation-react-2's Introduction

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