Apresentação e aula de Git e Github pages onde o aluno vai aprender a acessar o git e github e transformar os arquivos de html, css e javascript em uma home page disponível para acessar de qualquer lugar.

1. Desenvolvimento de
Front-End
21/02/2024
Anthony Freitas

2. Front-End - Tutorial GitHub Pages
Instrutor: Anthony Samuel Freitas
anthony.freitas@docente.senai.br
21/02/2024 2

3. 21/02/2024 3
Para criar um novo repositório:
Clicar em “Repositories”

4. 21/02/2024 4
Para criar um novo repositório:
Clicar em “NEW”

5. 21/02/2024 5
Para criar um novo repositório:
Escolher um nome de repositório que não exista
dentre os seus e que facilite você encontrar de
acordo com o que vai adicionar dentro dele.
Adicionar uma breve descrição do conteúdo do repositório
Embora não seja obrigatório, é recomendado adicionar um
arquivo readme.md pois nele você poderá colocar uma
descrição mais completa do material que está dentro do
repositório. Ex. “Página criada no Curso XXX, competências
utilizadas: html, css, javascript...”

6. 21/02/2024 6
Uma vez criado o repositório, você precisa adicionar arquivos nele.
Para isso, deve clicar em:
* ‘ADD FILE’
* ‘UPLOAD FILES’
Adicionando arquivos:

7. 21/02/2024 7
Adicionando arquivos:
Para facilitar você pode escolher os arquivos:
“CHOOSE FILES” ou
Apenas arrastar pastas e arquivos diretamente para seu repositório

8. 21/02/2024 8
Adicionando arquivos:
Para facilitar você pode escolher os arquivos:
“CHOOSE FILES” ou
Apenas arrastar pastas e arquivos diretamente para seu repositório

9. 21/02/2024 9
Adicionando arquivos:
Ao arrastar os arquivos, o GitHub irá listar todos os arquivos que conseguiu copiar
para que você possa conferir.

10. 21/02/2024 10
Adicionando arquivos:
É recomendado criar uma descrição todas as vezes que adicionar seus arquivos.
No primeiro upload, geralmente escrevemos “PRIMEIRO COMMIT”
Na sequência, deverá clicar em ‘commit changes’ para que os arquivos sejam salvos
em seu repositório.

11. 21/02/2024 11
Adicionando arquivos:
Os arquivos serão adicionados na pasta.
Caso você tenha um arquivo chamado ‘index.html’ o repositório reconhece este arquivo como a página
inicial do seu site.

12. 21/02/2024 12
Alterando Arquivos
Caso sinta necessidade de uma pequena mudança no seu arquivo, não precisa fazer upload dele inteiro.
Pode somente alterar a parte que deseja com a edição de páginas

13. 21/02/2024 13
Após fazer as alterações necessárias, você precisa salvar o arquivo. Para isso, basta clicar em “Commit
changes” que ele abrirá uma caixa de diálogo onde você vai informar as alterações efetuadas e efetivamente
clicar em salvar as mudanças. Não esqueça de atualizar a página com F5 após o commit.
Alterando Arquivos

14. 21/02/2024 14
Publicando sua página:
Os arquivos serão adicionados na pasta.
Caso você tenha um arquivo chamado ‘index.html’ o repositório reconhece este arquivo como a página
inicial do seu site.

15. 21/02/2024 15

16. 21/02/2024 16

17. 21/02/2024 17

18. 21/02/2024 18

19. 21/02/2024 19

20. 21/02/2024 20

21. 21/02/2024 21

22. 21/02/2024 22

23. 21/02/2024 23

24. 21/02/2024 24

25. 21/02/2024 25

26. 21/02/2024 26

27. Tutorial GitHub Pages
Introdução: Criando um documento HTML
• Menu Iniciar > Programas > Acessórios > Bloco de notas;
• No Bloco de notas: Arquivo > Salvar como...;
• Alterar o tipo de arquivo para: Todos os arquivos;
• Salvar o arquivo com extensão .html;
Programas sugeridos para edição HTML:
Notepad++ / VSCode
21/02/2024 27

28. s
21/02/2024 28
EM BREVE!
Próximas aulas

29. Perguntas
21/02/2024 29
?
anthony.freitas@docente.senai.br