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 ela está em desenvolvimento, o código relacionado fica instável. Podem surgir bugs, e a funcionalidade pode não funcionar como deveria. Por isso, queremos mantê-la separada da base de código principal até que fique pronta. Assim, podemos continuar trabalhando na base principal sem que as mudanças da nova funcionalidade a afetem.

Ó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. Por isso, antes de criar uma, confira em qual branch você está.

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.

O arquivo style.css não está lá porque 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 de uma para outra, 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: avance aos poucos, siga uma sequência linear, mantenha o foco e desbloqueie gradualmente as entradas da Gitopedia. Quando quiser, continue praticando com o Git de verdade no VS Code, Cursor ou Antigravity IDE.

Modo história

GRATUITO
mas precisa de login

Git

ByBit