7 days of PowerPoint templates, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Business
  2. Resumes

Como Usar um Template HTML de Currículo para Fazer Seu Site Pessoal

Scroll to top
Read Time: 12 mins
This post is part of a series called How to Make a Great Personal Resume Website (Ultimate Guide).
19 Best HTML Resume Templates to Make Personal Profile CV Websites (2022)
Should You Use an Online Resume Builder for Your Personal Site?

Portuguese (Português) translation by Francisco Freitas (you can also view the original English article)

Existem diversas formas de criar seu site currículo pessoal.

Você pode utilizar um ou muitos construtores de site ou pode optar por um CMS como o Wordpress, Drupal ou similar. Você pode também contratar um desenvolvedor profissional para fazer um para você.

Com tantas opções, pode ser difícil saber por onde começar. Para tornar as coisas ainda mais complicadas, cada uma dessas opções vêm com um conjunto diferente de pós e contras, sem mencionar o nível de dificuldade ou o preço envolvido.

Mas, há uma outra grande forma de criar seu site pessoal em uma razoável quantidade de tempo. E é utilizando um template HTML de currículo. Eles são fáceis de usar e fazer o upload para seu servidor de hospedagem.

Aqui estão alguns benefícios (para navegar rapidamente antes de continuar lendo):

No topo dela, o código por trás de um site currículo profissional está longe de ser complicado para um novato pegar do que as mais complexas linguagens de programação utilizada nos sistemas de gerenciamento de conteúdo.

Nesta parte da serie Criando um Grande Site Currículo Profissional, nós partimos do simples processo de como modificar a subir um template de currículo HTML.

Seguindo este fluxo de trabalho para criar seu site de currículo e customizar para sua própria marca - de forma que você lance seu site em um tempo não apertado.

O que Você Precisa para Tornar seu Site Currículo Vivo?

Antes de iniciar com uma simples modificação com o template do site, vamos ver as ferramentas que você irá precisar para deixar seu HTML de site currículo funcionando.

1. A Empresa de Hospedagem Certa

Comprar o nome de domínio do seu site é apenas o primeiro passo na sua jornada. Você também precisará de um servidor de hospedagem onde enviará os arquivos para o seu site. Encontrando a empresa de hospedagem certa não é fácil, especialmente de que existem muitas delas. Muitos provedores de hospedagem oferecem pacotes básicos de hospedagem entre $5 a $10 por mês. Algumas companhias oferecem largura de banda e espaço ilimitados enquanto outras oferecem planos mais restritos.

O importante de ter em mente é que quase todos os provedores de hospedagem suportam templates HTML. Ao fazer compras (sair às compras) por uma empresa de hospedagem, leia suas FAQs e certifique-se de que a empresa disponibiliza suporte ao cliente, caso precise de ajuda com seu site. Você também deveria fazer uma pequena pesquisa e ler os comentários de uma hospedagem em particular em sites independentes para ver o quanto os clientes estão satisfeitos.

2. Um Cliente FTP

Uma vez que tenha encontrado a empresa de hospedagem, você irá precisar baixar um cliente FTP. Um cliente FTP lhe permitirá enviar seu template para os servidores de hospedagem. A escolha do programa FTP dependerá de qual sistema operacional seu computador utiliza.

Um dos programas mais populares é o FileZilla. Ele é um programa FTP gratuito que é muito fácil de utilizar e é disponibilizado para Windows Mac e Linux.

3. Um Editor de Código

Você também irá precisar de um editor de texto para realizar mudanças nos seus arquivos do template. Você poderia usar desde um Notepad ou TextEdit para fazer mudanças, utilizar um editor de código tornará isso mais fácil.  Diferente de editores de texto convencionais, um editor de código inclui ferramentas que facilitam a edição, tais como utilizar diferentes cores para diferentes partes do código o que torna mais fácil de ver o que você está editando.

Para os fins deste tutorial, eu utilizarei o Sublime Text, que pode se usado no Mac, Windows e Linux e a versão de teste pode ser baixada de graça. Leia mais sobre como trabalhar com este popular editor de código.

4. O Template HTML e as Imagens para o seu Site Currículo

As duas últimas coisas que você precisa são seu template HTML do currículo e as imagens que você pretende usar no seu site.

Para os fins deste tutorial, eu utilizarei o Flatrica HTML resume website template, mostrado abaixo:

Flatrica HTML resume website templateFlatrica HTML resume website templateFlatrica HTML resume website template
Template HTML de site currículo Flatrica

Você pode encontrar seu template de site na área de Downloads da sua conta no Evanto depois de ter feito sua compra. Uma vez que tenha baixado o HTML do template do site, descompacte a pasta e salve na sua área de trabalho para acesso fácil.

Quando se trata das imagens, você precisará de sua foto de rosto e algumas outras fotos pessoais que você planeja usar. Você também pode utilizar um imagem de fundo ou padrão, desde que tenha certeza de ter todas as imagens armazenadas no seu computador de forma que você possa adicioná-las ao seu template.

Como Editar o Conteúdo do seu Template de Site de Currículo

Agora que você tem tudo no lugar, é hora de personalizar o template com suas informações. Vamos dar uma passada em como customizar o template HTML Flatrica.

1. A Estrutura deste Template HTML de Currículo

Antes de começarmos a modificar os arquivos, vamos dar uma olhada na estrutura deste template HTML. Quando descompactar a pasta, você notará que ela contém duas pastas: uma com a documentação e uma com os arquivos do template.

A look at the files included in this HTML resume website templateA look at the files included in this HTML resume website templateA look at the files included in this HTML resume website template
Uma visão dos arquivos inclusos neste template HTML de site currículo.

A pasta com os arquivos to template do site possui diversas subpastas dentro dela:

  • Colors, a qual possui todos os códigos de cores e variáveis utilizadas no template do site.
  • Fonts, a qual contém todas as fontes e ícones.
  • Images com todas as imagens a serem substituídas.
  • Uma pasta tem todos os códigos JavaScript necessário para o template funcionar apropriadamente. Na maioria dos casos, você nunca precisará editar esta pasta ou os arquivos nela pois o JavaScript disponibiliza funcionalidade extra tais como mudar o menu para abrir, controlar as animações de slide e validação de formulários.
  • Uma pasta PHP quer contém o código PHP necessário para a formulário de contato funcionar. Você terá apenas que editar uma única linha de código aqui para adicionar seu endereço de email.
  • A pasta Sass contém todas as variáveis para as folhas de estilo.
  • Stylesheets contém todos os arquivos CSS, os quais você irá precisar editar para adicionar seus estilos no template e associar com sua marca. 

Ao lado destas pastas, também existem diversos arquivos HTML: index-normal.html, index-video.html, single-blog.html e single-portfolio.html.

Tenha em mente que seu template pode não ter todos estes arquivos e pastas, contudo, na maioria dos casos, você vai encontrar as pastas de folhas de estilo, imagens, JavaScript e PHP. Seu template pode também ter mais ou menos arquivos HTML.

2. Substituindo a Informação do Template HTML Padrão 

Dê um clique duplo no index-normal.html (ou index.html caso esteja utilizando um template diferente). Isto irá abrir o arquivo no seu navegador e tornará mais fácil entender quais partes do código você precisa editar e como encontrá-los no seu arquivo de template HTML.

Browser code inspector view of the HTML templates codeBrowser code inspector view of the HTML templates codeBrowser code inspector view of the HTML templates code
Visualização do inspetor de código do navegador para o código do template HTML.

Se você olhar para o template no seu navegador, você verá o que precisa pra editar:

  • Seu nome e informações de contato.
  • O blurb de testo acima dos botões para baixar o seu CV.
  • Diferentes sessões que possuem informações sobre sua educação, habilidades, experiência, portfolio, útlimos clientes e mais.

Uma vez que você sabe o que mudar, você pode começar a procurar pelo código correspondente.

Clique com o botão direito no nome John Doe e selecione Inspect. Você notará que um painel surge na parte inferior  que exibe o código HTML que faz parte do seu template.

A linha de código contendo o nome é selecionada no lado esquerdo do painel do Inpector com o estilo correspondente no lado direito.

Como você pode ver pela screenshot acima, o nome está entre as tags <h4> que são tags HTML utilizadas para representar cabeçalhos.

Na maioria dos casos, pares de tag como esta tem uma tag de abertura e uma de fechamento e o conteúdo tem que ser colocado entre estas tags para exibir na página web, como esta:

<h4>John Doe</h4>

Para editar o template, tudo o que você precisa saber é quais tags contêm a parte da página que você quer editar, encontrá-las no código e substitui-las com suas informações.

Abra o Arquivo HTML no Seu Editor

Agora, volta para a pasta de template, clique com o botão direito no index-normal.html e escolha Open with Sublime Text. Você deverá ver agora o código HTML completo que faz parte do seu template.

Para começar a editar o template, você quer encontrar o mesmo código que você viu no painel do Inspector do seu navegador. 

Role para baixo até encontrar por volta das linhas 150-151. Então, clique entre as tags <h4> e substitua o nome pelo seu.

Replacing the default name and contact informationReplacing the default name and contact informationReplacing the default name and contact information
Substituindo o nome e informações de contato padrões.

Depois disso, clique entre as tags <h6>, apague o texto e digite sua profissão.

Repetindo estes passos várias vezes lhe permitirá substituir todas as informações de exemplo pelas suas próprias.

Há uma sessão no template que você não precisa, simplesmente a exclua. No segundo screenshot abaixo, eu tenho selecionado tudo na tabela de preço e apagado todo o código dela.

You can delete sections of the code you dont need You can delete sections of the code you dont need You can delete sections of the code you dont need
Você pode apagar as sessões do código que você não precisa.

Como Substituir as Imagens Você Mesmo

Pra substituir as imagens pelas suas, simplesmente selecione todas as imagens da pasta correspondente, exclua todas, e coloque as suas imagens na mesma pasta. Se você seguiu os conselhos antes, você renomeou suas imagens com os mesmos nomes das imagens a serem substituídas, o que torna mais rápida a edição do template.

Se você quer adicionar mais informações, selecione o código existente na sessão desejada, copie clicando CTRL/CMD + C e então cole logo abaixo com CTRL/CMD + V. Na screenshot abaixo, eu quis adicionar outra barra de habilidade, então eu selecionei o código da quarta barra de habilidade e copiei imediatamente abaixo:

You can duplicate sections of HTML if you need toYou can duplicate sections of HTML if you need toYou can duplicate sections of HTML if you need to
Você pode duplicar sessões do HTML que você precisa.

E o resultado final se parece com isso:

The end product of adding another skill barThe end product of adding another skill barThe end product of adding another skill bar
O produto final de adicionar outra barra de habilidade.

Como mudar a Aparência do HTML do Seu Site de Currículo

Uma vez que você tenha substituído todas as informações, é hora de estilizar o template do site currículo a seu gosto. Por padrão, o template HTML Flatrica vem com diversas folhas de estilo diferentes. Se você olhar na pasta de folhas de estilo, verá notará que elas estão nomeadas depois das cores utilizadas:

Flatrica comes with numerous stylesheet optionsFlatrica comes with numerous stylesheet optionsFlatrica comes with numerous stylesheet options
Flatica vem com várias opções de folhas de estilo.

Você pode ajustar rapidamente a cor substituindo a folha de estilo no cabeçalho do documento como o nome da sua folha de estilo preferida. Procure pela linha de código que diz:

<!-- CUSTOM STYLE -->

<link href="stylesheets/style.css" id="switch_style" rel="stylesheet">

Mudando o nome para style_blue.css dará a nosso template um visual e  cor completamente novos:

