HTML e CSS no Currículo: Quando Listar e Como Descrever

Escrever HTML e CSS no currículo costuma ser uma linha de competências que ninguém lê com atenção, porque quase toda vaga de tecnologia tem algo parecido. O recrutador precisa ver o que foi montado com essas linguagens, e não a sigla. Este guia mostra quando a linha vale, como descrever semântica, responsividade e acessibilidade com fatos e quando o melhor é não listar nada. Para quem está começando, esse é o caminho mais curto para dar peso à palavra.

Quando HTML e CSS entram no currículo, e quando só ocupam espaço

Entram quando a sua função produz páginas, componentes ou e-mails. Ocupam espaço quando a função usa esses itens sem produzi-los, como preencher um editor visual ou atualizar um texto em um sistema de gestão. A diferença está no que você entregou, e não em quantas vezes o termo aparece.

Antes: Conhecimentos em HTML e CSS, Pacote Office e atendimento ao cliente.

Depois: Ajustei o modelo de e-mail de boas-vindas em HTML, com cores e blocos de texto da marca, e acompanhei a taxa de abertura de cada envio.

A segunda versão mostra a tarefa e o resultado. Se você nunca escreveu uma linha de HTML, a linha não deve existir no currículo, e a vaga de atendimento ou de administração vai dizer mais sobre você sem ela.

Descreva a página ou o componente que você construiu

O primeiro passo para uma linha forte é nomear a peça. Uma página de captação, uma tela de cadastro, um menu responsivo ou um conjunto de cartões de produto são objetos que o recrutador entende. Escreva o objeto, depois o que ele fazia.

• Landing page de captação. Diga o objetivo, como inscrição num curso, e o formulário que a página tinha. Quem lê entende o trabalho sem precisar de explicação.
• Tela de cadastro. Descreva os campos, a validação e o que acontecia com um erro. Se você ajustou a mensagem de erro para ser lida por leitores de tela, diga isso.
• Componente reutilizável. Um cartão ou um menu que se repetia em várias páginas mostra que você pensou além da tela. Escreva em quantas páginas ele aparecia. Se ele foi feito em React, o guia de React no currículo mostra como ir além de listar o framework.

Cada uma dessas linhas responde à pergunta que a entrevista faria em seguida. Se você não pode responder a ela, a linha ainda não está pronta para o currículo.

Semântica HTML aparece na descrição quando você organizou a estrutura

Semântica é o uso de elementos que dizem o papel de cada parte da página: cabeçalho, navegação, conteúdo principal, rodapé, botão e rótulo. Ela não é uma palavra de currículo, é uma decisão de código. Ela entra no texto quando você descreve a estrutura que escolheu.

Antes: Desenvolvi páginas com HTML semântico.

Depois: Estruturei a página de matrícula com cabeçalho, navegação e área principal marcados, e liguei cada rótulo ao campo do formulário, para que a leitura por teclado e por leitor de tela seguisse a ordem visual.

A segunda versão cita o que foi feito e para quem. Ela também ensina o recrutador a pergunta certa: ele pode pedir que você explique por que escolheu cada elemento. Se você escreveu a página usando apenas blocos genéricos, descreva o que fez, sem usar a palavra semântica.

Responsividade é um comportamento, e a linha deve dizer em quais telas ele funcionou

Responsivo virou palavra de todo currículo de front-end, e por isso pesa pouco quando aparece sozinha. A descrição útil diz quais telas foram testadas, qual técnica de layout você usou e o que mudou em cada uma. Flexbox e Grid são as técnicas que a vaga costuma citar, e cada uma tem um tipo de problema que resolve.

Flexbox organiza itens em uma linha ou em uma coluna, e serve bem para menus, barras de ação e listas de cartões. Grid organiza a página em linhas e colunas ao mesmo tempo, e aparece em layouts com blocos de tamanhos diferentes. Se você usou as duas, diga em qual parte da página cada uma foi aplicada.

Antes: Layouts responsivos em CSS com Flexbox e media queries.

Depois: Reorganizei a vitrine de produtos com Grid, que passou de quatro colunas no desktop para uma no celular, e ajustei a barra de filtros com Flexbox para não cortar o texto em telas pequenas.

A versão depois tem técnica, tela e problema resolvido. Se você não testou em celular, não escreva que o layout é responsivo. A entrevista vai pedir para você abrir o site no telefone, e o texto precisa aguentar isso.

