Skip to content

lucsduartee/trybewarts

BranchesTags

Repository files navigation

Termos de acordo

Ao iniciar este projeto, você concorda com as diretrizes do Código de Ética e Conduta e do Manual da Pessoa Estudante da Trybe.

Boas vindas ao repositório do projeto Trybewarts Wizarding School! 🧙

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.

Sumário

Habilidades

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;

Entregáveis

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!

O que deverá ser desenvolvido

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!

Desenvolvimento

⚠️ É importante que seus arquivos tenham exatamente estes nomes! ⚠️

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.

Data de entrega

  • Projeto em dupla.
  • Será 1 dia de projeto.
  • Data de entrega para avaliação final do projeto: 28/07/2021 - 14:00h.

Instruções para entregar seu projeto

Antes de começar a desenvolver:

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

  1. Clone o repositório
  • git clone git@github.com:betrybe/sd-014-a-project-trybewarts.git.
  • Entre na pasta do repositório que você acabou de clonar:
    • cd sd-014-a-project-trybewarts
  1. Instale as dependências e inicialize o projeto
  • Instale as dependências:
    • npm install
  1. Crie uma branch a partir da branch main
  • Verifique que você está na branch main
    • Exemplo: git branch
  • Se não estiver, mude para a branch main
    • Exemplo: git checkout main
  • 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
  1. 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 como /Users/joao/code/sd-014-a-project-trybewarts
  • Crie os arquivos index.html, style.css e script.js
    • Exemplo: touch index.html style.css script.js
  1. 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)
  • 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)
  • 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 como nothing to commit )
  1. Adicione a sua branch com o novo commit ao repositório remoto
  • Usando o exemplo anterior: git push -u origin joao-silva-trybewarts
  1. 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 no seguinte formato: [Joao Silva e Maria Souza] Trybewarts, e clique no botão verde "Create pull request"

Durante o desenvolvimento

  • 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:

    1. git status (para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage);

    2. git add (para adicionar arquivos ao stage do Git);

    3. git commit (para criar um commit com os arquivos que estão no stage do Git);

    4. git push -u nome-da-branch (para enviar o commit para o repositório remoto na primeira vez que fizer o push de uma nova branch);

    5. git push (para enviar o commit para o repositório remoto após o passo anterior).

Como desenvolver

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!

Página da Trybewarts

Observações técnicas

Algumas coisas devem seguir um padrão pré-estabelecido para que os testes de correção funcionem corretamente.

⚠️ 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. ⚠️

⚠ 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 do Chrome 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.

ESLint e Stylelint

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.

⚠️ Lembre-se que o seu projeto só será avaliado se estiver passando pelos checks dos linters.

Cypress

Cypress é uma ferramenta de teste de front-end desenvolvida para a web. 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.

Requisitos do projeto

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.

Lista de requisitos obrigatórios:

1. Crie uma barra verde na parte superior da página

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)

O que será verificado:

  • 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 para images/trybewarts-header-logo.svg

O que será verificado:

  • Existe um elemento img com a classe trybewarts-header-logo
  • O elemento está alinhado à esquerda da barra
  • O elemento possui o atributo src apontando para images/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!'

O que será verificado:

  • Existe um elemento form com a classe trybewarts-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 e Senha
  • 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.

4. Crie um título com o texto 'Trybewarts' centralizado dentro do 'Header'

Pontos importantes:

  • Deve existir um elemento <h1> com o id trybewarts-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

O que será verificado:

  • Existe um elemento h1 com o id trybewarts-header-title
  • O elemento possui um conteúdo de texto Trybewarts
  • O elemento com a classe header deve possuir exatos 3 elementos filhos
  • O filho do meio do elemento com a classe header deve ser o título h1 Trybewarts

5. Adicione um formulário no corpo da página, posicionado ao lado esquerdo

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

O que será verificado:

  • Existe um elemento form com o id evaluation-form
  • O elemento está dentro da tag main
  • O elemento main e o form possuem a propriedade CSS display: flex
  • O elemento form possui a propriedade CSS width: 675px

6. Faça com que o formulário do requisito 5 seja um container flex com o eixo principal vertical

Ponto importante:

  • Alinhe o eixo principal dessa classe para ser o eixo vertical

O que será verificado:

  • 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

7. Adicione a logo da Trybewarts no lado direito da página

Pontos importantes:

  • Deve possuir o id trybewarts-forms-logo
  • O atributo src do logotipo deve apontar para images/trybewarts-colored.svg
  • A imagem deve possuir um height de 500px

O que será verificado:

  • Existe um elemento img com o id trybewarts-forms-logo
  • O elemento possui o atributo src apontando para images/trybewarts-colored.svg

8.Acrescente no formulário os inputs de 'Nome:', 'Sobrenome:' e 'Email:'

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

