5. Tags e branches

Criando e trocando de branch

Para praticar nossas habilidades com branches, vamos adicionar algumas cores à nossa página Hello, World! com CSS.

Podemos pensar nessas mudanças como uma nova funcionalidade. Enquanto você desenvolve a funcionalidade, o código ao redor fica instável. Podem surgir bugs, e a funcionalidade pode não se comportar como esperado. Por isso, até que ela esteja pronta, queremos mantê-la separada da base de código principal. Assim, podemos continuar trabalhando na base de código principal sem sermos afetados pelas mudanças que estamos fazendo na nova funcionalidade.

Ótimo, mãos à obra

Primeiro, vamos criar uma nova branch chamada style e trocar para ela.

Quando você cria uma nova branch, o Git faz essa branch apontar para o mesmo commit da branch atual. Ou seja, a nova branch começa com o mesmo código da branch atual. Então preste atenção em qual branch você está antes de criar uma nova.

Na maioria dos casos, você vai querer partir da sua branch principal (main, no nosso caso). Só por garantia, vamos conferir se estamos na branch main.

Tarefa

Concluída

Use o comando git branch para listar todas as branches. O asterisco na saída indica a branch em que você está no momento.

Ótimo, vamos criar uma nova branch chamada style. Existem várias formas de criar branches, mas a mais conveniente é usar o

git switch

com a opção -c (abreviação de --create). Assim, você cria uma nova branch e já troca para ela de uma vez.

Executar no terminal:

git switch -c style

Tarefa

Concluída

Use o comando git switch acima para criar uma nova branch chamada style.

Ótimo, agora estamos na branch style. Por enquanto, ela é idêntica à branch main. Vamos criar um novo arquivo chamado style.css e deixar nossa tag h1 vermelha com CSS. Você pode fazer assim:

Arquivo: style.css

h1 {
    color: red;
}

Tarefa

Concluída

Crie um novo arquivo chamado style.css e adicione a ele o CSS acima. Depois, adicione o arquivo à staging area e faça o commit das alterações.

Também precisamos atualizar o arquivo hello.html para incluir o style.css. Você pode fazer assim:

Arquivo: hello.html

<html>
    <head>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
</html>

Tarefa

Concluída

Atualize o hello.html como mostrado acima. Depois, adicione as alterações ao stage e faça o commit.

Ótimo, adicionamos o estilo inicial da página. Agora, vamos voltar para a branch main e ver se o arquivo style.css continua lá.

Executar no terminal:

git switch main

Repare que aqui não tem a opção -c. Isso porque não estamos criando uma nova branch, e sim trocando para uma que já existe.

Tarefa

Concluída

Use o comando git switch para voltar à branch main. Depois, liste os arquivos com o comando ls.

Como você pode ver, o arquivo style.css não está lá. Isso acontece porque ele só existe na branch style. Esse é o poder das branches: elas permitem trabalhar em diferentes funcionalidades sem afetar a base de código principal.

Entendi!

Vamos voltar para a branch style e ver se o arquivo style.css continua lá.

Executar no terminal:

git switch style

Tarefa

Concluída

Use o comando git switch para voltar à branch style. Depois, liste os arquivos com o comando ls.

Agora que aprendemos a criar branches e trocar entre elas, vamos ver como as alterações das branches de funcionalidade chegam à branch principal.

Next step

Quer testar o modo história?

Faça o curso do jeito que ele foi pensado: progressão em pequenas doses, ordem linear e focada, desbloqueio gradual das entradas da Gitopedia. Continue com o Git de verdade no VS Code/Cursor/Antigravity/Windsurf a qualquer momento.

Modo história

GRATUITO
mas precisa de login

Git

ByBit