Acessibilidade se prova pela estrutura, não pela palavra

Acessibilidade é um assunto grande, mas no currículo de quem está começando ela cabe em três ou quatro práticas que você aplicou. A primeira é a ordem dos títulos, que organiza o conteúdo para quem navega por leitor de tela. A segunda é o rótulo ligado ao campo, que informa o que cada entrada pede. A terceira é o texto alternativo em imagens com conteúdo, e a quarta é a navegação pelo teclado.

Escreva as práticas que você aplicou, e não a palavra acessível. Quem listou acessibilidade e não consegue dizer o que fez com a ordem dos títulos vai perder a credibilidade logo no início da conversa. Se a vaga pede métricas de desempenho e acessibilidade, o guia de currículo de desenvolvedor front-end trata esse ponto com mais profundidade.

HTML para e-mail e landing de marketing usa outras regras

Quem trabalha em marketing e precisa de HTML normalmente lida com e-mails, e e-mail não funciona como página. Os clientes de e-mail aceitam menos recursos de CSS, por isso a estrutura costuma usar tabelas e estilos embutidos. Uma vaga de marketing que pede HTML quer saber se você conhece essas limitações, e não se você escreve página web com elas.

Se o seu trabalho incluiu modelos de e-mail, escreva o modelo, o público e o teste feito antes do envio. Essa linha mostra que você sabe onde o código vai rodar. O guia de currículo de marketing digital mostra como encaixar essa experiência no restante do currículo.

Antes: Criação de e-mails em HTML para campanhas.

Depois: Montei os modelos de e-mail de campanha em HTML, com estrutura de tabela para o Gmail e o Outlook, e testei cada modelo antes do disparo para a base de clientes.

Gmail e Outlook aparecem na versão depois porque o teste foi feito neles. Se você não testou em nenhum cliente de e-mail, não escreva a lista.

Designer pode listar CSS quando programa o layout, e construtor de páginas não é código

Designers que escrevem o próprio layout em código são procurados por empresas pequenas e por times de produto. A diferença entre ser designer e ser designer que implementa aparece na descrição. Escreva o componente que você codificou e a ferramenta de design que usou antes.

Se você só entregava arquivos de design para um desenvolvedor, isso é trabalho de design, e a linha deve dizer isso. Não é um problema. A vaga de design de interface pede outra coisa, e o recrutador percebe quando a competência de código foi inflada.

Muitos sites são feitos em editores visuais ou em sistemas de gestão de conteúdo, e isso é um trabalho real. Só que não é programação em HTML, e a vaga de desenvolvimento faz uma pergunta técnica quando lê essa linha. Escreva o nome da ferramenta, o tipo de site e o que você configurou nela.

Um exemplo: “Mantive o site institucional da escola no editor visual do construtor, com páginas de matrícula e blog” é uma linha honesta para uma vaga de atendimento ou de marketing. Para uma vaga de desenvolvimento, ela só funciona se você também tiver código próprio a mostrar.

O link do projeto é a prova que a linha de HTML não consegue dar

Página publicada, repositório com código legível e portfólio com dois ou três trabalhos transformam uma linha de HTML em evidência. O recrutador abre o link e confere a estrutura da página em um minuto. Coloque poucos links, e escolha os que mostram o trabalho que você quer que ele veja. O guia sobre links no currículo mostra quais endereços o ATS lê e quais o recrutador aproveita.

Se você ainda não tem nada publicado, uma página simples, com estrutura limpa e uma descrição do que ela resolve, já serve. Um exemplo pronto de currículo de front-end em /exemplos/desenvolvedor-front-end mostra como organizar esse trecho.

Como fechar: escreva HTML e CSS como trabalho entregue, e deixe de fora o que não fez

A ideia central é esta: HTML e CSS no currículo valem pelo que foi construído com eles. Quem escreve a sigla sem página, sem e-mail ou sem layout perde a pergunta que a vaga faz. Antes de enviar, leia o anúncio e marque os termos de estrutura, estilo e acessibilidade que ele pede, e confira se cada um aparece numa frase verdadeira de experiência. A análise gratuita do AjustaCV compara o seu currículo com o texto da vaga que você colar, sem cadastro, e mostra quais termos já aparecem nele e quais ainda faltam.

Perguntas frequentes