# Crie um site de currículo usando vscode.dev _Que incrível seria se um recrutador pedisse seu currículo e você enviasse um link?_ 😎 ## Objetivos Após esta tarefa, você aprenderá a: - Criar um site para exibir seu currículo ### Pré-requisitos 1. Uma conta no GitHub. Acesse [GitHub](https://github.com/) e crie uma conta, caso ainda não tenha uma. ## Passos **Passo 1:** Crie um novo repositório no GitHub e dê a ele o nome `my-resume`. **Passo 2:** Crie um arquivo `index.html` no seu repositório. Vamos adicionar pelo menos um arquivo diretamente no github.com, pois não é possível abrir um repositório vazio no vscode.dev. Clique no link `creating a new file`, digite o nome `index.html` e selecione o botão `Commit new file`. ![Criar um novo arquivo no github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.br.png) **Passo 3:** Abra [VSCode.dev](https://vscode.dev) e selecione o botão `Open Remote Repository`. Copie a URL do repositório que você acabou de criar para o site do currículo e cole na caixa de entrada: _Substitua `your-username` pelo seu nome de usuário do GitHub._ ``` https://github.com/your-username/my-resume ``` ✅ Se tudo der certo, você verá seu projeto e o arquivo index.html abertos no editor de texto no navegador. ![Criar um novo arquivo](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.br.png) **Passo 4:** Abra o arquivo `index.html`, cole o código abaixo na área de código e salve.
Código HTML responsável pelo conteúdo do site do seu currículo. Seu Nome Aqui!

SOBRE

Escreva um resumo sobre você!

EXPERIÊNCIA PROFISSIONAL

Título do Cargo

Nome da Organização Aqui | Mês de Início – Mês de Término

  • Tarefa 1 - Escreva o que você fez!
  • Tarefa 2 - Escreva o que você fez!
  • Escreva os resultados/impacto da sua contribuição

Título do Cargo 2

Nome da Organização Aqui | Mês de Início – Mês de Término

  • Tarefa 1 - Escreva o que você fez!
  • Tarefa 2 - Escreva o que você fez!
  • Escreva os resultados/impacto da sua contribuição
Adicione os detalhes do seu currículo substituindo o _texto de exemplo_ no código HTML. **Passo 5:** Passe o mouse sobre a pasta My-Resume, clique no ícone `New File ...` e crie 2 novos arquivos no seu projeto: `style.css` e `codeswing.json`. **Passo 6:** Abra o arquivo `style.css`, cole o código abaixo e salve.
Código CSS para formatar o layout do site. body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; max-width: 960px; margin: auto; } h1 { font-size: 3em; letter-spacing: .6em; padding-top: 1em; padding-bottom: 1em; } h2 { font-size: 1.5em; padding-bottom: 1em; } h3 { font-size: 1em; padding-bottom: 1em; } main { display: grid; grid-template-columns: 40% 60%; margin-top: 3em; } header { text-align: center; margin: auto 2em; } section { margin: auto 1em 4em 2em; } i { margin-right: .5em; } p { margin: .2em auto } hr { border: none; background-color: lightgray; height: 1px; } h1, h2, h3 { font-weight: 100; margin-bottom: 0; } #mainLeft { border-right: 1px solid lightgray; }
**Passo 6:** Abra o arquivo `codeswing.json`, cole o código abaixo e salve. { "scripts": [], "styles": [] } **Passo 7:** Instale a extensão `Codeswing` para visualizar o site do currículo na área de código. Clique no ícone _`Extensions`_ na barra de atividades e digite Codeswing. Clique no _botão azul de instalação_ na barra de atividades expandida para instalar ou use o botão de instalação que aparece na área de código ao selecionar a extensão para carregar informações adicionais. Assim que a extensão for instalada, observe as mudanças no seu projeto na área de código 😃. ![Instalar extensões](../../../../8-code-editor/images/install-extension.gif) Isso é o que você verá na sua tela após instalar a extensão. ![Extensão Codeswing em ação](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.br.png) Se estiver satisfeito com as alterações feitas, passe o mouse sobre a pasta `Changes` e clique no botão `+` para preparar as alterações. Digite uma mensagem de commit _(Uma descrição das alterações feitas no projeto)_ e confirme suas alterações clicando no `check`. Quando terminar de trabalhar no projeto, selecione o ícone de menu hambúrguer no canto superior esquerdo para retornar ao repositório no GitHub. Parabéns 🎉 Você acabou de criar seu site de currículo usando vscode.dev em poucos passos. ## 🚀 Desafio Abra um repositório remoto no qual você tenha permissões para fazer alterações e atualize alguns arquivos. Em seguida, tente criar um novo branch com suas alterações e faça um Pull Request. ## Revisão e Autoestudo Leia mais sobre [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) e algumas de suas outras funcionalidades. --- **Aviso Legal**: Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.