Ao iniciar este projeto, você concorda com as diretrizes do Código de Ética e Conduta e do Manual da Pessoa Estudante da Trybe.
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.
- Habilidades
- Entregáveis
- Instruções para entregar seu projeto
- Como desenvolver
- Requisitos do projeto
- Lista de requisitos obrigatórios:
- 1. Crie uma barra verde na parte superior da página
- 2. Adicione o logotipo da Trybewarts com a classe
trybewarts-header-logo
no canto esquerdo da barra superior - 3. Acrescente um formulário de autenticação no canto direito da barra superior contendo os inputs de login, de senha e um botão de entrar
- 4. Crie um título com o texto 'Trybewarts' centralizado dentro do 'Header'
- 5. Adicione um formulário no corpo da página, posicionado ao lado esquerdo
- 6. Crie um id para o formulário do requisito 5
- 7. Adicione a logo da Trybewarts no lado direito da página
- 8.Acrescente no formulário os inputs de 'Nome:', 'Sobrenome:' e 'Email:'
- 9. Crie um select 'Casa' contendo quatro options
- 10. Alinhe os campos de 'Nome' e 'Sobrenome' para que fiquem em linha
- 11. Alinhe os campos de 'Email' e 'Casa' para que fiquem em linha
- 12. Crie um campo de entrada para qual família a pessoa estudante se identifica
- 13. Crie campos de entrada do tipo 'checkbox' contendo seis opções
- 14. Crie campo de entrada para avaliar de 1 a 10 o nível de satisfação com a Trybewarts
- 15. Crie uma textarea com o id 'textarea' contendo o número máximo de caracteres igual à 500
- 16. Crie um campo de entrada do tipo 'checkbox' com o id 'agreement' para validar as informações
- 17. Crie um botão de Enviar para submeter o formulário
- 18. Faça com que o botão 'Enviar' seja habilitado somente após a checkbox do requisito 16 ser selecionada
- 19. Crie um rodapé no final da página
- Lista de requisitos bônus:
- 20. Crie um contador com o ID 'counter' contendo o número de caracteres disponíveis no textarea, variando de 500 até 0, que deverá ser atualizado a medida que algo for digitado na textarea
- 21. Faça com que ao clicar no botão 'Enviar', o conteúdo do formulário seja substituído pelas informações preenchidas
- Lista de requisitos não avaliativos:
- Lista de requisitos obrigatórios:
- Depois de terminar o desenvolvimento (opcional)
- Avisos finais
Neste projeto, verificamos se você é capaz de:
-
Criar formulários em HTML;
-
Utilizar CSS Flexbox para criar layouts flexíveis;
-
Criar regras CSS específicas para serem aplicadas a dispositivos móveis;
-
Construir páginas que alteram o seu layout de acordo com a orientação da tela;
Para entregar o seu projeto você deverá criar um Pull Request neste repositório.
Lembre-se que você pode consultar nosso conteúdo sobre Git & GitHub sempre que precisar!
Neste projeto, você irá desenvolver uma página de formulário da Escola de Magia de Trybewarts, em que as pessoas estudantes poderão enviar seus feedbacks sobre a escola. O tema desse projeto é baseado na obra 'Harry Potter', de J. K. Rowling, já que programar é o mais próximo que podemos chegar de algo verdadeiramente mágico! Mas não se preocupe se não tiver conhecimento sobre o universo da obra original, pois criamos nossa própria versão da Escola de Bruxaria e você terá todas as informações necessárias para a construção do projeto nesse readme!
O seu 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.
- Projeto em dupla.
- Será
1
dia de projeto. - Data de entrega para avaliação final do projeto:
23/06/2021 - 14:00h
.
Esse projeto tem um fluxo um pouco diferente dos outros. Os passos 1 a 6 devem ser feitos por uma pessoa da dupla (a que vai criar a branch de trabalho). A outra pessoa deve fazer apenas o passo 1 e depois mudar para a branch criada pela primeira pessoa.
Exemplo: git checkout joao-silva-trybewarts-project
- Clone o repositório
git clone git@github.com:Atharr/mytrybewarts.git
.- Entre na pasta do repositório que você acabou de clonar:
cd mytrybewarts
- Instale as dependências e inicialize o projeto
- Instale as dependências:
npm install
- Crie uma branch a partir da branch
main
- Verifique que você está na branch
main
- Exemplo:
git branch
- Exemplo:
- Se não estiver, mude para a branch
main
- Exemplo:
git checkout main
- Exemplo:
- Agora, crie uma branch onde você vai guardar os
commits
do seu projeto- Você deve criar uma branch no seguinte formato:
nome-sobrenome-nome-do-projeto
- Exemplo:
git checkout -b joao-silva-trybewarts-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/joao/code/sd-013-a-project-trybewarts
- 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 joao-silva-trybewarts-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
-
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; -
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).
-
Você irá desenvolver este projeto em dupla e é fundamental que siga as instruções do repositório.
Todos os requisitos tem como base a página a seguir, que representa um formulário de avaliação da Escola de Magia de Trybewarts. Use a imagem do site como base e respeite o posicionamento dos elementos, mas quanto às cores e elementos de design que não interfiram nesses aspectos sinta-se livre para deixar a sua criatividade fluir!
Algumas coisas devem seguir um padrão pré-estabelecido para que os testes de correção funcionem corretamente.
⚠ Alguns requisitos pedem para utilizar Flexbox. Tenha atenção no que é solicitado caso vá usar algum framework CSS para que os requisitos sejam atendidos. ⚠
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.
Para garantir a qualidade do código, vamos utilizar neste projeto os linters ESLint
e Stylelint
.
Assim o código estará alinhado com as boas práticas de desenvolvimento, sendo mais legível
e de fácil manutenção! Para rodá-los localmente no projeto, execute os comandos abaixo:
npm run lint
npm run lint:styles
Em caso de dúvidas, confira o material do course sobre ESLint e Stylelint.
Você pode rodar o cypress localmente para verificar se seus requisitos estão passando, para isso execute o um dos seguintes comandos:
Para executar os testes apenas no terminal:
npm test
Para executar os testes e vê-los rodando em uma janela de navegador:
npm run cypress:open
ou
npx cypress open
Após executar um dos dois comandos acima, será aberta uma janela de navegador e então basta clicar no nome do arquivo de teste que quiser executar (project.spec.js), ou para executar todos os testes clique em Run all specs
Você também pode assistir a este vídeo 😉🎙
Para rodar o cypress é preciso ter rodado o comando npm install anteriormente.
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.
Pontos importantes:
- Esta barra deve possuir a classe
header
- A classe
header
deve determinar que o elemento é um flex container - A classe header deve possuir a propriedade
background-color: rgb(50, 167, 145)
- Existe um elemento com a classe
header
- O elemento possui a propriedade CSS
display: flex
- O elemento possui a propriedade CSS
background-color: rgb(50, 167, 145)
2. Adicione o logotipo da Trybewarts com a classe trybewarts-header-logo
no canto esquerdo da barra superior
Pontos importantes:
- Deve existir um elemento img com a classe
trybewarts-header-logo
- O logotipo deve estar alinhado à esquerda dentro da barra verde
- O atributo
src
do logotipo deve apontar paraimages/trybewarts-header-logo.svg
- Existe um elemento
img
com a classetrybewarts-header-logo
- O elemento está alinhado à esquerda da barra
- O elemento possui o atributo
src
apontando paraimages/trybewarts-header-logo.svg
3. Acrescente um formulário de autenticação no canto direito da barra superior contendo os inputs de login, de senha e um botão de entrar
Pontos importantes:
- O formulário deve ter a classe
trybewarts-login
- O alinhamento à direita deve ser feito usando a propriedade flex que faz os elementos terem o espaçamento máximo entre eles dentro de um determinado container
- Existem dois inputs e um botão dentro do formulário
- Os inputs deverão conter placeholders com as palavras 'Login' e 'Senha',
- O formulário deve ser um flex container
- O formulário deve aceitar como padrão o login 'tryber@teste.com' e a senha '123456'
- Caso o login ou a senha sejam diferentes do padrão, ao clicar no botão deverá ser emitido um alerta contendo o texto 'Login ou senha inválidos.'
- Caso o login ou a senha sejam as mesmas definidas por padrão, ao clicar no botão deverá ser emitido um alerta contendo o texto 'Olá, Tryber!'
- Existe um elemento
form
com a classetrybewarts-login
- O elemento está alinhado à direita dentro da barra verde
- Existem dois inputs e um botão dentro do formulário
- Os inputs de login e senha possuem, respectivamente, os placeholders
Login
eSenha
- O formulário possui a propriedade CSS
display: flex
- O click no botão de login dispara um alert com o texto "Login ou senha inválidos", no caso de erro de preenchimento dos dados
- O click no botão de login dispara um alert com o texto "Olá, Tryber!", no caso de preenchimento correto dos dados.
Pontos importantes:
- Deve existir um elemento
<h1>
com o idtrybewarts-header-title
- O elemento deve possuir o texto "Trybewarts"
- O título deverá estar centralizado na barra verde
- O header deve ter exatamente três elementos filhos
- O filho do meio deve ser o título
- Existe um elemento
h1
com o idtrybewarts-header-title
- O elemento possui um conteúdo de texto
Trybewarts
- O elemento com a classe
header
deve possuir exatos3
elementos filhos - O filho do meio do elemento com a classe
header
deve ser o título h1Trybewarts
Pontos importantes:
- Deve existir um formulário com o id
evaluation-form
- O formulário deve estar inserido na tag
main
do HTML - Tanto o formulário quanto o
main
devem ser flex containers - O formulário deve ter uma largura de 675px
- Existe um elemento
form
com o idevaluation-form
- O elemento está dentro da tag
main
- O elemento
main
e oform
possuem a propriedade CSSdisplay: flex
- O elemento
form
possui a propriedade CSSwidth: 675px
Ponto importante:
- Alinhe o eixo principal dessa classe para ser o eixo vertical
- Existe um elemento com o ID
evaluation-form
- O elemento possui a propriedade CSS
display: flex
- O elemento possui a propriedade CSS
flex-direction: column
Pontos importantes:
- Deve possuir o id
trybewarts-forms-logo
- O atributo
src
do logotipo deve apontar paraimages/trybewarts-colored.svg
- A imagem deve possuir um
height
de500px
- Existe um elemento
img
com o idtrybewarts-forms-logo
- O elemento possui o atributo
src
apontando paraimages/trybewarts-colored.svg
Pontos importantes:
- Inputs de 'Nome', 'Sobrenome' e 'Email' deverão ser criados
- Os inputs devem possuir os ids 'input-name', 'input-lastname' e 'input-email'
- Os inputs deverão conter um placeholder com 'Nome', 'Sobrenome' e 'Email' em seus respectivos campos
- Existe 3 elementos inputs com os IDs
input-name
,input-lastname
einput-email
- Os inputs de nome, sobrenome e email devem possuir, respectivamente, o atributo de
placeholder
com os valoresNome
,Sobrenome
eEmail
Pontos importantes:
- O select deverá conter o id
house
- Deverá conter a opção com text e value
Gitnória
e com o idgitnoria-house
- Deverá conter a opção com text e value
Reactpuff
e com o idreactpuff-house
- Deverá conter a opção com text e value
Corvinode
e com o idcorvinode-house
- Deverá conter a opção com text e value
Pytherina
e com o idpytherina-house
- Existe um elemento
select
com o idhouse
- Existe um elemento
option
com o idgitnoria-house
- Existe um elemento
option
com o idreactpuff-house
- Existe um elemento
option
com o idcorvinode-house
- Existe um elemento
option
com o idpytherina-house
Pontos importantes:
- Os campos de 'Nome' e 'Sobrenome' devem estar lado a lado
- O campo de
Sobrenome
está à direita do campo deNome
Pontos importantes:
- Os campos de 'Email' e 'Casa' devem estar abaixo dos de 'Nome' e 'Sobrenome'
- Os campos de 'Email' e 'Casa' devem estar lado a lado
- O campo 'Casa' deve possuir o
id="house"
- O campo de
Casa
está à direita do campo deEmail
Pontos importantes:
- Um elemento com o id
label-family
e o texto "Qual sua família?" deverá ser criado - O campo deve ser formado por três radio buttons com os valores "Frontend", "Backend" e "FullStack"
- Os radio buttons devem ter o atributo
name
com o valor "family" - Posicione os radio buttons para ficar abaixo um do outro
- Posicione os radio buttons abaixo do label
- Existe um elemento
label
com o idlabel-family
que possui um conteúdo de textoQual sua família?
- Existe um elemento
input
com o atributovalue="Frontend"
- Existe um elemento
input
com o atributovalue="Backend"
- Existe um elemento
input
com o atributovalue="FullStack"
- Existem 3 elementos
input
do tiporadio
com o atributoname="family"
- Os inputs do tipo
radio
estão um abaixo do outro - Os 3 inputs do tipo
radio
estão abaixo do texto da label
Pontos importantes:
- Um elemento com o id
label-content
e o texto "Qual conteúdo você está com mais vontade de aprender?" deverá ser criado - O campo deve ser formado por seis checkbox com as seguintes opções (seguindo esta ordem): HoFs, Jest, Promises, React, SQL e Python
- Os valores (
value
) dos campos são, respectivamente: HoFs, Jest, Promises, React, SQL, Python - As classes (
class
) dos campos devem sersubject
- Posicione as checkbox para ficar lado a lado
- Posicione as checkbox a abaixo do label
- Existe um elemento
label
com o idlabel-content
que possui um conteúdo de textoQual conteúdo você está com mais vontade de aprender?
- Existe um
input
com o atributovalue="HoFs"
- Existe um
input
com o atributovalue="Jest"
- Existe um
input
com o atributovalue="Promises"
- Existe um
input
com o atributovalue="React"
- Existe um
input
com o atributovalue="SQL"
- Existe um
input
com o atributovalue="Python"
- Os elementos checkbox então posicionados abaixo da label
Pontos importantes:
- Um elemento com o id
label-rate
e o texto "Como você avalia a Trybewarts?" deverá ser criado - O campo deve ser formado por dez radio buttons, contendo as opções de 1 a 10
- Os radio buttons devem ter o atributo
value
com o valor de suas opções de 1 a 10. - Os radio buttons devem ter o atributo
name
com o valor "rate" - Posicione os radio buttons para ficar lado a lado
- Posicione os radio buttons à direita da label
- Existe um elemento
label
com o idlabel-rate
que possui um conteúdo de textoComo você avalia a Trybewarts?
- Existem 10
radio-buttons
com o atributoname="rate"
- Existem 10
radio-buttons
contendo o atributovalue
de 1 a 10 - Os
radio-buttons
estão à direita do texto da label
15. Crie uma textarea com o id 'textarea' e uma label com a classe 'textarea' contendo o número máximo de caracteres igual à 500
Pontos importantes:
- Uma label com a classe
textarea
e o texto "Deixe seu comentário:" deverá ser criado - O campo
textarea
deverá ter o máximo de 500 caracteres
- Existe uma
label
com a classetextarea
e o textoDeixe seu comentário:
- O elemento
textarea
possui um limite de 500 caracteres
Pontos importantes:
- Um rótulo (label) com o id
label-infos
e o texto "Você concorda com o uso das informações acima?" deverá ser criado - O campo deve ser formado por um checkbox
- O campo de 'checkbox' deve possuir o ID
agreement
- Posicione a checkbox ao lado da label
- Existe uma label com o id
label-infos
que possui o textoVocê concorda com o uso das informações acima?
- Existe um input do tipo
checkbox
com o idagreement
Pontos importantes:
- Um botão do tipo
submit
deverá ser criado - O botão deve possuir o ID
submit-btn
- Deverá conter o texto 'Enviar'
- Existe um botão do tipo
submit
com o idsubmit-btn
e o textoEnviar
18. Faça com que o botão 'Enviar' seja habilitado somente após a checkbox do requisito 16 ser selecionada
Pontos importantes:
- O botão deverá estar desabilitado caso a checkbox não esteja selecionada
- O botão deverá ser habilitado caso a checkbox seja selecionada
- O botão está inicialmente desabilitado
- O botão torna-se habilitado, ao marcar o campo com id
agreement
Pontos importantes:
- O rodapé deverá conter o texto "Direitos reservados à Trybewarts©"
- Existe um elemento
footer
deve possuir o textoDireitos reservados à Trybewarts©
20. Crie um contador com o ID 'counter' contendo o número de caracteres disponíveis no textarea, variando de 500 até 0, que deverá ser atualizado a medida que algo for digitado na textarea
Pontos importantes:
- O contador deverá possuir o ID
counter
- O contador inicialmente deve possuir o valor
500
- O contador deverá decrementar a medida que algo for escrito no campo
textarea
- O contador deverá incrementar a medida que algo for deletado no campo
textarea
- O elemento
textarea
deverá possuirid="textarea"
- Existe um elemento com o id
counter
- Existe um elemento com o id
textarea
- O preenchimento do campo de
textarea
altera o número apresentado no elemento#counter
21. Faça com que ao clicar no botão 'Enviar', o conteúdo do formulário seja substituído pelas informações preenchidas
Pontos importantes:
- Todos os campos do formulário devem ser substituídos.
- Deve haver um campo com o formato "Nome: Alguem Aqui"
- Deve haver um campo com o formato "Email: email@mail.com"
- Deve haver um campo com o formato "Casa: Casa Escolhida"
- Deve haver um campo com o formato "Família: Família Escolhida"
- Deve haver um campo com o formato "Matérias: Matérias, Marcadas, Aqui"
- Deve haver um campo com o formato "Avaliação: NotaAqui"
- Deve haver um campo com o formato "Observações: Observações aqui"
- Os
inputs
tipocheckbox
referentes à lista de conteúdo possuemclass="subject"
- Ao clicar no botão de enviar, existe um texto no formato
Nome: -Nome- -Sobrenome-
- Ao clicar no botão de enviar, existe um texto no formato
Email: -Email-
- Ao clicar no botão de enviar, existe um texto no formato
Casa: -Casa-
- Ao clicar no botão de enviar, existe um texto no formato
Família: -Família-
- Ao clicar no botão de enviar, existe um texto no formato
Matérias: -Matérias Selecionadas-
- Ao clicar no botão de enviar, existe um texto no formato
Avaliação: -Avaliação-
- Ao clicar no botão de enviar, existe um texto no formato
Observações: -Observações-
Esses requisitos não são verificáveis pelo avaliador automático.
- Utilize o arquivo feedback.md para deixar comentários e sugestões sobre o projeto! Para nós, é muito importante saber se vocês tiveram uma boa experiência e se foi praticar seus conhecimentos com o Trybewarts!
- Utilize media queries para inserir breakpoints para telas de diferentes tamanhos.
- Leve em conta a largura da tela e a experiência do usuário ao reorganizar o layout para dispositivos menores.
- Tente inserir um 'menu hambúrguer' na barra superior para lidar com o login usando javascript. Se não conseguir, tente criar uma página separada de login, uma prática muito comum.
- Deixe sua criatividade fluir! Preferimos não avaliar esse requisito justamente pra que você tenha liberdade para executar a responsividade da maneira que você achar mais agradável!
A pessoa dona da branch deve garantir que o último commit nessa branch é seu. Pode ser feita alguma alteração que não afete o cumprimento dos requisitos para realizar o commit.
A outra pessoa integrante da dupla deve criar uma nova branch
a partir da branch
de trabalho (a primeira branch criada pela equipe).
Exemplo:
- Use
git branch
para ter certeza de que está na branch de trabalho; - Caso não esteja use
git checkout joao-silva-trybewarts-project
para trocar debranch
; - User
git checkout -b mariazinha-trybewarts-project
para criar uma nova branch a partir da branch anterior (joaozinnho-trybewarts-project
);
Garanta que o último commit da branch é de autoria da pessoa dona de cada branch. Novamente pode ser feita alguma alteração que não afete o cumprimento dos requisitos para realizar o commit.
-
Adicione sua branch com o novo
commit
ao repositório remoto- Usando o exemplo anterior:
git push -u origin mariazinha-trybewarts-project
- Usando o exemplo anterior:
-
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 o seu projeto ser avaliado você deve se assegurar que o último commit na branch é da pessoa dona da branch.
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-013-a
.
-
Caso tenha alguma dúvida, aqui tem um vídeo explicativo.
- 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/trybewarts
.
À medida que você e as outras pessoas que estudam na Trybe forem entregando os projetos, vocês receberão um alerta via Slack para também fazer a revisão dos Pull Requests dos seus colegas. Fiquem atentos às mensagens do "Pull Reminders" no Slack!
Use o material que você já viu sobre Code Review para te ajudar a revisar os projetos que chegaram para você.
Ao finalizar e submeter o projeto, não se esqueça de avaliar sua experiência preenchendo o formulário. Leva menos de 3 minutos!
Link: FORMULÁRIO DE AVALIAÇÃO DE PROJETO
O avaliador automático não necessariamente avalia seu projeto na ordem em que os requisitos aparecem no readme. Isso acontece para deixar o processo de avaliação mais rápido. Então, não se assuste se isso acontecer, ok?