O que será verificado:

  • Existe 3 elementos inputs com os IDs input-name, input-lastname e input-email
  • Os inputs de nome, sobrenome e email devem possuir, respectivamente, o atributo de placeholder com os valores Nome, Sobrenome e Email

9. Crie um select 'Casa' contendo quatro options

Pontos importantes:

  • O select deverá conter o id house
  • Deverá conter a opção com text e value Gitnória e com o id gitnoria-house
  • Deverá conter a opção com text e value Reactpuff e com o id reactpuff-house
  • Deverá conter a opção com text e value Corvinode e com o id corvinode-house
  • Deverá conter a opção com text e value Pytherina e com o id pytherina-house

O que será verificado:

  • Existe um elemento select com o id house
  • Existe um elemento option com o id gitnoria-house
  • Existe um elemento option com o id reactpuff-house
  • Existe um elemento option com o id corvinode-house
  • Existe um elemento option com o id pytherina-house

10. Alinhe os campos de 'Nome' e 'Sobrenome' para que fiquem em linha

Pontos importantes:

  • Os campos de 'Nome' e 'Sobrenome' devem estar lado a lado

O que será verificado:

  • O campo de Sobrenome está à direita do campo de Nome

11. Alinhe os campos de 'Email' e 'Casa' para que fiquem em linha

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 que será verificado:

  • O campo de Casa está à direita do campo de Email

12. Crie um campo de entrada para qual família a pessoa estudante se identifica

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

O que será verificado:

  • Existe um elemento label com o id label-family que possui um conteúdo de texto Qual sua família?
  • Existe um elemento input com o atributo value="Frontend"
  • Existe um elemento input com o atributo value="Backend"
  • Existe um elemento input com o atributo value="FullStack"
  • Existem 3 elementos input do tipo radio com o atributo name="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

13. Crie campos de entrada do tipo 'checkbox' contendo seis opções

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 ser subject
  • Posicione as checkbox para ficar lado a lado
  • Posicione as checkbox a abaixo do label

O que será verificado:

  • Existe um elemento label com o id label-content que possui um conteúdo de texto Qual conteúdo você está com mais vontade de aprender?
  • Existe um input com o atributo value="HoFs"
  • Existe um input com o atributo value="Jest"
  • Existe um input com o atributo value="Promises"
  • Existe um input com o atributo value="React"
  • Existe um input com o atributo value="SQL"
  • Existe um input com o atributo value="Python"
  • Os elementos checkbox então posicionados abaixo da label

14. Crie campo de entrada para avaliar de 1 a 10 o nível de satisfação com a Trybewarts

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

O que será verificado:

  • Existe um elemento label com o id label-rate que possui um conteúdo de texto Como você avalia a Trybewarts?
  • Existem 10 radio-buttons com o atributo name="rate"
  • Existem 10 radio-buttons contendo o atributo value 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

O que será verificado:

  • Existe uma label com a classe textarea e o texto Deixe seu comentário:
  • O elemento textarea possui um limite de 500 caracteres

16. Crie um campo de entrada do tipo 'checkbox' com o id 'agreement' para validar as informações

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

O que será verificado:

  • Existe uma label com o id label-infos que possui o texto Você concorda com o uso das informações acima?
  • Existe um input do tipo checkbox com o id agreement

17. Crie um botão de Enviar para submeter o formulário

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'

O que será verificado:

  • Existe um botão do tipo submit com o id submit-btn e o texto Enviar

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 que será verificado:

  • O botão está inicialmente desabilitado
  • O botão torna-se habilitado, ao marcar o campo com id agreement

19. Crie um rodapé no final da página

Pontos importantes:

  • O rodapé deverá conter o texto "Direitos reservados à Trybewarts©"

O que será verificado:

  • Existe um elemento footer deve possuir o texto Direitos reservados à Trybewarts©

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

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á possuir id="textarea"

O que será verificado:

  • 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"

O que será verificado:

  • Os inputs tipo checkbox referentes à lista de conteúdo possuem class="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-

Lista de requisitos não avaliativos:

Esses requisitos não são verificáveis pelo avaliador automático.

22. Preencha o arquivo feedback.md . Aproveite o espaço para deixar seus feedbacks sobre o projeto.

  • 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!

23. Realize o desenvolvimento da versão mobile do formulário 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!

Depois de terminar o desenvolvimento

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:

  1. Use git branch para ter certeza de que está na branch de trabalho;
  2. Caso não esteja use git checkout joaozinho-trybewarts-project para trocar de branch;
  3. 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.

  1. Adicione sua branch com o novo commit ao repositório remoto

    • Usando o exemplo anterior: git push -u origin mariazinha-trybewarts-project

  2. 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.

Code Review (opcional)

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 time tryber/students-sd-014-a.

Caso tenha alguma dúvida, aqui tem um vídeo explicativo.

Dicas

  • 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.

Revisando um pull request

À 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ê.

Avisos finais

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?

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages