📘 Meu Primeiro Repositório

Este repositório foi criado para explicar aos alunos, de forma prática e simples, como:

Criar uma conta no GitHub
Instalar e configurar o Git
Instalar o Visual Studio Code (VSCode)
Usar a extensão Live Server para visualizar páginas HTML
Criar seu primeiro projeto em HTML
Publicar o projeto no GitHub

🚀 Objetivo: ajudar o aluno a dar os primeiros passos no mundo do desenvolvimento e versionamento de código.

Tecnologias utilizadas

1️⃣ Criando uma conta no GitHub

Acesse: https://github.com
Clique em Sign up (Cadastrar).
Preencha:
- E-mail
- Senha
- Nome de usuário (ex: heberton-dev)
- Clique em Create account.
Confirme seu e-mail pelo link enviado.
Pronto! Conta criada 🎉

2️⃣ Instalando o Git

🔸 Windows

Acesse: https://git-scm.com/downloads
Clique em Windows e instale com as opções padrão.
Após instalar, abra o Prompt de Comando e digite:

  git --version

Se aparecer algo como git version 2.xx.x está funcionando ✅

🔸 Linux (Ubuntu/Debian)

sudo apt update
sudo apt install git -y
git --version

🔸 macOS

brew install git
git --version

3️⃣ Instalando o VS Code

- Baixe em: https://code.visualstudio.com/
- Instale normalmente.
- Abra o VS Code.

4️⃣ Instalando a extensão Live Server

No VS Code, clique no ícone de Extensões (quadradinho à esquerda).
Pesquise por Live Server.
Clique em Install.

Agora você pode rodar qualquer arquivo HTML no navegador 🚀

5️⃣ Criando a pasta do projeto

Vá até sua Área de Trabalho.
Crie uma pasta chamada:

Meu Primeiro Repositorio

Abra a pasta no VS Code (File → Open Folder).

6️⃣ Criando o arquivo index.html

Dentro do VS Code, clique em New File.

Nomeie como:

index.html

Copie este código inicial para dentro do arquivo:


<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meu Primeiro Repositório</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://unpkg.com/lucide-static/font/lucide.css"
      rel="stylesheet"
    />
    <!-- Fonte -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: "Poppins", sans-serif;
      }
      /* Animação de fundo */
      .bg-gradient-animate {
        background: linear-gradient(270deg, #4f46e5, #9333ea, #f59e0b, #10b981);
        background-size: 800% 800%;
        animation: gradientAnimation 15s ease infinite;
      }
      @keyframes gradientAnimation {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
    </style>
  </head>
  <body class="bg-gradient-animate flex flex-col min-h-screen text-white">
    <!-- Header -->
    <header class="py-6 px-8 flex items-center justify-between shadow-lg">
      <h1 class="text-3xl md:text-4xl font-bold flex items-center gap-3">
        <i class="lucide-code text-yellow-400 text-4xl"></i> Meu Primeiro
        Repositório
      </h1>
    </header>

    <main
      class="flex-grow flex flex-col md:flex-row items-center justify-between px-10 py-16 gap-10"
    >
      <!-- Imagem lateral esquerda  -->
      <div class="flex-shrink-0 hidden md:block">
        <img
          src="https://cdn-icons-png.flaticon.com/512/1995/1995576.png"
          alt="Menino estudando programação"
          class="w-72 md:w-96 drop-shadow-xl"
        />
      </div>

      <!-- Texto + Lista de Habilidades -->
      <div class="max-w-2xl text-center md:text-left">
        <p class="text-2xl md:text-3xl font-medium leading-relaxed mb-12">
          Olá! 👋 Seja bem-vindo ao meu primeiro repositório. Atualmente estou
          aprendendo sobre
          <span class="font-bold text-yellow-200">Computação em Nuvem</span>,
          <span class="font-bold text-green-200">Linux</span>,
          <span class="font-bold text-purple-200">Redes</span>,
          <span class="font-bold text-red-200">Segurança da Informação</span>,
          <span class="font-bold text-yellow-300">Banco de Dados</span> e sou
          apaixonado pelo
          <span class="font-bold text-pink-200">Mundo da Programação</span>. 🚀
        </p>

        <!-- Lista de Habilidades -->
        <div class="grid md:grid-cols-2 gap-6 text-xl">
          <div
            class="flex items-center gap-4 bg-white/10 p-6 rounded-xl shadow hover:scale-105 hover:bg-white/20 transition cursor-pointer"
          >
            <img
              src="https://cdn-icons-png.flaticon.com/512/4144/4144726.png"
              alt="Nuvem"
              class="w-8 h-8"
            />
            <span>Computação em Nuvem</span>
          </div>
          <div
            class="flex items-center gap-4 bg-white/10 p-6 rounded-xl shadow hover:scale-105 hover:bg-white/20 transition cursor-pointer"
          >
            <img
              src="https://cdn-icons-png.flaticon.com/512/518/518713.png"
              alt="Linux"
              class="w-8 h-8"
            />
            <span>Linux</span>
          </div>
          <div
            class="flex items-center gap-4 bg-white/10 p-6 rounded-xl shadow hover:scale-105 hover:bg-white/20 transition cursor-pointer"
          >
            <img
              src="https://cdn-icons-png.flaticon.com/512/4230/4230569.png"
              alt="Redes"
              class="w-8 h-8"
            />
            <span>Redes</span>
          </div>
          <div
            class="flex items-center gap-4 bg-white/10 p-6 rounded-xl shadow hover:scale-105 hover:bg-white/20 transition cursor-pointer"
          >
            <img
              src="https://cdn-icons-png.flaticon.com/512/3064/3064197.png"
              alt="Segurança"
              class="w-8 h-8"
            />
            <span>Segurança da Informação</span>
          </div>
          <div
            class="flex items-center gap-4 bg-white/10 p-6 rounded-xl shadow hover:scale-105 hover:bg-white/20 transition cursor-pointer"
          >
            <img
              src="https://cdn-icons-png.flaticon.com/512/4248/4248443.png"
              alt="Banco de Dados"
              class="w-8 h-8"
            />
            <span>Banco de Dados</span>
          </div>
          <div
            class="flex items-center gap-4 bg-white/10 p-6 rounded-xl shadow hover:scale-105 hover:bg-white/20 transition cursor-pointer"
          >
            <img
              src="https://cdn-icons-png.flaticon.com/512/2721/2721291.png"
              alt="Programação"
              class="w-8 h-8"
            />
            <span>Programação</span>
          </div>
        </div>
      </div>

      <!-- Imagem lateral direita  -->
      <div class="flex-shrink-0 hidden md:block">
        <img
          src="https://cdn-icons-png.flaticon.com/512/1995/1995593.png"
          alt="Menina estudando programação"
          class="w-72 md:w-96 drop-shadow-xl"
        />
      </div>
    </main>

    <!-- Footer -->
    <footer
      class="bg-black/40 backdrop-blur-sm py-8 px-6 mt-auto flex flex-col items-center gap-6"
    >
      <div class="flex gap-8 text-3xl">
        <!-- GitHub -->
        <a
          href="https://github.com/seuusuario"
          target="_blank"
          class="transition transform hover:scale-125"
        >
          <img
            src="https://cdn-icons-png.flaticon.com/512/25/25231.png"
            alt="GitHub"
            class="w-10 h-10 hover:opacity-80"
          />
        </a>

        <!-- LinkedIn -->
        <a
          href="https://linkedin.com/in/seuusuario"
          target="_blank"
          class="transition transform hover:scale-125"
        >
          <img
            src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
            alt="LinkedIn"
            class="w-10 h-10 hover:opacity-80"
          />
        </a>

        <!-- Instagram -->
        <a
          href="https://instagram.com/seuusuario"
          target="_blank"
          class="transition transform hover:scale-125"
        >
          <img
            src="https://cdn-icons-png.flaticon.com/512/174/174855.png"
            alt="Instagram"
            class="w-10 h-10 hover:opacity-80"
          />
        </a>
      </div>
      <p class="text-sm text-gray-200">© 2025 Meu Primeiro Repositório</p>
    </footer>
  </body>
</html>

7️⃣ Visualizando no Live Server

Clique com o botão direito no arquivo index.html.
Selecione Open with Live Server.
O navegador abrirá sua página 🎉

🔸 Dica: Você pode trocar as imagens modificando apenas o número no final da URL:

img
          src="https://cdn-icons-png.flaticon.com/512/1995/1995576.png"

Modifique o código no Footer e coloque suas redes sociais no fim do código:

 <a
          href="https://github.com/seuusuario"

          href="https://linkedin.com/in/seuusuario"

          href="https://instagram.com/seuusuario"

8️⃣ Criando o repositório no GitHub

Vá até https://github.com .
Clique em New repository.
Preencha:
- Repository name: Meu-Primeiro-Repositorio
- Description: Meu primeiro projeto no GitHub
- Marque Public
- Clique em Create repository

9️⃣ Configurando o Git no VS Code

Vá em Terminal New Terminal , No terminal do VS Code (Ctrl+`), ao lado do sinal de " + " seta para baixo " escolha Git Bash execute :

Configurar usuário e e-mail

 git config --global user.name "Seu Nome"

 git config --global user.email "seuemail@gmail.com"

Agora vamos iniciar o GIt projeto você pode seguir as instruções da tela do Github

git init

git status

git add .

git status

git commit -m "first commit"

🔟 Enviando o projeto para o GitHub

No GitHub, copie o endereço HTTPS do repositório (ex: https://github.com/seunome/Meu-Primeiro-Repositorio.git). No terminal do VS Code, cole:

git branch -M main

git remote add origin https://github.com/seunome/Meu-Primeiro-Repositorio.git

git push -u origin main

obs: se der esse erro no final Conferir qual usuário está configurado no Git

git config --global user.name

git config --global user.email

Isso mostra a conta configurada no Git.

Atualizar usuário e e-mail do Git

git config --global user.name "Seu Nome"

git config --global user.email "seuemail@gmail.com"

tente Novamente o git push -u origin main

Agora o Git vai pedir login novamente.

Usuário → heberton-dev < seu usuário

Senha → cole o token de acesso pessoal (PAT) da conta heberton-dev (não é a senha do GitHub, é o token que você gera em Settings → Developer settings → Personal access tokens → Tokens classic → Generate new token com permissão repo).

copiar o Token

git push -u origin main

colar o token

✅ Pronto!

Seu projeto agora está:

Rodando no navegador pelo Live Server
Publicado no GitHub 🎉

✍️ Dica extra para o aluno:

Depois que seu projeto estiver no GitHub, compartilhe o link com os colegas e mostre que você já deu seu primeiro passo como desenvolvedor!

✅ O que aprendemos hoje

Criar uma conta no GitHub
Instalar e configurar o Git
Instalar o VSCode e a extensão Live Server
Criar um projeto simples em HTML
Alterar imagens e links no código
Criar um repositório no GitHub
Configurar o Git e enviar os arquivos com commit e push
Gerar e usar um Token de acesso para autenticar no GitHub

🧑‍🏫 Projeto criado por

Heberton Geovane

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
README.md		README.md
index.html		index.html

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

📘 Meu Primeiro Repositório

Tecnologias utilizadas

1️⃣ Criando uma conta no GitHub

2️⃣ Instalando o Git

🔸 Windows

🔸 Linux (Ubuntu/Debian)

🔸 macOS

3️⃣ Instalando o VS Code

4️⃣ Instalando a extensão Live Server

5️⃣ Criando a pasta do projeto

6️⃣ Criando o arquivo index.html

7️⃣ Visualizando no Live Server

8️⃣ Criando o repositório no GitHub

9️⃣ Configurando o Git no VS Code

🔟 Enviando o projeto para o GitHub

Agora o Git vai pedir login novamente.

✅ Pronto!

✍️ Dica extra para o aluno:

✅ O que aprendemos hoje

🧑‍🏫 Projeto criado por

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

📘 Meu Primeiro Repositório

Tecnologias utilizadas

1️⃣ Criando uma conta no GitHub

2️⃣ Instalando o Git

🔸 Windows

🔸 Linux (Ubuntu/Debian)

🔸 macOS

3️⃣ Instalando o VS Code

4️⃣ Instalando a extensão Live Server

5️⃣ Criando a pasta do projeto

6️⃣ Criando o arquivo index.html

7️⃣ Visualizando no Live Server

8️⃣ Criando o repositório no GitHub

9️⃣ Configurando o Git no VS Code

🔟 Enviando o projeto para o GitHub

Agora o Git vai pedir login novamente.

✅ Pronto!

✍️ Dica extra para o aluno:

✅ O que aprendemos hoje

🧑‍🏫 Projeto criado por

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages