Oi Galera, tudo bem ?
Hoje eu vou ensinar vocês a criarem um README bonitão para o seu GITHUB!
1) Primeiro, temos que ter o VScode instalado no nosso computador, caso você não tenha ele e esteja usando outro editor de código, utilize o site https://pandao.github.io/editor.md/en.html para editar o seu markedown.
------------------------------------------------------------------------------
2) Vamos criar um novo repositório no GITHUB clicando em new repository
3) Agora vem um macete, vamos criar um repositório com o nosso nome de usuário e marcar a caixa Add a README file.
---------------------------------------------------------------------------------
4) Vamos criar uma pasta chamada meu readme (pode ser qualquer nome)
---------------------------------------------------------------------------------
5) vamos copiar o link para clonar o nosso repositório
---------------------------------------------------------------------------------
6) Vamos abrir o git bash na pasta. Para isso, entre na pasta, clique com o botão direito e selecione GIT BASH HERE
---------------------------------------------------------------------------------
7) No console do git bash, vamos dar um git clone e colar o link do nosso repositório. Só faça isso se você selecionou a opção Add a Readme no Git hub.
ATENÇÃO : Caso não tenha selecionado a opção Add a Readme no GITHUB, calma. Apenas siga os passos:
1 - de um git init <- para iniciar o git
2 - de um git remote add origin (link do seu git hub) <- trackear
3 - git checkout -b main <- para mudar para a branch main
4 - touch README.MD <- para criar o arquivo README.MD
---------------------------------------------------------------------------------
8) Agora vamos começar a editar o arquivo, caso você não esteja usando o VScode utilize o site : https://pandao.github.io/editor.md/en.html para fazer as edições.
digite code . para abrir o VScode na pasta.
--------------------------------------------------------------------------------
9) Com o Visual Code aberto, vamos clicar no arquivo README, ao fazer isso vamos ter acesso ao visualizador. Iremos clicar nele.
Nossa tela será dividida em duas
---------------------------------------------------------------------------------
10) Iremos fazer um misto de linguagem Markedown e HTML aqui
Vou deixar a documentação da ADOBE que gostei muito sobre o Markedown:
https://experienceleague.adobe.com/docs/contributor/contributor-guide/writing-essentials/markdown.html?lang=pt-BR
com os # em markedown podemos escrever o nosso texto em diferentes tamanhos.
# = tag <h1> ## = tag <h2> ### = tag <h3> e assim sucessivamente --- = tag <hr>
utilizando comandos markedown ou misto com HTML podemos criar documentos fantásticos.
---------------------------------------------------------------------------------
11 ) agora vamos criar um card para o nosso README, para isso vamos usar o projeto do anuraghazra
entre nesse link:
https://github.com/anuraghazra/github-readme-stats
vamos copiar esse link
no atributo username=coloque seu username aqui
no meu caso, o meu username é leovd100
Para saber qual seu usarname, basta entrar no seu github e no final do link vai estar o seu username.
--------------------------------------------------------------------------------
12) O VScode atualiza automaticamente para a gente!
Veja que eu estou escrevendo o README do lado esquerdo, estou colocando a linguagem markedown e o linke que eu copiei e troquei o username
Podemos também trocar o tema do nosso gráfico escolhendo uma dessas opção:
Veja que por padrão ele vem com o theme=radical
basta trocar o radical por um dos themes acime. No meu caso eu vou usar o tokyonight
Resultado:
--------------------------------------------------------------------------------
13) Vamos colocar um card de linguagem, eu gosto do modelo compacto, mas fica a sua disposição:
No campo TOP LANGUAGES CARD, vamos escolher a opção simplificada
Copie o link e troque pelo seu username
O resultado será esse:
Mas vamos fazer umas modificações
A primeira é transformar esses cards em imagens HTML
vejam que eu criei tags <img src> para cada um e só colei o link do card, automaticamente ele atualiza meu README.
desta forma podemos alterar a largura width e altura height dos nossos cards, eu vou deixar com height ="150em"
Coloque as tags <img> dentro das tags <div> </div>
------------------------------------------------------------------------------
14) Vamos agora criar os campos de contato e linguagens
