Você já usa o GitHub diariamente para desenvolver os exercícios, certo? Agora, para desenvolver os projetos, você deverá seguir as instruções a seguir. Fique atento a cada passo, e se tiver qualquer dúvida, nos envie por Slack! #vqv 🚀
Aqui você vai encontrar os detalhes de como estruturar o desenvolvimento do seu projeto a partir desse repositório, utilizando uma branch específica e um Pull Request para colocar seus códigos.
- Clone o repositório
git clone https://github.com/tryber/sd-05-block6-project-facebook-signup.git
.- Entre na pasta do repositório que você acabou de clonar:
cd sd-05-block6-project-facebook-signup
- Crie uma branch a partir da branch
master
- Verifique que você está na branch
master
- Exemplo:
git branch
- Exemplo:
- Se não estiver, mude para a branch
master
- Exemplo:
git checkout master
- Exemplo:
- Agora, crie uma branch onde você vai guardar os
commits
do seu projeto- Você deve criar uma branch no seguinte formato:
nome-de-usuario-nome-do-projeto
- Exemplo:
git checkout -b joaozinho-facebook-project
- Você deve criar uma branch no seguinte formato:
- Crie na raiz do projeto os arquivos que você precisará desenvolver:
- Verifique que você está na raiz do projeto
- Exemplo:
pwd
-> o retorno vai ser algo tipo /Users/joaozinho/code/sd-05-block6-project-facebook-signup
- Exemplo:
- Crie os arquivos index.html, style.css e script.js
- Exemplo:
touch index.html style.css script.js
- Exemplo:
- Adicione as mudanças ao stage do Git e faça um
commit
- Verifique que as mudanças ainda não estão no stage
- Exemplo:
git status
(devem aparecer listados os novos arquivos em vermelho)
- Exemplo:
- Adicione o novo arquivo ao stage do Git
- Exemplo:
git add .
(adicionando todas as mudanças - que estavam em vermelho - ao stage do Git)git status
(devem aparecer listados os arquivos em verde)
- Exemplo:
- Faça o
commit
inicial- Exemplo:
git commit -m 'iniciando o projeto. VAMOS COM TUDO :rocket:'
(fazendo o primeiro commit)git status
(deve aparecer uma mensagem tipo nothing to commit )
- Exemplo:
- Adicione a sua branch com o novo
commit
ao repositório remoto
- Usando o exemplo anterior:
git push -u origin joaozinho-facebook-project
- Crie um novo
Pull Request
(PR)
- Vá até a página de Pull Requests do repositório no GitHub
- Clique no botão verde "New pull request"
- Clique na caixa de seleção "Compare" e escolha a sua branch com atenção
- Clique no botão verde "Create pull request"
- Adicione uma descrição para o Pull Request, um título claro que o identifique, e clique no botão verde "Create pull request"
- Não se preocupe em preencher mais nada por enquanto!
- Volte até a página de Pull Requests do repositório e confira que o seu Pull Request está criado
Para entregar o seu projeto você deverá criar um Pull Request neste repositório.
Este Pull Request deverá conter os arquivos index.html
, style.css
e script.js
, que conterão seu código HTML, CSS e JavaScript, respectivamente.
Você pode adicionar outros arquivos se julgar necessário. Qualquer dúvida, procure a monitoria.
Lembre-se que você pode consultar nosso conteúdo sobre Git & GitHub sempre que precisar!
💡O projeto deve ser o mais parecido possível com a página inicial do Facebook. Respeitando os requisitos, tente fazer uma cópia perfeita!
Todos os requisitos tem como base a página do Facebook. Use a imagem do site, além de acessar a página de cadastro/login. Tente ser o mais fiel possível.
Use a inspeção de código para verificar a estrutura da página de cadastro/login do Facebook.
Você irá desenvolver este projeto em dupla e é fundamental que siga as instruções do repositório.
⚠️ Leia-os atentamente e siga à risca o que for pedido. Em particular, atente-se para os nomes de ids que alguns elementos de seu projeto devem possuir. ⚠️
O não cumprimento de um requisito, total ou parcialmente, impactará em sua avaliação.
-
Os requisitos do seu projeto são avaliados automaticamente, sendo utilizada a resolução de tela de
1366 x 768
(1366 pixels de largura por 768 pixels de altura).-
⚠️ Logo, recomenda-se desenvolver seu projeto usando a mesma resolução, via instalação deste plugin doChrome
para facilitar a configuração da resolução.⚠️
-
-
Atente-se para o tamanho das imagens que você utilizará neste projeto. Não utilize imagens com um tamanho maior que 500Kb.
-
⚠️ Utilize uma ferramenta como esta para redimensionar as imagens.⚠️ -
Caso a avaliação falhe com alguma mensagem de erro parecida com
[409:0326/130838.878602:FATAL:memory.cc(22)] Out of memory. size=4194304
, provavelmente as imagens que você está utilizando estão muito grandes. Tente redimensiona-las para um tamanho menor.
-
-
Para verificar se a sua avaliação foi computada com sucesso, você pode verificar os detalhes da execução do avaliador.
-
Na página do seu Pull Request, acima do "botão de merge", procure por "Evaluator job" e clique no link "Details";
-
Na página que se abrirá, procure pela linha "Cypress evaluator step" e clique nela;
-
Analise os resultados a partir da mensagem "(Run Starting)";
-
Caso tenha dúvidas, consulte este vídeo ou procure a monitoria.
-
-
Você tem liberdade para adicionar novos comportamentos ao seu projeto, seja na forma de aperfeiçoamentos em requisitos propostos ou novas funcionalidades, desde que tais comportamentos adicionais não conflitem com os requisitos propostos.
- Em outras palavras, você pode fazer mais do que for pedido, mas nunca menos.
-
Contudo, tenha em mente que nada além do que for pedido nos requisitos será avaliado. Esta é uma oportunidade de você exercitar sua criatividade e experimentar com os conhecimentos adquiridos.
Caso você faça o download de bibliotecas externas, utilize o diretório libs (a partir da raiz do projeto) para colocar os arquivos (*.css, *.js, etc...) baixados.
4 - Um campo de entrada de texto no canto superior direito para receber o email ou o telefone do usuário com o id "user-email-phone"
.
5 - Um título com o texto 'Email ou telefone' acima do campo de entrada de texto para email ou telefone com o id "user-email-phone-label"
.
6 - Um campo de entrada de texto para digitar a senha do usuário, posicionado no canto superior direito. O campo também deve estar posicionado à direita do campo de entrada de texto para email ou telefone.
Pontos importantes: * Ao digitar a senha, o padrão deve ser '*****'.
7 - Um botão com o id "button-login"
e o texto 'Entrar', à direita do campo de entrada de texto para senha.
Pontos importantes:
* Ao clicar no botão, um alert
deve ser exibido com o email ou telefone digitado pelo usuário.
8 - Um texto 'O Facebook ajuda você a se conectar e compartilhar com as pessoas que fazem parte da sua vida.' abaixo da barra superior azul do Facebook, no canto esquerdo.
9 - Uma imagem com id "facebook-networking"
, que ficará abaixo do item 8. Essa imagem deve conter o mapa do mundo e as conexões entre as pessoas.
Pontos importantes: * Dê o nome "networking.png" para a imagem.
12 - Um campo de entrada de texto para o nome do usuário. Posicione esse campo abaixo do texto 'É rápido e fácil.'.
Pontos importantes:
* Defina o placeholder
com o valor "Nome".
13 - Um campo de entrada de texto para o sobrenome do usuário. Posicione esse campo à direita do campo nome.
Pontos importantes:
* Defina o placeholder
com o valor "Sobrenome".
14 - Um campo de entrada de texto para o celular ou email. Posicione esse campo abaixo do sobrenome do usuário.
Pontos importantes:
* Defina o placeholder
com o valor "Celular ou email".
15 - Um campo de entrada de texto para a nova senha do usuário. Posicione esse campo abaixo do celular/email.
Pontos importantes:
* Lembre-se de respeitar a formatação de senha '*****'.
* Defina o placeholder
com o valor "Nova senha".
Pontos importantes:
* Diferentemente do Facebook, esse campo deve ser composto de um único input, e você deverá utilizar alguma biblioteca para transformá-lo em um datepicker.
* Defina o placeholder
com o valor "dd/mm/aaaa".
Pontos importantes: * Posicione abaixo do texto 'Gênero'.
Pontos importantes:
* Esse botão deve pegar os dados dos itens 12 até 19 e validá-los.
* Caso tudo esteja certo, exiba um alert
com todos os dados no seguinte formato:
Por exemplo:
Se a pessoa que usa digitar o nome "João" e selecionar "Personalizado", o conteúdo da mensagem no alert
deve ser 'João - Personalizado'.
* Caso alguma validação dê errado, exiba um alert
com a mensagem 'Dados inválidos'.
Esse requisito não é verificável pelo avaliador automático. Sua apresentação (opcional) será realizada durante o fechamento do dia seguinte ao final do projeto
- Para colocar sua página no GitHub Pages, não é necessário remover o conteúdo que já está lá, você pode apenas adicionar essa nova página. Para isso, todo o conteúdo desse projeto deve ser colocado em uma pasta
/projetos/facebook-signup
.
-
⚠ FIQUE ATENTO ÀS ISSUES DO CODE CLIMATE, PARA RESOLVÊ-LAS ANTES DE FINALIZAR O DESENVOLVIMENTO. SEU PROJETO SOMENTE SERÁ AVALIADO SE NÃO TIVER ISSUES NO CODE CLIMATE! ⚠
-
Faça
commits
das alterações que você fizer no código regularmente; -
Lembre-se de sempre após um
(ou alguns)commits
atualizar o repositório remoto (o famosogit push
); -
Os comandos que você utilizará com mais frequência são:
-
git status
(para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage); -
git add
(para adicionar arquivos ao stage do Git); -
git commit
(para criar um commit com os arquivos que estão no stage do Git); -
git push -u nome-da-branch
(para enviar o commit para o repositório remoto na primeira vez que fizer opush
de uma nova branch); -
git push
(para enviar o commit para o repositório remoto após o passo anterior).
-
Para sinalizar que o seu projeto está pronto para o "Code Review" dos seus colegas, faça o seguinte:
-
Vá até a página DO SEU Pull Request, adicione a label de "code-review" e marque seus colegas:
-
No menu à direita, clique no link "Labels" e escolha a label code-review;
-
No menu à direita, clique no link "Assignees" e escolha o seu usuário;
-
No menu à direita, clique no link "Reviewers" e digite
students
, selecione o timetryber/students-sd-05
.
-
Caso tenha alguma dúvida, aqui tem um vídeo explicativo.
Use o conteúdo sobre Code Review para te ajudar a revisar os Pull Requests.
#VQV 🚀