The results of apply the blue stylesheetThe results of apply the blue stylesheetThe results of apply the blue stylesheet
O resultado de aplicar as folhas de estilo azul.

Se você está se sentindo um aventureiro, você pode editar a folha de estilo principal chamada style.css com fontes e cores de sua escolha. Por exemplo, você pode editar a cor do plano de fundo no style.css digitando um código HEX da sua cor desejada igual a:

background-color: #65b5c1;

Editar CSS pode ser feito da mesma forma que editamos o HTML. Clique com o botão direito no elemento que você quer estilizar e clique em Inspect. Desta vez, você irá querer procurar pelo código no lado direito da aba do Inspector e então encontrar o mesmo código no editor de código.

A look at the resume website templates CSS fileA look at the resume website templates CSS fileA look at the resume website templates CSS file
Uma olhada no arquivo CSS do template do site.

Como Subir Seus Arquivos do Site para o Servidor

Depois que você modificou os arquivos de template do site a seu gosto, você precisará envia-los para seu servidor de hospedagem. Você deve ter recebido um email de sua hospedagem contendo as informações necessárias para transferir os arquivos via FTP.

Para iniciar o processo de envio, execute seu programa de FTP. Neste caso, eu estou utilizando o FileZilla. Digite a informação fornecida por sua hospedagem na barra do topo e então clique em QuickConnect:

Inserting information into FileZillaInserting information into FileZillaInserting information into FileZilla
Inserindo informação dentro do FileZilla.

Localize a pasta com seu template no seu computador no lado esquerdo da tela, e clique nela para expandir. No lado inferior esquerdo, selecione todos os arquivos e pastas e arraste todos para o lado direito da tela.

Tenha certeza de enviar todos para a pasta raiz do seu servidor de hospedagem na pasta public_html.

Uploading files to the server via FTPUploading files to the server via FTPUploading files to the server via FTP
Enviando arquivos para o servidor via FTP.

Uma vez que todos os seus arquivos tenham sido enviados, abra seu navegador e digite seu nome de domínio. Parabéns, seu novo site currículo está vivo agora!

Quatro Dicas Rápidas para Tornar Seu Site de Currículo Fantástico

Agora que você sabe como usar um template HTML de currículo, aqui estão quatro dicas que irão lhe ajudar a fazer seu site pessoal ainda mais fantástico:

  1. Comprima Suas Imagens - Antes de enviar seus arquivos para seu servidor de hospedagem, tenha certeza de reduzir o tamanho dos arquivos de suas imagens otimizando-as. Isto irá lhe ajudar a aumentar a velocidade do seu site. Você pode utilizar uma ferramenta como a TinyJPG para comprimir as imagens sem afetar sua qualidade.
  2. Considere Minificar Seus Arquivos de Folhas de Estilo e JavaScript - Assim como as imagens, reduzir o tamanho de arquivos ajudará seu site a carregar mais rápido. Ferramentas como CSS Minifier e JSCompress farão o trabalho por você.
  3. Adicione Seu Site nos Seus Perfis de Redes Sociais - Você trabalhou duro para criar seu site, agora é hora de deixar o mundo saber sobre ele. Aumente sua visibilidade adicionando seu site nos seus perfis das redes sociais.
  4. Utilize-o como uma Parte da Sua Assinatura de Email - Uma das melhores formas de promover seu site é adicioná-lo à sua assinatura de email. É simples, grátis, e leva poucos segundos para configurar, ainda mais que os benefícios são numerosos.

Configure o Seu HTML do Template de Currículo

Editar um template HTML pode parecer entimidador de início, mas não é difícil uma vez que você entendo como o template é estruturado e o que precisa para ser editado. Se você também tiver um tempo para ler alguns tutoriais, você irá dominar HTML e CSS em pouco tempo. Utilize o guia acima para modificar seu template de site resumo e aumentar suas chances de ser contratado.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Business tutorials. Never miss out on learning about the next big thing.
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.